Threaded View

  1. #1
    Sencha User
    Join Date
    Apr 2010
    Location
    Brazil
    Posts
    14
    Vote Rating
    0
    claudioprv is on a distinguished road

      0  

    Default Unanswered: Load Store Dinamically in component ItemSelector, please help me.

    Unanswered: Load Store Dinamically in component ItemSelector, please help me.


    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.

    Code:
    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:
    Code:
    var numberStore = Ext.create('Ext.data.Store',{
        model: 'numberModel',
        proxy: {
            type: 'ajax',
            //url: 'numbers.json',            
            format: 'json'
        },
        autoLoad: false
    })
    for this

    Code:
    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:

    Code:
    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:
    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: 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
    Last edited by claudioprv; 14 Jan 2013 at 6:17 PM. Reason: I forgot the link of sample

Thread Participants: 1

Tags for this Thread