[Solved] combobox value didn't set correctly

[karantir]

Hi!

Ext version: 1.1
Browser: firefox 2.0
Platform: linux

Sorry for crossposting (http://extjs.com/forum/editpost.php?do=editpost&p=53364), but I guess this is a bug...

I'm using the following code to load data in my combobox



...
var access_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: "/ajax.php?module=admin.sitemap&action=get_accesses&id_module=" + this.getAt(0).data.id_module
}),
reader: new Ext.data.ArrayReader({},['id_access','accessName']),
remoteSort: false
});
access_data.load();
...
var accesses = new Ext.form.ComboBox({
fieldLabel: 'Access',
hiddenName: 'id_access',
value: this.getAt(0).data.id_access,
triggerAction: 'all',
emptyText: '',
store: access_data,
valueField: 'id_access',
displayField: 'accessName',
mode: 'local',
width: item_props_field_w,
disabled: (this.getAt(0).data.id_module == 0) ? true : false
});
...
item_props.fieldset(
...
accesses,
...
);
...


And everything goes fine except of that initial value of accesses combo sets in numeric valueField instead of string disaplayField, although the corresponding record exists (see screenshot) and even selected when the list dropped down.

This strange behavior isn't observing when I'm assigning dropdown options from the local store like this


var modules = new Ext.form.ComboBox({
fieldLabel: 'Module',
hiddenName: 'id_module',
value: this.getAt(0).data.id_module,
triggerAction: 'all',
emptyText: '',
store: new Ext.data.SimpleStore({
fields: ['id_module', 'moduleName'],
data: Ext.admin.modules
}),
valueField:'id_module',
displayField:'moduleName',
mode: 'local',
width: item_props_field_w
});


I've already tested dozens of ways to make this field work correctly but all of it leads to the same result... :(

Here is the full code for this form if somebody find it necessary:


Cthulhu.showProgress('Loading content...');
btns.remove.enable();
btns.save.enable();
item_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: '/ajax.php?module=admin.sitemap&action=get&id_item=' + item.id}),
reader: new Ext.data.JsonReader({},['id_access','id_module','moduleParams','itemName','urlPart','state']),
remoteSort: false
});
item_props = new Ext.form.Form({
id: 'item_props',
labelAlign: 'left',
labelWidth: item_props_label_w,
buttonAlign: 'right',
url: '/ajax.php?module=admin.sitemap&action=save&id_item=' + item.id
});
item_data.on('load', function() {
var access_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: "/ajax.php?module=admin.sitemap&action=get_accesses&id_module=" + this.getAt(0).data.id_module
}),
reader: new Ext.data.ArrayReader({},['id_access','accessName']),
remoteSort: false
});
access_data.load();
var itemName = new Ext.form.TextField({
fieldLabel: 'Item name',
name: 'itemName',
value: this.getAt(0).data.itemName,
width: item_props_field_w
});
var urlPart = new Ext.form.TextField({
fieldLabel: 'URL part',
name: 'urlPart',
value: this.getAt(0).data.urlPart,
width: item_props_field_w
});
var states = new Ext.form.ComboBox({
fieldLabel: 'State',
hiddenName: 'state',
value: this.getAt(0).data.state,
triggerAction: 'all',
store: new Ext.data.SimpleStore({
fields: ['num', 'state'],
data: Ext.admin.states
}),
valueField:'num',
displayField:'state',
mode: 'local',
width: item_props_field_w
});
var modules = new Ext.form.ComboBox({
fieldLabel: 'Module',
hiddenName: 'id_module',
value: this.getAt(0).data.id_module,
triggerAction: 'all',
emptyText: '',
store: new Ext.data.SimpleStore({
fields: ['id_module', 'moduleName'],
data: Ext.admin.modules
}),
valueField:'id_module',
displayField:'moduleName',
mode: 'local',
width: item_props_field_w
});
var accesses = new Ext.form.ComboBox({
fieldLabel: 'Access',
hiddenName: 'id_access',
value: this.getAt(0).data.id_access,
triggerAction: 'all',
emptyText: '',
store: access_data,
valueField:'id_access',
displayField:'accessName',
mode: 'local',
width: item_props_field_w,
disabled: (this.getAt(0).data.id_module == 0) ? true : false
});
var moduleParams = new Ext.form.TextField({
fieldLabel: 'Module parameters',
name: 'moduleParams',
value: this.getAt(0).data.moduleParams,
width: item_props_field_w,
disabled: (this.getAt(0).data.id_module == 0) ? true : false
});
item_props.fieldset(
{legend: "Item properties"},
itemName,
urlPart,
states,
modules,
accesses,
moduleParams
);
item_props.render('cbody');
modules.on('select', function(){
Cthulhu.showProgress('Waiting for server...');
ajax = new Ext.data.Connection;
ajax.request({
url: '/ajax.php',
method: 'POST',
params: {
module: 'admin.sitemap',
action: 'get_accesses',
id_module: modules.getValue()
},
callback: function(options, success, response) {
if (success) {
data = eval('(' + response.responseText + ')');
if (data) accesses.store.loadData(data);
if (accesses.disabled) accesses.enable();
if (moduleParams.disabled) moduleParams.enable();
}
Cthulhu.hideProgress();
}
});
});
Cthulhu.hideProgress();
});
item_props.on({
actioncomplete: function(form, action){
if(action.type == 'submit'){
stree.getNodeById(current_item.id).setText(form.findField('itemName').getValue());
Cthulhu.hideProgress();
}
}
});
item_data.load();


P.S. I've just tested setValue() function and got the same problem.

[jack.slocum]

You are loading the data remotely (via HttpProxy) - so when the combo renders, there is no data available. This means it can't find a record for the display text and defaults to displaying the value.

[karantir]

I've changed my code so that setValue function goes after rendering and remote data loads:


item_data.on('load', function() {
var access_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: "/ajax.php?module=admin.sitemap&action=get_accesses&id_module=" + this.getAt(0).data.id_module}),
reader: new Ext.data.ArrayReader({},['id_access','accessName']),
remoteSort: false
});
access_data.load();
var modules_data = new Ext.data.SimpleStore({
fields: ['id_module', 'moduleName'],
data: Ext.admin.modules,
});
...
var modules = new Ext.form.ComboBox({
fieldLabel: 'Module',
hiddenName: 'id_module',
value: this.getAt(0).data.id_module,
triggerAction: 'all',
emptyText: '',
store: modules_data,
valueField:'id_module',
displayField:'moduleName',
mode: 'local',
width: item_props_field_w
});
var accesses = new Ext.form.ComboBox({
fieldLabel: 'Access',
hiddenName: 'id_access',
triggerAction: 'all',
emptyText: '',
store: access_data,
valueField:'id_access',
displayField:'accessName',
mode: 'local',
width: item_props_field_w,
disabled: (this.getAt(0).data.id_module == 0) ? true : false
});
...
item_props.fieldset(
...
modules,
accesses,
...
);
item_props.render('cbody');
...
accesses.setValue(this.getAt(0).data.id_access);
});

But I've got the same result...

[karantir]

I solved the problem in this way:


...
item_data.on('load', function() {
var access_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: "/ajax.php?module=admin.sitemap&action=get_accesses&id_module=" + this.getAt(0).data.id_module}),
reader: new Ext.data.ArrayReader({},['id_access','accessName']),
remoteSort: false
});
var modules_data = new Ext.data.SimpleStore({
fields: ['id_module', 'moduleName'],
data: Ext.admin.modules,
});
...
access_data.on('load', function() {
...
var accesses = new Ext.form.ComboBox({
fieldLabel: 'Access',
hiddenName: 'id_access',
value: access_value,
triggerAction: 'all',
emptyText: '',
store: access_data,
valueField:'id_access',
displayField:'accessName',
mode: 'local',
width: item_props_field_w,
disabled: (modules_value == 0) ? true : false
});
...
item_props.render('cbody');
...
});
access_data.load();
});
...