1. #1
    Ext User
    Join Date
    May 2008
    Posts
    62
    Vote Rating
    0
    nightowl is on a distinguished road

      0  

    Default Load data in checkboxgroup

    Load data in checkboxgroup


    Is it somehow possible to dynamically load data in a checkboxgroup? I was looking for an option like "store", like we hve for dropdowns. But does something like that exist for checkboxgroups? or is there a workaround?

  2. #2
    Sencha User TopKatz's Avatar
    Join Date
    Mar 2007
    Posts
    337
    Vote Rating
    2
    TopKatz is on a distinguished road

      0  

    Default


    Just use a FormPanel, then give it baseParms, and call a load on it.

  3. #3
    Ext User
    Join Date
    May 2008
    Posts
    62
    Vote Rating
    0
    nightowl is on a distinguished road

      0  

    Default


    sorry, it's most probably me, but looking through the API for "formPanel", I see no option to set baseParms ?

    could you plz specify?

  4. #4
    Sencha User TopKatz's Avatar
    Join Date
    Mar 2007
    Posts
    337
    Vote Rating
    2
    TopKatz is on a distinguished road

      0  

    Default


    It's under basicForm,
    http://extjs.com/deploy/dev/docs/?cl...form.BasicForm


    Code:
    new Ext.FormPanel({
    		id:'myForm',
    		url:'ajax.php',
                    defaultType: 'checkbox',
    		baseParams:{						
    			routine:'getInfo'
    		},
    		items:[{
                            fieldLabel: 'Checks',
                            boxLabel: 'Check 1',
                            name: 'chk-1'
                            },{
                            fieldLabel: '',
                            labelSeparator: '',
                            boxLabel: 'Check 2',
                            name: 'chk-2'
                       }] 
    });
    this will send a request over to "ajax.php" with a post that looks like this:

    routine=getInfo

    Get info should be sending back:

    name:chk-1, checked=true

  5. #5
    Ext User
    Join Date
    May 2008
    Posts
    62
    Vote Rating
    0
    nightowl is on a distinguished road

      0  

    Default


    Thanks, but it seems that I have not been clear in my question of what I'm trying to achieve.

    I have a database table of "meals", which hold a long list of possibilities. I have another table users, and then a table that maps the meals to a certain user ("preferences").

    What I would like to do is populate a "checkboxgroup" with one checkbox (+caption) for every record from the "meals" table.So that when I add a meal, it's automatically included in the checkboxgroup. (bacground info but unrelated to the question: it's then automatically included in lots of other pages of the site too, which is why it's setup like this)

    Is that possible?

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Nothing default, but you could load the data in a store and manually construct an array of items for the checkbox group.

  7. #7
    Ext User
    Join Date
    Sep 2008
    Posts
    4
    Vote Rating
    0
    fjalcaraz is on a distinguished road

      0  

    Default


    It is imposible to a form to set a value to an input into a checkboxgroup or radiogroup, using a record + a reader + calling load() method.

    I have seen this is because checkboxgroups (and radiogroups as it is a subclass), for a FormPanel, are considered as a single field, so when it tries to collect all the fields to manage, it doesn't go inside to collect the checkboxes or radios they keep.

    Other problem is the checkboxgroup initilize the objects inside at rendering not at own initialization (in fact there is no own initilization, it inheritate the form.Field initComponent)

    I have developed a workaround on it:

    Firstable - initilize the objects into the group moving much of the code of rendering to the initComponent method, and leave onRender just with the code needed to do the rendering


    Code:
    Ext.form.CheckboxGroup.prototype.initComponent = function(){
        Ext.form.CheckboxGroup.superclass.initComponent.call(this);
        var panelCfg = {
            cls: this.groupCls,
            layout: 'column',
            border: false,
        };
        var colCfg = {
            defaultType: this.defaultType,
            layout: 'form',
            border: false,
            defaults: {
                hideLabel: true,
                anchor: '100%'
            }
        }
    
        if(this.items[0].items){
            Ext.apply(panelCfg, {
                layoutConfig: {columns: this.items.length},
                defaults: this.defaults,
                items: this.items
            })
            for(var i=0, len=this.items.length; i<len; i++){
                Ext.applyIf(this.items[i], colCfg);
            };
        }else{
            var numCols, cols = [];
    
            if(typeof this.columns == 'string'){
                this.columns = this.items.length;
            }
            if(!Ext.isArray(this.columns)){
                var cs = [];
                for(var i=0; i<this.columns; i++){
                    cs.push((100/this.columns)*.01);
                };
                this.columns = cs;
            }
    
            numCols = this.columns.length;
    
            for(var i=0; i<numCols; i++){
                var cc = Ext.apply({items:[]}, colCfg);
                cc[this.columns[i] <= 1 ? 'columnWidth' : 'width'] = this.columns[i];
                if(this.defaults){
                    cc.defaults = Ext.apply(cc.defaults || {}, this.defaults)
                }
                cols.push(cc);
            };
    
            if(this.vertical){
            var rows = Math.ceil(this.items.length / numCols), ri = 0;
                for(var i=0, len=this.items.length; i<len; i++){
                    if(i>0 && i%rows==0){
                        ri++;
                    }
                    if(this.items[i].fieldLabel){
                        this.items[i].hideLabel = false;
                    }
                    cols[ri].items.push(this.items[i]);
                };
            }else{
                for(var i=0, len=this.items.length; i<len; i++){
                    var ci = i % numCols;
                    if(this.items[i].fieldLabel){
                        this.items[i].hideLabel = false;
                    }
                    cols[ci].items.push(this.items[i]);
                };
            }
    
            Ext.apply(panelCfg, {
                layoutConfig: {columns: numCols},
                items: cols
            });
        }
    
        this.panel = new Ext.Panel(panelCfg);
    
        if(this.forId && this.itemCls){
            var l = this.el.up(this.itemCls).child('label', true);
            if(l){
                l.setAttribute('htmlFor', this.forId);
            }
        }
    
        var fields = this.panel.findBy(function(c){
            return c.isFormField;
        }, this);
    
        this.items = new Ext.util.MixedCollection();
        this.items.addAll(fields);
    };
    
    Ext.form.CheckboxGroup.prototype.onRender = function(ct, position){
        if(!this.el){
            this.panel.render(ct, position);
            this.el = this.panel.getEl();
        }
        Ext.form.CheckboxGroup.superclass.onRender.call(this, ct, position);
    };
    With this modification the form is going to find the objects into the group initialized so it is going to be able to collect and manage them properly.

    Next to do is to make the form collects this objects redefining the formPanel.initFields method, ussing the fact that the checkboxgroups or radiogroup are the unique field classes that have an attribute called items:

    Code:
    Ext.FormPanel.prototype.initFields = function(){
        var f = this.form;
        var formPanel = this;
        var fn = function(c){
            if(c.isFormField){
                if (!c.items){
                    f.add(c);
                }else{
                    c.items.each(fn);
                }
            }else if(c.doLayout && c != formPanel){
                Ext.applyIf(c, {
                    labelAlign: c.ownerCt.labelAlign,
                    labelWidth: c.ownerCt.labelWidth,
                    itemCls: c.ownerCt.itemCls
                });
                if(c.items){
                    c.items.each(fn);
                }
            }
        }
        this.items.each(fn);
    };
    That's all. I hope it will help you

  8. #8
    Ext User
    Join Date
    May 2008
    Posts
    62
    Vote Rating
    0
    nightowl is on a distinguished road

      0  

    Default


    wow - that is some great feedback.
    Problem is that I have no clue how to use it

    I assume I copy the 2 code snippets to my Ext.onReady()

    But what do I do next ? How to put it to work?

  9. #9
    Ext User
    Join Date
    Sep 2008
    Posts
    4
    Vote Rating
    0
    fjalcaraz is on a distinguished road

      0  

    Default


    It 's easy, just put all the code in a .js and load it after ext-all.js

  10. #10
    crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    215
    Vote Rating
    8
    crysfel will become famous soon enough

      0  

    Default


    Hi and thanks for the code

    but, how the JSON should be return by the server??

    Code:
    {
      "success":true,
      "data":[
         {"value":3,"id":"idApp"},
         {"value":"Submenu 1","id":"description"},
         {"value":"\/x","id":"url"},
         {"value":"check","id":"idCheckbox"}
      ]
    }
    the code above does not work, any sugestions?

    thanks in advance!