View Full Version : adding custom row to combo box populated from store

31 Jul 2012, 12:55 AM
I have a combo box that is populated from a json proxy. However, I would like to add a custom option , one that does not exist in the database.

I was trying to add it in the afterrender event thus :

{ xtype: 'combobox',
store: 'Phone',
dataIndex: 'Phone_id',
displayField: 'MACAddress',
valueField: '_id',
fieldLabel: 'Phone',
name: 'Phone_id',
listeners: {
afterRender: function(combo,options){
var data = [];
var record = new Ext.data.Record({ MACAddress: 'No Phone', _id: ''});

however, I get the following error on the line

var record = new Ext.data.Record({ MACAddress: 'No Phone', _id: ''});

"Uncaught TypeError: Cannot read property 'items' of undefined " (ext-all.js:21)

what is missing ? I don't understand why the error is happening when all I am doing is creating a new record.

31 Jul 2012, 1:14 AM
If you're looking for help, please post in the appropriate help forum. Moving.

31 Jul 2012, 4:04 AM
You can only successfully add an item to the combo's list after the store is fully loaded, otherwise you'll get unexpected results. You need to use the underlying Ext.data.Store's load (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-event-load) event:

listeners: {
load: function(store, records, successful, eOpts) {
store.add({MACAddress: 'No Phone', _id: ''});

Note that this will append the new item to the end of the store. For more concise control over ordinal position of the new item, use the store's insert (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-insert) method.

31 Jul 2012, 4:37 AM
I didn't want that extra item adding to the store, as all other users of the store would get the item that I only wanted in the combo.

I eventually got around the problem by allowing the user to "blank" the combo box entry.

thanks for the ideas and help