PDA

View Full Version : Filling comboBox from returned response



Mango_lier
23 Jan 2008, 5:56 PM
I have a form defined like this


usersDlg = function() {
var user_name = new Ext.form.TextField({
emptyText: "Please enter Name",
fieldLabel: "Name",
name: "user_name",
allowBlank: false,
maxLength: 100,
anchor: "95%"
});
var user_security_level = new Ext.form.ComboBox({
fieldLabel: "Security Level",
name: "user_security_level",
anchor: "95%",
valueField:'userlevel_id',
displayField:'userlevel_title',
hiddenName:'user_security_level',
editable:false,
mode: 'local',
triggerAction: 'all',
store:new Ext.data.Store({
reader : new Ext.data.JsonReader({
root : 'user_security_level',
id: 'userlevel_id'
}, ["userlevel_id","userlevel_title"])
})
});

this._form = new Ext.FormPanel({
baseCls: 'x-plain',
labelAlign: 'left',
labelWidth: 80,
bodyStyle:'padding:5px 5px 0;position:relative;',
defaults: { bodyStyle: 'background-color: #CAD9EC;'},
layoutConfig:{deferredRender:false},
reader : new Ext.data.JsonReader({
root : 'data',
id: 'user_id'
}, ["user_name","user_security_level"]),
items: [user_name,user_security_level]
});
};


I am loading data into the form like


this._form.load({method : 'GET', url:'users.php', params:{user_id:1}, waitMsg:'Loading...'});



The response returned from the server looks like following


{
"success": true ,"totalrecords": 1 ,"pagesize": 1 ,"page": 1 ,
"data": [{"user_id": 1,"user_name": "Mr Guest","user_security_level": 1}],
"user_security_level":[ {"userlevel_id": 1,"userlevel_title": "Guest"},
{"userlevel_id": 2,"userlevel_title": "User"},
{"userlevel_id": 3,"userlevel_title": "Manager"},
{"userlevel_id": 4,"userlevel_title": "Admin"}]
}

I would like to fill the comboBox on the form using the "user_security_level" node above. A little debugging reveals that the
"this._form.reader.jsonData" holds what I need. but how to fill the comboBox?

Mango_lier
23 Jan 2008, 11:13 PM
Polite bump

Condor
23 Jan 2008, 11:38 PM
Use:


this._form.getForm().load({
...
success: function(form, action) {
user_security_level.store.loadData(action.result);
}
});

(needs extra code to make user_security_level accessible)

Mango_lier
24 Jan 2008, 9:50 AM
Thanks Condor, I am loading the data like this.


this._form.on('actioncomplete', function(form, action){
form.items.get(form.items.findIndex('name','user_security_level')).store.loadData(form.reader.jsonData);
});
The comboBox is populated with correct data but for first time, shown data is the value and not the display field. My guess is that it is because the comboBox datastore is getting initialized after the data in the form fields. What event I can trap to populate the comboBox before the form is filled in.

Mango_lier
24 Jan 2008, 3:07 PM
I think this is the way to do it, correct me if I am wrong.

this._form.form.setValues =
this._form.form.setValues.createInterceptor(function(values) {
this._form.form.findField('user_security_level').store.loadData(this._form.reader.jsonData);
}, this);