PDA

View Full Version : Combobox: pre-selected from db not working?



hallikpapa
12 Aug 2009, 5:26 PM
I am using the MetaTabsForm plugin (http://metatabsform.extjs.eu/) where I generate the fields in my form dynamically based on columns in a meta data table in my DB. this doesn't seem to be a plugin issue, but a user issue on how setting the "selectedValue" in a combobox for extjs works. The PHP below displays the field settings for my combobox in question. This combobox (and all others in the form) won't pre-populate when an id is returned to the server. All the text inputs work fine and populate with data returned from the DB.

Here is my php

$fields[] =
array(
"id"=>"districtID",
"name"=>"meta-district",
"fieldLabel"=>"District",
"emptyText"=>'Select District',
"xtype"=>"districtcombo"
);

and the combo box xtype


Ext.ux.adportal.DistrictCombo = function(config) {

// call parent constructor
Ext.ux.adportal.DistrictCombo.superclass.constructor.call(this, config);

this.tpl = config.tpl ||
'<tpl for="."><div class="x-combo-list-item x-icon-combo-item {'
+ this.iconClsField
+ '}">{'
+ this.displayField
+ '}</div></tpl>'
;

this.on({
render:{scope:this, fn:function() {
var wrap = this.el.up('div.x-form-field-wrap');
this.wrap.applyStyles({position:'relative'});
this.el.addClass('x-icon-combo-input');
}},
select:{fn:function(combo,value) {
var rs = Ext.getCmp('rsID');
rs.clearValue();
rs.setDisabled(true);
rs.store.removeAll();
rs.store.reload({
params: { district_id: value.id }
})
rs.setDisabled(false);
}}
});
}

Ext.extend(Ext.ux.adportal.DistrictCombo, Ext.form.ComboBox, {
id : 'districtID',
initComponent: function() {
Ext.apply(this, {
store: new Ext.data.Store({
reader : new Ext.data.JsonReader({
root : 'data'
}, [ {
name : 'id', type : 'int'
},{
name : 'name', type : 'string'
}]),
autoLoad : true,
url : '../extjs.php?act=district'
}),
valueField : 'id',
hiddenName : 'district-id',
displayField : 'name',
lastQuery : '',
triggerAction : 'all'
});
Ext.ux.adportal.DistrictCombo.superclass.initComponent.apply(this,arguments);
},
setValue: function(value) {
if(!Ext.isDefined(this.store.totalLength)){
this.store.on('load', this.setValue.createDelegate(this, arguments), null, {single: true});
if(this.store.lastOptions === null){
this.store.load();
}
return;
}
console.log("Value " + value);
Ext.ux.adportal.DistrictCombo.superclass.setValue.call(this, value);
}

}); // end of extend

//register xtype
Ext.reg('districtcombo', Ext.ux.adportal.DistrictCombo);


It displays, saves, everything all perfectly except on comboboxes. Comboboxes will save the proper id to the DB, it just isn't rendering the correct values/name in any combo box based on values returned from the DB. The "2" in meta-district above is the valueField: id.

I took a screenshot of jumping thru the code, and meta-district is set, but field comes back as null, because of the field = this.findField(id). I cannot see why. Ideas?

<edit> I saw that it was trying to look it up by 'meta-district' and failing. couldn't find the combo box object. I set the combo-box id to meta-district, and it started working. I am going to keep playing with this to make sure it will not cause any problems elsewhere in the code defining the combobox like that