Load Store Dinamically in component ItemSelector, please help me.

[claudioprv]

I changed sencha example of ItemSelector Ux component, this component is a very usefull for me if it work right, but I have some questions about your working.

See my code, it is close to work, but I don't understand enough for to know where is the fail of my code, I'm extjs beginner and I trying discover how working with this wonderfull framework.

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


Ext.define('numberModel',{
extend: 'Ext.data.Model',
fields: [
    {name: 'number', type: 'string'},
    {name: 'numberName', type: 'string'}]
}); 
 
var numberStore = Ext.create('Ext.data.Store',{
    model: 'numberModel',
    proxy: {
        type: 'ajax',
        //url: 'numbers.json',            
        format: 'json'
    },
    autoLoad: false
})


var loadMyAjax = function (pUrl){
    Ext.Ajax.request({            
        url: pUrl,
        success: function(response, opts) {
            numberStore.loadData(Ext.decode(response.responseText));  
            console.log('Numbers');
            console.log(response);
        }                
    });
}




Ext.onReady(function(){
    /**
    I need load Ajax dinamically with click button, because my call have others parameters like loadMyAjax('http://teste.php?id='+ pId);
    */
    loadMyAjax('numbers.json');


    Ext.tip.QuickTipManager.init();
    function createDockedItems(fieldId) {
        return [{
            xtype: 'toolbar',
            dock: 'top',
            items: {
                text: 'Options',
                menu: [{
                    text: 'Get value',
                    handler: function(){
                        var value = Ext.getCmp(fieldId).getValue();
                        Ext.Msg.alert('Value is a split array', value.join(', '));
                    } 
                }, {
                    text: 'Set value (2,3)',
                    handler: function(){
                        Ext.getCmp(fieldId).setValue(['2', '3']);
                    }
                },{
                    text: 'Toggle enabled',
                    checked: true,
                    checkHandler: function(item, checked){
                        Ext.getCmp(fieldId).setDisabled(!checked);
                    }
                },{
                    text: 'Toggle delimiter',
                    checked: true,
                    checkHandler: function(item, checked) {
                        var field = Ext.getCmp(fieldId);
                        if (checked) {
                            field.delimiter = ',';
                            Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
                                          'see that values are now submitted as a single parameter separated by the delimiter.');
                        } else {
                            field.delimiter = null;
                            Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
                                          'see that values are now submitted as separate parameters.');
                        }
                    }
                }]
            }
        }, {
            xtype: 'toolbar',
            dock: 'bottom',
            ui: 'footer',
            defaults: {
                minWidth: 75
            },
            items: ['->', {
                text: 'Clear',
                handler: function(){
                    var field = Ext.getCmp(fieldId);
                    if (!field.disabled) {
                        field.clearValue();
                    }
                }
            }, {
                text: 'Reset',
                handler: function() {
                    Ext.getCmp(fieldId).up('form').getForm().reset();
                }
            }, {
                text: 'Save',
                handler: function(){
                    var form = Ext.getCmp(fieldId).up('form').getForm();
                    form.getValues(true);
                    if (form.isValid()){
                        Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                            form.getValues(true));
                    }
                }
            }]
        }];
    }


    /*
     * Ext.ux.form.MultiSelect Example Code
     */
    var msForm = Ext.widget('form', {
        title: 'MultiSelect Test',
        width: 400,
        bodyPadding: 10,
        renderTo: 'multiselect',
        items:[{
            anchor: '100%',
            xtype: 'multiselect',
            msgTarget: 'side',
            fieldLabel: 'Multiselect',
            name: 'multiselect',
            id: 'multiselect-field',
            allowBlank: false,
            store: numberStore,
            valueField: 'number',
            displayField: 'numberName',
            value: ['3', '4', '6'],
            ddReorder: true
        }],
        dockedItems: createDockedItems('multiselect-field')
    });
    
    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: numberStore,
            displayField: 'numberName',
            valueField: 'number',
            value: ['3', '4', '6'],
            allowBlank: false,
            msgTarget: 'side',
            fromTitle: 'Available',
            toTitle: 'Selected'
        }],
        dockedItems: createDockedItems('itemselector-field')
    });


});

if you change this code:

var numberStore = Ext.create('Ext.data.Store',{
    model: 'numberModel',
    proxy: {
        type: 'ajax',
        //url: 'numbers.json',            
        format: 'json'
    },
    autoLoad: false
})

for this

var numberStore = Ext.create('Ext.data.Store',{
    model: 'numberModel',
    proxy: {
        type: 'ajax',
        url: 'numbers.json',            
        format: 'json'
    },
    autoLoad: true
})

it will working fine to me.
but I need load data dinamically, and I need something like this:

var loadMyAjax = function (pUrl){
    Ext.Ajax.request({            
        url: pUrl,
        success: function(response, opts) {
            numberStore.loadData(Ext.decode(response.responseText));  
            console.log('Numbers');
            console.log(response);
        }                
    });
}

/**
    I need load Ajax dinamically with click button, because my call have others parameters like loadMyAjax('http://teste.php?id='+ pId);
    */
    loadMyAjax('numbers.json');

I have another question about this component that is stranger for me, it have dual list. In left side available items, and in right side I have a list of Selected items.
Then I will load available items with a store like the code below.
Then at now it's ok for me.
But in right list I need to set it with values:

    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: numberStore,    /* Available Items */
            displayField: 'numberName',
            valueField: 'number',
            value: ['3', '4', '6'],      /* Selected Items */
            allowBlank: false,
            msgTarget: 'side',
            fromTitle: 'Available',
            toTitle: 'Selected'
        }],
        dockedItems: createDockedItems('itemselector-field')
    });

How I will load this selected items from server?
I have to load these value in a variable with ajax or exists a best solution for this?

I put a sample and video for better understand here:

Sample

Thanks in Advance,
Claudio

[mitchellsimoens]

Can I ask why you are using Ext.Ajax to load the json file instead of using a proxy/reader on the store?

[claudioprv]

Hi Mitchell,

Can I ask why you are using Ext.Ajax to load the json file instead of using a proxy/reader on the store?

Can I ask why you are using Ext.Ajax to load the json file instead of using a proxy/reader on the store?


Because I load my store after click on button, and the json file is just a sample for you understand.
In my original source I use the following:

var loadMyAjax = function (pUserId){
    Ext.Ajax.request({ 
		params: {Id:pUserId},	
        url: '../lib/users.php',
        success: function(response, opts) {
            numberStore.loadData(Ext.decode(response.responseText));  
        }                
    });
}
....
....
....
/* when click button then */
loadMyAjax(35);

I need set a parameter via variable, and I don't know how to make this, because I will filter data on database with my php script.

Thanks,
ClaudioPrv