Help: Generate checkboxfield from store

[vondervick]

Hi, the code is working, i must say i don't know if is the best approach but for me kinda does the job,

the situation: inside ' store.load(function(){})' i have the checkboes variable working i mean contains the array records ,ok fine and it does create the xtype for checkboxfield, but in the Ext.ApplyIf, is returning blank array > []

So, how can i pass this to create the checkboxfields from store inside my panel. here is the code. thx

Store json

[
    {
        "ID": "1",
        "Name": "Item 1"
    },
    {
           "ID": "2",
           "Name": "Item 2"
       }
]

Overwrite class from my panel

Ext.define('RC.view.override.panelCheck', {
    requires: 'RC.view.panelCheck'
}, function() {
    Ext.override(RC.view.panelCheck, {
        // ini overwrite
        
        height: 250,
        width: 400,
        title: 'Check Panel from Store',
        style: 'margin: 10px',
        
        initComponent: function() {
            var me = this;         
            var store =  Ext.data.StoreManager.lookup('Tester');           
            var checkboxes = [];
            
            
            store.load(function() {
                
   
                store.each(function(records){
                    
                    var checkbox = {
                        xtype: 'checkboxfield', 
                        name: 'storedatacheck[]', 
                        fieldLabel: 'Label',
                        boxLabel: records.get('Name'),
                        inputValue: records.get('ID')
                    };
                    
                    checkbox.checked = true;
                    checkboxes.push(checkbox);
                    
                });
                
                console.log(checkboxes); // <-- this is working! return [object, object, ... object(n)] 
                
                
                
            });   
             
            Ext.applyIf(me, {
                items: [{
                    title: 'Store checks',
                    xtype: 'fieldset',
                    style: 'margin: 10px',
                    flex: 1,
                    items: checkboxes        // <-- this isn't ! 
                    }]
            });
    
            me.callParent(arguments);
        }
        
        // end overwrite
    });
});

[ssamayoa]

Store loads data asynchronously so Ext.applyIf(...) gets executed before store.load's function so you end with an empty array.

Retrieve your "combo box" array using Ext.Ajax.request() instead and force it synchronous (http://docs.sencha.com/ext-js/4-1/#!...fg-synchronous). i think you can force store operations to be synchronized via proxy config but not quite sure about that.

Regards.

[vondervick]

hey ssamayoa hi, appreciate your help but no luck, is there any way to generate the radio or checkbox from store easily? or with the same code? i mean putting the rest on it so others can benefit from it? thx.

[vondervick]

Ext.define('RC.view.override.panelCheck', {
    requires: 'RC.view.panelCheck'
}, function() {
    Ext.override(RC.view.panelCheck, {
        // ini overwrite
        
        height: 250,
        width: 400,
        title: 'My Panel',
        
        initComponent: function() {
            var me = this;
            
            var checkboxes = [];
            var store =  Ext.data.StoreManager.lookup('Tester').load(function() {
                        
           
                store.each(function(records){
                    
                    var checkbox = {
                        xtype      : 'checkbox',
                        fieldLabel : "",
                        boxLabel   : records.get('Name'), 
                        inputValue : records.get('ID') 
                    };
                    
                    checkbox.checked = false;
                    checkboxes.push(checkbox);
                    
                }); // end store.each
            }); // end store.load
            
            // create checkboxgroup
            var checkItems = {
              xtype      : 'checkboxgroup',
              items      : [
                  {
                    xtype      : 'checkbox',
                    fieldLabel : "",
                    boxLabel   : 'A',
                    inputValue : 'a'
                  },
                  {
                    xtype          : 'checkbox',
                    fieldLabel     : "",
                    labelSeparator : ' ',
                    boxLabel       : 'B',
                    inputValue     : 'b'
                  },
                  checkboxes //<-- exist but it's not show 
              ]
            };
            
            Ext.applyIf(me, {
                items: [
                    {
                        title: 'Combos',
                        xtype: 'fieldset',
                        style: 'margin: 10px; padding: 10',
                        flex: 1,
                        items: checkItems
                    }
                ]
            });
            
            me.callParent(checkItems);
            
            
            // Debug
            //console.log(checkItems);
        }
        
        // end overwrite
    });
});

problem: almost everything works like charm, but even when the object exist doesn't render any thoughts!!

update: here is the output:

Object
items: Array[3]
0: Object
1: Object      <------ this obj belongs to parent array
boxLabel: "B"
fieldLabel: ""
inputValue: "b"
labelSeparator: " "
xtype: "checkbox"
__proto__: Object

2: Array[7]        <------ this should be third obj but is like the first
0: Object
boxLabel: undefined
checked: false
fieldLabel: ""
inputValue: undefined
xtype: "checkbox"
__proto__: Object

1: Object
2: Object
3: Object
4: Object
5: Object
6: Object
length: 7
__proto__: Array[0]

length: 3
__proto__: Array[0]

xtype: "checkboxgroup"
__proto__: Object

[vondervick]

ok first i solved the problem using SA 2.1 and library extjs 4.1,
the code change a bit since my necessities change as well, in the previous post above y use checkbox and now toggle buttons, in the end is the same approach so here is my code:

Ext.define('RC.view.override.formToggleButtons', {
    override: 'RC.view.formToggleButtons',
    
    initComponent: function(){
        
        var me = this;
        var buttons = [];
        var store =  Ext.data.StoreManager.lookup('dynamicBtns');


        store.load(function(){
            store.each(function(records){
                                
                var button = {
                    xtype : 'button',
                    text : records.get('button_text'), // field from store
                    id : records.get('id_text'),   // field from store
                    toggleGroup : 'dynamicbtn',
                    margin: '0 5 3 5'
                };
                
                buttons.push(button);
                
            }); // end store.each


            var content = {
                title: 'Dynamic buttons',
                xtype: 'fieldset',
                items: buttons, // <---- object
                listeners: {
                afterrender: function(){
                    Ext.getCmp('button_id').toggle(); // if you want set a button by default
                    }
                }
            };
            
            me.insert(content); // this is necessary  to show your buttons in your panel
            me.doLayout();
        
        });
        
        me.callParent(arguments);
    } 
});