1. #1
    Sencha User
    Join Date
    Jun 2012
    Location
    Venezuela
    Posts
    10
    Vote Rating
    2
    vondervick is on a distinguished road

      0  

    Default Help: Generate checkboxfield from store

    Help: Generate checkboxfield from store


    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
    Code:
    [
        {
            "ID": "1",
            "Name": "Item 1"
        },
        {
               "ID": "2",
               "Name": "Item 2"
           }
    ]

    Overwrite class from my panel
    Code:
    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
        });
    });

  2. #2
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,310
    Vote Rating
    112
    ssamayoa is just really nice ssamayoa is just really nice ssamayoa is just really nice ssamayoa is just really nice ssamayoa is just really nice

      0  

    Default


    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.
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Location
    Venezuela
    Posts
    10
    Vote Rating
    2
    vondervick is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Location
    Venezuela
    Posts
    10
    Vote Rating
    2
    vondervick is on a distinguished road

      0  

    Default Update code

    Update code


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

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

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Location
    Venezuela
    Posts
    10
    Vote Rating
    2
    vondervick is on a distinguished road

      0  

    Default SOLVED: Generate checkboxfield from store:

    SOLVED: Generate checkboxfield from store:


    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:

    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);
        } 
    });

Thread Participants: 1

Tags for this Thread