PDA

View Full Version : Remote load combo box & multiselect



rlr2maverick
3 Dec 2008, 2:28 PM
Dear extjs users,
after some months spent in deep evaluation of extjs library I decided to share some of the tests realized up to now, addressing some of the most suggested functionalities.

One of those is the remote load combobox whose store is fully defined by remote calls (json format, both fields and data).
The lazy load function fully implemented achieves to load fields definition first and data only when needed, I think it would go under parameters.

The second still not addressed solution is a multi select combobox, easier than facebook-style-like already published. This interesting component acts in filter mode (typing inside the text field only filters out choices list, while values still are under the complete control of the listbox).

Some other features :
- filtering out list setting value range (for instance comma separated ids)
- setValue(), getValue() compliance
- pagination by design (deactivated by parameter)
- most of the features under parameter conditional activation

For some live examples please refer to http://www.dominat.it/Labs/extjs/example1.php

Indeed,
RLR

galdaka
3 Dec 2008, 2:59 PM
Great work!!

Thanks for share!

mystix
3 Dec 2008, 6:09 PM
One of those is the remote load combobox whose store is fully defined by remote calls (json format, both fields and data).
The lazy load function fully implemented achieves to load fields definition first and data only when needed, I think it would go under parameters.

quick question: how does your "remote load combobox" ux differ from the existing (combo + JsonStore)'s behaviour? i tried your demo but i couldn't spot anything new. also inspected the source and found you were loading the store definition + data from a call to Ext.Ajax in the ux's initComponent() method -- seems pretty convoluted to me.


your multi select combobox looks + plays real good though. =D>
good job!

rlr2maverick
3 Dec 2008, 11:36 PM
Mystix,

this remotely loaded combo box also loads field definition from the server, the control itself is fully separated from the logic behind.

The mission is avoid all of the classic hardcoding which interferes with object reuse (ie field names), the next step in this path would be loading valueField name and displayField name from the server.

The choice to embed this autoconfiguring logic inside initComponent consist in having a valid store object available as soon as possible, even if lazyly not .load() ed. This logic permits to employ this combobox inside a remotely loaded Form object, whch is early setting values (for instance: editing a database record), the whole remotely loaded Form object itself has no hardcoded fileds, field names, validators, ...

I confess I was inspirated by another thread (JSakalos's rules!), whose mission was design an autoconfiguring interface, whose logic is dynamically adapted to the database table/query working on the server without hardcoding.

I'm still absolutely interested in your opinion.

Sorry for my poor english, indeed,
RLR

mystix
4 Dec 2008, 12:18 AM
this remotely loaded combo box also loads field definition from the server, the control itself is fully separated from the logic behind.

perhaps i'm missing something, but i'm already auto-configuring a JsonStore (i.e. remotely loaded field definitions from the server) via its underlying JsonReader's metaData config:
http://extjs.com/docs/?class=Ext.data.JsonReader

[edit]
so all i need to do is setup my combobox like so:


new Ext.form.ComboBox({
displayField: 'name',
valueField: 'code',
store: new Ext.data.JsonStore({
url: 'serverSideScript.php'
}),
});


and send back JSON from the server like so:


{
"total": 1,
"metaData": {
"root": "records",
"totalProperty": "total",
"fields": [
"code",
"name"
]
},
"records": [{
"code": 'Some Code',
"name": 'Some Name'
}]
}


and my combo is automagically setup.

practically anything can be stuff into the metaData config -
i would envision putting the displayField and valueField configs in there too.

rlr2maverick
4 Dec 2008, 1:07 AM
Mystix,

I agree with you, this higly simplifies and reduces code within my solution!

Some logic would remain to take a quite granular control of the lazyness, under some circumnstances the only initially required stuff is metadata without records.

I'll stay with a preconfigured combobox object just to default some values and reduce - once again - code, the actual logic has to be revised in compliance with your suggestion.

As per object ineritance all of this reduced complexity wuold be transferred to ListBox object, about this last one I wander there's no official implementation, my one lacks of a lot of welcome functionalities (icons, events, evanescence effects).

Many thanks,
RLR

mystix
4 Dec 2008, 1:22 AM
about this last one I wander there's no official implementation, my one lacks of a lot of welcome functionalities (icons, events, evanescence effects).

- icons can easily be added via the ComboBox's tpl (http://extjs.com/docs/?class=Ext.form.ComboBox&member=tpl) config
- events?? what do you have in mind?
- what's "evanescence"?

rlr2maverick
4 Dec 2008, 2:53 AM
- icons (iconCls) proposed by Json coming from backend server
- events like 'storeinitialized' upon store object built but no data .load() ed, 'filtermode', 'editmode', 'selectionremoved', ...
- fading effects dropping items from a collapsed listbox (like those of facebook like implementation)

All of this is surely easy addressed by existing facilities (members & functions like tpl), I guess all of this custom realization would be quickly losed by a newer library release, as I perceive a sporadic need of call private functions. I confess I'm waiting for 3.0 release to checkout how all of our actual developed code will still work. Because of this I suggess some official library integration, almost for objects like listbox.

The scope of this interesting share follows in the area of suggest objects, behaviours and functionalities.

Again,
RLR

nbailey
11 Dec 2008, 2:10 PM
has anyone integrated the listbox into an EXT app? We would be VERY interested in using it, but wanted to make sure it would work and play well with others before we got too far down that road.

Suresh
7 Apr 2010, 6:29 AM
I need list box that run with local mode.

Is anyone have idea to achieve same in local mode.

JoyfulBobHome
3 May 2010, 7:51 AM
Great extension! Thanks!

I'm getting the following error when my page loads:

H is undefined
apply(Object { name="K"}, Object { name="H"}, Object { name="J"})
Ext.ux.MultiSelectListBox.js()
[Break on this error] window.undefined=window.undefined;Ext=...window.attachEvent("onunload",a)}})();

Here's my field:


var rfsSHPEADRfield = new Ext.ux.afgs.ListBox({
fieldLabel: 'ShipTo Email(s)',
id: 'rfsSHPEADRfield',
width: 120,
resizable : true,
store: sctUsrStore,
tpl: sctUsrTpl,
sqlView : 'USRPF',
multiSelect : true,
valueField : 'USRPF',
displayField : 'USRPF'
});

My store is defined as follows:


var sctUsrStore = new Ext.data.Store({
id: 'sctUsrStore',
proxy: new Ext.data.HttpProxy({
url: 'USRMSTCMBO',
method: 'POST'
}),
baseParams: {
submit: 'RETRIEVE',
process: 'INQUIRE',
processType: 'LIST',
cgirequest: 'LOADCB',
dbfile: 'USRMST'
},
reader: new Ext.data.JsonReader({ //Tell datastore where to get data from
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{ name: 'USRPF', type: 'string' , mapping: 'USRPF' }
, { name: 'USRNM', type: 'string' , mapping: 'USRNM' }
, { name: 'COMNO', type: 'string' , mapping: 'COMNO' }
, { name: 'HOUSE', type: 'string' , mapping: 'HOUSE' }
, { name: 'DIVID', type: 'string' , mapping: 'DIVID' }
, { name: 'ACTNO', type: 'int' , mapping: 'ACTNO' }
, { name: 'ACTCD', type: 'string' , mapping: 'ACTCD' }
, { name: 'STID' , type: 'string' , mapping: 'STID' }
])
});

And the template:

var sctUsrTpl = new Ext.XTemplate(
'<tpl for="."><div class="combo-result-item">',
'<div class="combo-full-address">{USRPF} : {USRNM}</div>',
'</div></tpl>'
);