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
    36,795
    Answers
    3466
    Vote Rating
    834
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi