Hybrid 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

  3. #2
    Sencha User Arg0n's Avatar
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    122
    Answers
    12
    Vote Rating
    16
    Arg0n will become famous soon enough Arg0n will become famous soon enough

      0  

    Default


    I would say it's because ExtJs runs asynchron. That means the store takes too long, to load the data. So the radiogroup is already rendered, but the store isn't finished yet and kabooom. You see nothing ^^

    What you need to do is waiting for the store and than build your radiogroup. You could do this with listening on an event of the store. See: load

    If succes => build your radiogroup ELSE throw an exception or whatever ^^

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

      0  

    Default Change the problem to a render Problem

    Change the problem to a render Problem


    Within my firebug I made a stop and I saw that the panel is shown right. But the panel disappers unfortunalty again.
    Only the empty panel with the title is shown.
    Can sb help me?

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

      0  

    Default


    Hi thanks for your answer.
    I've read the documentation of 'load'. But I couldn't get a solution for my problem.

    If I set a breakpoint to the row

    title: 'RadioGroup Example',

    then the right radiogroup within the panel is shown on the screen shortly. Then the panel disappears again.
    What should I do?

    Thanks in advance

  6. #5
    Sencha User Arg0n's Avatar
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    122
    Answers
    12
    Vote Rating
    16
    Arg0n will become famous soon enough Arg0n will become famous soon enough

      1  

    Default


    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

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

      0  

    Default


    Thank you very much
    The problem is solved. You have got the solution. I think I still have to learn a lot.

    Thanks for helping

  8. #7
    Sencha User Arg0n's Avatar
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    122
    Answers
    12
    Vote Rating
    16
    Arg0n will become famous soon enough Arg0n will become famous soon enough

      0  

    Default


    Mark the post as "best answer" please ^^

Thread Participants: 1