View Full Version : Combobox not populating when changing stores

13 Oct 2012, 8:57 AM

I am trying to extact the data from an existing combobox, get distinct values in the data I have extracted and then reassign the distinct data to the combobox.

First, I get the data by adding a handler for the AfterRender event of the combobox.

onCategoryComboboxAfterRender: function(abstractcomponent, options){
var itms = abstractcomponent.store.data.items;

Then I get the values that are in the combobox, which are from the field, 'category' and put them in the array, cats.

var cats = [];
for(var t = 0;t< itms.length;t++){

I get the distinct values from cats:

var getUnique = function(arr){
var a = [], l = arr.length;
for(var i=0; i<l; i++) {
for(var j=i+1; j<l; j++)
if (arr[i] === arr[j]) j = ++i;
return a;

var dstnct = getUnique(cats);

I create a model that has a field, 'value':

Ext.define('tempComboModel', {
extend: 'Ext.data.Model',
config: {
identifier: 'uuid',
fields: [
{name: 'value', type: 'string'}
I create a store that uses the newly created model, 'tempComboModel':

var store = Ext.create('Ext.data.Store', {
model: 'tempComboModel',
proxy: {
type: 'memory',
reader: {
type: 'json'

I assign the newly created store to the combobox:

abstractcomponent.store = store;

I put the distinct values into the newly assigned store:

for(var i = 0; i< dstnct.length;i++)
abstractcomponent.getStore().add(new Ext.data.Record({value:dstnct[i]}));

I deploy and preview the code.

There is no data in the combo. Also, Firefox reports two errors:

TypeError: me.fields is undefined
length = records.length;


TypeError: records is undefined
length = records.length;

I must be doing something very wrong. I will greatly appreciate any help anybody can offer.

13 Oct 2012, 4:19 PM
You're mixing all sorts of paradigms there. I'm guessing you're using ExtJS 4 so I've moved this thread to the ExtJS 4 Q&A forum.

Why are you doing this in an afterrender listener? Why not just do it when the store loads?

To grab unique values from a store you could use something like:

var values = combobox.getStore().collect('category');

I wouldn't use a config block when defining a model if I were you. That may be the way to do it in Touch but in ExtJS you're asking for trouble. Just specify the config options directly on the class.

This bit appears to be from ExtJS 3:

new Ext.data.Record({value:dstnct[i]})

Ext.data.Record is just an alternative name for Ext.data.Model but you should probably be creating instances of tempComboModel instead (or just passing the record configs to the add method).

This line is a little too optimistic:

abstractcomponent.store = store;

The store is bound to the combobox, updating that single property won't update all of the other stuff like the listeners. To 'update' the store for a combobox the best way is to update the contents of the store rather than trying to change the store itself. You can either clear the contents of the store and add the unique entries or alternatively just purge the duplicates.

13 Oct 2012, 5:15 PM
Thank you, skirtle!

I've learned a lot from your writing.