PDA

View Full Version : Ext.form.ux.MultiSelect in a form panel



ana.cristina.ionescu
5 Feb 2012, 5:35 AM
Hi,

I have an itemselector in a form and a Ext.data.JsonStore associated to the form.

the item looks like this:


var ds = Ext.create('Ext.data.ArrayStore', {
data: [
['1', 'One'], ['2', 'Two'], ['3', 'Three']],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});

The form item:

{
xtype: 'itemselector',
name: 'itemselector',
// id: 'itemselector-field',
anchor: '100%',
fieldLabel: 'ItemSelector',
imagePath: '../../ext/examples/ux/css/images',
store: ds,
displayField: 'text',
valueField: 'value',
// value: ['3', '4', '6'],
allowBlank: false,
msgTarget: 'side'
}

The json returned by the php looks like this:



{"success":true,"data":{"item1":"1","itemselector":"['1','2']"}}
But the item selector is never populated with the json values above.Can anyone help me?I am using ExtJS 4.0.7.Thanks!

mitchellsimoens
5 Feb 2012, 9:58 AM
I can see you are using the example code which definitely works.

Are you saying that the values from that JSON are never selected or are you expecting those values to replace what is in your store?

Also, any errors in the console?

ana.cristina.ionescu
6 Feb 2012, 12:19 AM
"Available values " from the ItemSelector are populated with the values from ds store. But "Selected Values" are empty and I would like to have there the values from json ( returned from a php file). I don't know exactly in what format to return the values in the json , in order to populate "Selected Values".

No errors in the console and all the other form fields values are displayed correctly.
Ana

ana.cristina.ionescu
6 Feb 2012, 12:41 AM
Also I am having another issue. I can use xtype: itemselector only if I include the js files like this:

<script type="text/javascript" src="../ext/examples/ux/layout/component/form/MultiSelect.js"></script>
<script type="text/javascript" src="../ext/examples/ux/layout/component/form/ItemSelector.js"></script>
<script type="text/javascript" src="../ext/examples/ux/form/MultiSelect.js"></script>
<script type="text/javascript" src="../ext/examples/ux/form/ItemSelector.js"></script>


If I am using dynamic loading:

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ext/examples/ux');
Ext.require([
'Ext.form.Panel',
'Ext.ux.form.MultiSelect',
'Ext.ux.form.ItemSelector'
]);

I am getting an error: "namespace is undefined", although all 4 js files are loaded.
Can you help me also with this? Is there an order on how the files should be loaded?

Thank you

ana.cristina.ionescu
9 Feb 2012, 8:59 AM
Can someone pls help me?