PDA

View Full Version : Load item selector dynamically



hieu79vn
18 Jul 2012, 2:21 AM
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
23 Jul 2012, 4:21 PM
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
24 Jul 2012, 11:28 PM
Thank you Scott,
So I must declare a variable in code like Sencha's example and maybe combine it with a unique number.

SambitMishra
30 Apr 2013, 3:48 AM
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
1 May 2013, 2:37 AM
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 bind store after uploading data to it.
var dummyStore = Ext.create('Ext.data.Store', {
proxy: {
type: 'ajax',
url: 'test.php',
reader: {
type: 'json'
}
}
});
dummyStore.load({
callback: function() {
field.bindStore(newStore);
}
});

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