Load item selector dynamically

[hieu79vn]

Hi
Ass we see in the example of itemselector, we must create a datastore with var and then bind it to the itemselector


var ds = Ext.create('Ext.data.ArrayStore', { fields: ['value','text'], proxy: { type: 'ajax', url: 'Numbers', reader: 'array' }, autoLoad: true, sortInfo: { field: 'value', direction: 'ASC' } }); /* * Ext.ux.form.ItemSelector Example Code */ var isForm = Ext.widget('form', { title: 'ItemSelector Test', width: 700, bodyPadding: 10, height: 300, renderTo: 'itemselector', layout: 'fit', items:[{ xtype: 'itemselector', name: 'itemselector', id: 'itemselector-field', anchor: '100%', fieldLabel: 'ItemSelector', imagePath: '../ux/images/', store: ds, displayField: 'text', valueField: 'value', value: ['3', '4', '6'], allowBlank: false, msgTarget: 'side' }], dockedItems: createDockedItems('itemselector-field') });

But instead of doing like that, I would like to create the store dynamically in the itemselector

var isForm = Ext.widget('form', {
title: 'ItemSelector Test',
width: 700,
bodyPadding: 10,
height: 300,
renderTo: 'itemselector',
layout: 'fit',
items:[{
xtype: 'itemselector',
name: 'itemselector',
id: 'itemselector-field',
anchor: '100%',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
store: Ext.create('Ext.data.ArrayStore', {
fields: ['value','text'],
proxy: {
type: 'ajax',
url: 'Numbers',
reader: 'array'
},
autoLoad: true,
sortInfo: {
field: 'value',
direction: 'ASC'
}
}),
displayField: 'text',
valueField: 'value',
value: ['3', '4', '6'],
allowBlank: false,
msgTarget: 'side'
}],
dockedItems: createDockedItems('itemselector-field')
});

but data deosn't show
Do you know why?

Thank you

[scottmartin]

This would work with array data, but not when you are making an ajax call that is going to the server to get the data. Your data has not returned and your code is still processing down the line.

Scott.

[hieu79vn]

Thank you Scott,
So I must declare a variable in code like Sencha's example and maybe combine it with a unique number.

[SambitMishra]

Hi Scott,
I was having some issue with dynamic loading store data in itemselector. While I am adding store on field's boxready event, by calling getValue method I am getting its value, but by setValue Method unable set the value, I tried to check the same in extjs 4.1 example itself. (Just trying to bindstore of itemselector in its boxready). But the result is same.
Plz help me in this./:)

[SambitMishra]

Hi all, recently I came across a typical problem of binding a new store to the itemselector dynamically, which was not working as the conventional way i.e. field.bindStore(newStore).
Also all the above mentioned solutions also didn't work out for me.

Reason:- when a store in item selector is assigned, it internally assign the store to its fromField and toField, and internally sync the data(select/deselect), but when we externally bind a store, after the field gets rendered, the syncing of store doesn't work out, as it expected.

New Solution: (I will say work around) is that after binding store, call its initComponent Method. the rest thing will be handled internally. ex:
field.bindStore(newStore);
field.initComponent();

It worked for me, after 5-6 hours of hit and trial. Hope it helps:)