PDA

View Full Version : Loading simple combbox from store fails



rbraddy
25 Aug 2012, 1:13 PM
Hi,

Having a heck of a time getting a simple combo box to load from an in-memory store. When I connect the Combobox to the Store, I get the following failure when the UnitsStore.js file loads. If I disconnect UnitsStore from the combo box, it loads fine (but there's nothing in combo, obviously).

There's no stack trace in Firebug, just the following console error:

TypeError: item is null



...')
!== -1 && (Ext.ClassManager.isCreated(item) || Ext.Loader.isAClassNameWithAKn...




Seems like a construction issue of some kind, but don't see what's wrong (this code is generated by Sencha Architect 2.1).

This one's got me stumped...

Any suggestions?

Thanks
Rick


UnitsStore


Ext.define('VolumesApp.store.UnitsStore', {
extend: 'Ext.data.Store',

constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'UnitsStore',
data: [
{
reserve_units: 'MB',
abbr: 'MB'
},
{
reserve_units: 'GB',
abbr: 'GB'
},
{
reserve_units: 'TB',
abbr: 'TB'
}
],
fields: [
{
name: 'units'
},
{
name: 'abbr'
}
]
}, cfg)]);
}
});



Combbox


{
xtype: 'combobox',
flex: 2,
disabled: true,
id: 'idReservedUnits',
maxWidth: 75,
name: 'reserve_units',
labelWidth: 60,
emptyText: 'Units',
displayField: 'abbr',
store: 'UnitsStore',
valueField: 'units'
}

scottmartin
25 Aug 2012, 2:00 PM
You have differences in your data/fields:

data -> reserve_units:
fields -> units

And you combo uses : units/reserve_units/abbr

A little confused on your intent:



// The data store containing the list of states
var store = Ext.create('Ext.data.Store', {
data: [
{ units: 'MB', reserve_units: 'MB', abbr: 'MB' },
{ units: 'MB', reserve_units: 'GB', abbr: 'GB' },
{ units: 'MB', reserve_units: 'TB', abbr: 'TB'
}
],
fields: [
{ name: 'reserve_units' },
{ name: 'units' },
{ name: 'abbr' }
]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: store,
queryMode: 'local',
displayField: 'abbr',
valueField: 'units',
renderTo: Ext.getBody()
});?


Scott.

rbraddy
25 Aug 2012, 3:09 PM
Thanks Scott. Yes, there was some confusion as I tried different things.

Still having issues with this in Sencha Architect. It just isn't that complex, but every time I add the store to the combo box, it's as if my project is becoming corrupted (I have to roll back my changes to recover).

Will keep after it..

rbraddy
19 Sep 2012, 12:10 PM
I did figure this out. It was a combination of issues. One of the keys was setting the "queryMode" config to "local" instead of "remote".

Note also the "value" is set to "1", which tells the combo box which item to show by default:

raid_abbr: '1',
raid_desc: 'RAID 1 = mirror, full redundancy'


I hope this working example is useful to someone trying to get combo boxes configured the first time.
Rick

COMBO Box:


{
xtype: 'combobox',
anchor: '100%',
itemId: '',
name: 'raid_abbr',
value: '1',
fieldLabel: 'RAID Level',
labelWidth: 70,
editable: false,
displayField: 'raid_desc',
queryMode: 'local',
store: 'RAIDComboStore',
valueField: 'raid_abbr'
},


MODEL:


Ext.define('PoolsApp.model.RAIDLevels', {
extend: 'Ext.data.Model',


fields: [
{ name: 'raid_desc', type: 'string' },
{ name: 'raid_abbr', type: 'string'
}
]
});



STORE:


Ext.define('PoolsApp.store.RAIDComboStore', {
extend: 'Ext.data.Store',


requires: [
'PoolsApp.model.RAIDLevels'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
storeId: 'raidComboStore',
model: 'PoolsApp.model.RAIDLevels',
data: [
{
raid_abbr: '0', raid_desc: 'RAID 0 = striping, no redundancy'
},
{
raid_abbr: '1', raid_desc: 'RAID 1 = mirror, full redundancy'
},
{
raid_abbr: '5', raid_desc: 'RAID 5 = RAID-Z = single parity'
},
{
raid_abbr: '6', raid_desc: 'RAID 6 = RAID-Z2 = dual parity'
},
{
raid_abbr: '7', raid_desc: 'RAID 7 = RAID-Z3 = triple parity'
}
]
}, cfg)]);
}
});