PDA

View Full Version : Combobox turns into input field



mkrakowski
10 Apr 2013, 8:15 AM
Hi all,

I have a method that converts an array into a store (upgrading from Ext 3.4 to 4.1). Problem is that when rendered, the xtype : combo is converted to a a regular input field, not sure why this is occurring.

Here's my code..

Function call to assoc_array_to_simple_store...



var field_merchant_supporting_merchant_id = {
id : id,
xtype : 'combo',
fieldLabel : 'Merchant',
store : TOP.assoc_array_to_simple_store({ // <--- convert array into store
key : 'id',
label : 'name',
data : TOP.page_vars['merchants'],
prefixAll : true,
prefixAllKey : '0',
prefixAllLabel : 'Select Merchant'
}),
triggerAction : 'all',
valueField : 'key',
displayField : 'label',
queryMode : 'local',
typeAhead : true,
selectOnFocus : true,
forceSelection : true,
value : value,
width : 250,

[...]



Array to store function


assoc_array_to_simple_store: function(options) {
// Define store model
Ext.define('simplestoreModel', {
extend : 'Ext.data.Model',
fields : ['key', 'label']
});

options = objMerge({
model : 'simplestoreModel',
key : null,
label : null,
data: {},
prefixAll : true,
prefixAllKey: '0',
prefixAllLabel : 'All'
}, options || {});

// build the data object
var data = [];
if (options.prefixAll) {
var prefixRow = { key : options.prefixAllKey, label : options.prefixAllLabel };
data.push(prefixRow); //data.push([options.prefixAllKey, options.prefixAllLabel]);
}
if (!isEmptyObj(options.data)) {
Ext.iterate(options.data, function(key, o) {
if (typeof o == 'string') {
var rowKey = key;
var rowLabel = o;
var dataRow = { key : rowKey, label : rowLabel };
} else {
var rowLabel = o[options.label];
var rowKey = o[options.key];
var dataRow = { key : rowKey, label : rowLabel };
}
if (!Ext.isEmpty(rowKey) && !Ext.isEmpty(rowLabel)) {
data.push(dataRow); // data.push([rowKey, rowLabel]);
}
});
}

return Ext.create('Ext.data.Store', { //new Ext.data.SimpleStore({
model : 'simplestoreModel',
data : data,
proxy : { type : 'memory' }
});
},

[...]



Firebug..


console.log(data); // Is something wrong with the format of this object?

[Object { key="0", label="Select Interval Unit"}, Object { key="days", label="Day"}, Object { key="weeks", label="Week"}, Object { key="months", label="Month"}, Object { key="years", label="Year"}]

//
//


This function was previously working correctly in Ext 3.4, here's the same object output (in Ext 3.4).

Using this object (Ext 3.4 formatted) in Ext 4 generates the combo boxes with the correct number of drop down menus, however they are "blank values". Adding "key" and "label" to the array in Ext 4 renders an input textfield with the first value.



console.log(data);

[["0", "Select Interval Unit"], ["days", "Day"], ["weeks", "Week"], ["months", "Month"], ["years", "Year"]]

//




So all I'm doing different is adding the "key" and "label" whereas before it was just the key value, and label value.


{ key : rowKey, label : rowLabel }

This is what I'm seeing (combo boxes are converted to input fields)

43060



What I was previously seeing in Ext 3.4

43061


Thanks!

slemmon
12 Apr 2013, 9:04 AM
Can you post a working example snippet that demonstrates the issue? Based on what you've posted so far I'm unsure what's causing your issue.

mkrakowski
12 Apr 2013, 9:08 AM
I've narrowed it down to it being values from the [key] because when I set a dummy key variable with static text (e.g. var myKey = 'sometext') it populates fine (ofcourse you cannot preselect nor save data). When I inspect the dynamic key values in firebug, nothing looks out of the ordinary, but it could be a back-end issue.