Threaded View

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    20
    Vote Rating
    0
    floraoma2000-extjs is on a distinguished road

      0  

    Default Answered: Dynamically load items for radiogroup

    Answered: Dynamically load items for radiogroup


    Hi all,
    I need help for my problem (ExtJs 4) . I want to load some items (data from my database) for my radiogroup dynamically.

    First of all I tried to solve the problem - step by step - by loading the items into an array like this.
    HTML Code:
    var radiogroup = [
       { boxLabel: 'Item 11', name: 'rb', inputValue: '1' },
       { boxLabel: 'Item 21', name: 'rb', inputValue: '2' },
       { boxLabel: 'Item 31', name: 'rb', inputValue: '3' }
    ];
    
    Ext.create('Ext.form.Panel', {
        title: 'RadioGroup Example',
        renderTo: Ext.getBody(),
        items:[{
            xtype: 'radiogroup',
            fieldLabel: 'RadioGroup',
            items: radiogroup
        }]
    });    

    This code works fine !

    The next step like this works fine too.
    I load the items via a store.

    HTML Code:
    Ext.onReady(function () {
    var store_fest = Ext.create('Ext.data.Store', {
        fields: ["boxLabel", "name", "inputValue"],   
        data:{'groupitems':[
            { boxLabel: 'Item 1x', name: 'rb', inputValue: '1' },
            { boxLabel: 'Item 2x', name: 'rb', inputValue: '2' },
            { boxLabel: 'Item 3x', name: 'rb', inputValue: '3' }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'groupitems'
            }
        }    
    });
    
    var radioArray = [];
    for (var i = 0; i < store_fest.data.length; i++) {  
        radioArray.push(store_fest.data.items[i].data); 
    }
    
    Ext.create('Ext.form.Panel', {
        title: 'RadioGroup Example',
        renderTo: Ext.getBody(),
        items:[{
            xtype: 'radiogroup',
            fieldLabel: 'RadioGroup',
            items: radioArray
        }]
    });    
    });

    The response data-format of a database select is JSON. So now I want to load the items reading a json store .This doesn't work. Here my code

    HTML Code:
    Ext.onReady(function () {
    var store_json = Ext.create('Ext.data.JsonStore', {
        storeId: 'radio',
        fields: ['boxLabel', 'name', 'inputValue'],  
        proxy: {
            type: 'ajax',
            url: 'items.json',   
            reader: {type: 'json', root: 'groupitems',totalProperty: 'total'},
            baseParams: { 
                operation:'showall' 
            },
        },
    });
    
    var itemsInGroup = store_json.load({
        callback: function(records, operation, success) {
            itemsInGroup = [];
                console.log(store_json.data.length);
                for (var i = 0; i < store_json.data.length; i++) {  
                    itemsInGroup.push(store_json.data.items[i].data); 
                }
                console.log(itemsInGroup);
        }
    });
    var itemsInGroup = [];
    
    Ext.create('Ext.form.Panel', {    
        title: 'RadioGroup Example',
        renderTo: Ext.getBody(),
        items:[{
            xtype: 'radiogroup',
            fieldLabel: 'Radio',
            items: itemsInGroup 
        }]
    });    
    });
    This log to the console (console.log(itemsInGroup) shows the right array.
    Here is my items.json
    HTML Code:
    {
        "groupitems": [ 
       { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
       { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
       { boxLabel: 'Item 3', name: 'rb', inputValue: '3' }
        ]
    }
    There are no data shown in my Panel.

    Please help me. Thanks a lot in advance.

  2. Code:
    Ext.onReady(function () {
    
    
      var store_json = Ext.create('Ext.data.JsonStore', { 
        storeId: 'radio', 
        fields: ['boxLabel', 'name', 'inputValue'], 
        proxy: { 
          type: 'ajax', 
          url: 'items.json', 
          reader: {
            type: 'json', 
            root: 'groupitems',
            totalProperty: 'total'
          }, 
          baseParams: { 
            operation:'showall' 
          }, 
        },
      });
    
    
      var itemsInGroup = store_json.load({ 
        callback: function(records, operation, success) 
        {        
            itemsInGroup = []; 
            console.log(store_json.data.length); 
    
    
            for (var i = 0; i < store_json.data.length; i++) { 
              itemsInGroup.push(store_json.data.items[i].data); 
            } 
    
    
            console.log(itemsInGroup); 
        }
      });
      var itemsInGroup = [];
    
    
      Ext.create('Ext.form.Panel', { 
        title: 'RadioGroup Example', 
        renderTo: Ext.getBody(), 
        items:[{ 
          xtype: 'radiogroup', 
          fieldLabel: 'Radio', 
          items: itemsInGroup 
        }]
      }); 
    });
    Why do you set the var empty again? xD

    Try this:

    Code:
    Ext.onReady(function () {
    
    
      var store_json = Ext.create('Ext.data.JsonStore', { 
        storeId: 'radio', 
        fields: ['boxLabel', 'name', 'inputValue'], 
        proxy: { 
          type: 'ajax', 
          url: 'items.json', 
          reader: {
            type: 'json', 
            root: 'groupitems',
            totalProperty: 'total'
          }, 
          baseParams: { 
            operation:'showall' 
          }, 
        },
      });
    
    
      store_json.load({ 
        callback: function(records, operation, success) 
        {        
            itemsInGroup = []; 
    
    
            console.log(records); 
    
    
            for (var i = 0; i < records.length; i++) { 
              itemsInGroup.push(records[i].data); 
            } 
            
            console.log(itemsInGroup);
    
    
            Ext.create('Ext.form.Panel', { 
              title: 'RadioGroup Example', 
              renderTo: Ext.getBody(), 
              items:[{ 
                xtype: 'radiogroup', 
                fieldLabel: 'Radio', 
                items: itemsInGroup 
              }]
            }); 
        }
      });
    });
    I'm not sure if it was records[i].data or maybe records[i].data.data or smth just try xD

Thread Participants: 1