Hybrid 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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    873
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Can I ask why you are using Ext.Ajax to load the json file instead of using a proxy/reader on the store?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default


    Hi Mitchell,

    Quote Originally Posted by mitchellsimoens View Post
    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:

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

Thread Participants: 1

Tags for this Thread