1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    38
    Vote Rating
    0
    Max_nl is on a distinguished road

      0  

    Default Fieldset with radio toggle component?

    Fieldset with radio toggle component?


    The standard Fieldset component has a checkboxToggle option.
    I was wondering if there is a user component or other easy method to get a radio button instead.

    I have a form with several fieldsets, of which the user only needs to fill in the one that he choices.
    Upon selection the others should be collapsed/disabled.

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,663
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    Hi Max_nl,

    i don't think this is implemented in ext yet.

    i simulated the behavior of radios with checkboxes. example: one fieldset to add a new customer, another one to edit an existing one. the second fieldset gets:

    Code:
                                        ,listeners:{
                                            collapse: function(e){
                                                bT.disableFieldsetElements(fieldsets.selectCustomerFieldset);
                                                bT.enableFieldsetElements(fieldsets.addCustomerFieldset);
                                                fieldsets.addCustomerFieldset.expand(false);
                                            },
                                            expand: function(e){
                                                bT.disableFieldsetElements(fieldsets.addCustomerFieldset);
                                                bT.enableFieldsetElements(fieldsets.selectCustomerFieldset);
                                                fieldsets.addCustomerFieldset.collapse(false);
                                            }
                                        }
    the important thing is, that a collapsed fieldset gets submitted by default! so, if there are allowBlank = false - fields inside, they will get marked invalid. to prevent this:

    Code:
    bT.disableFieldsetElements = function (fieldset) {
        for(var i=0; i < fieldset.items.getCount(); i++) {
            fieldset.items.get(i).disable();
        }
    };
    
    
    bT.enableFieldsetElements = function (fieldset) {
        for(var i=0; i < fieldset.items.getCount(); i++) {
            fieldset.items.get(i).enable();
        }
    };
    (fieldset.items.each() would also do).

    kind regards,
    tobiu
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    38
    Vote Rating
    0
    Max_nl is on a distinguished road

      0  

    Default


    Thanks for the reply.
    I would really like a radio instead of a checkbox though.


    I'm not sure if this is the right approach to glue two components together, but today I experimented a bit with grouping a radio and fieldset with a panel.
    This is the code of the component I have so far:

    PHP Code:
    Ext.ns('Max');
    Max.RadioFieldset Ext.extend(Ext.Panel, {
        
        
    /**
         * @cfg {Boolean} checked
         * True if the radiobutton is checked by default
         */
        
    checkedfalse,
        
        
    /**
         * @cfg {String} name
         * Name of the radio button group
         */
        
    name'',
        
        
    /**
         * @cfg {String} value
         * Value of the radio button
         */
        
    value'',
        
        
    /**
         * @cfg {String} boxLabel
         * Label of the radio button
         */
        
    boxLabel'',
        
        
    /**
         * @cfg {Boolean} fieldsetBorder
         * Whether the fieldset should have a border
         */
        
    borderfalse,
        
        
    /**
         * @cfg {Boolean} collapsibleFieldset
         * Whether to collapse/expand the fielset upon checking the radio button
         * If false the fields will only be disabled (greyed out)
         */
        
    collapsibleFieldsetfalse,
        
        
    /**
         * @cfg {String} defaultType
         * Default type of items
         */
        
    defaultType'textfield',
        
        
    /**
         * @cfg {String} defaults
         * Defaults for items
         */
        
    defaults: {anchor'-20'},
        
        
    initComponent: function()
        {
            
    this.radio = new Ext.form.Radio({
                
    namethis.name,
                
    valuethis.value,
                
    checkedthis.checked,
                
    boxLabelthis.boxLabel,
                
    hideLabeltrue,
                
    listeners:
                {
                    
    check: function(box,checked)
                    {
                        if (
    checked)
                        {
                            
    this.fieldset.items.each(function(item,idx,total)
                            {
                                
    item.enable();
                            });
                            
                            if (
    this.collapsibleFieldset)
                            {
                                
    this.fieldset.expand(false);
                            }
                        }
                        else
                        {
                            
    this.fieldset.items.each(function(item,idx,total)
                            {
                                
    item.disable();
                            });
                            
                            if (
    this.collapsibleFieldset)
                            {
                                
    this.fieldset.collapse(false);
                            }
                        }                    
                    }, 
    scopethis
                
    }
            });
            
    this.fieldset = new Ext.form.FieldSet({
                
    xtype'fieldset',
                
    borderthis.border,
                
    collapsedthis.collapsibleFieldset && !this.checked,
                
    hideLabeltrue,
                
    itemsthis.items,
                
    defaultsthis.defaults,
                
    defaultTypethis.defaultType
            
    });
            
            var 
    cfg = {
                
    items:
                [
                    
    this.radio,
                    
    this.fieldset
                
    ],
                
    borderfalse
            
    };
            
            
    Ext.apply(thisExt.apply(this.initialConfigcfg));
            
    Max.RadioFieldset.superclass.initComponent.call(this);
            
            if (!
    this.checked)
            {
                
    this.fieldset.items.each(function(item,idx,total)
                {
                    
    item.disable();
                });            
            }
        }
    });
    Ext.reg('radiofieldset'Max.RadioFieldset); 
    It seems to work, but I'm not entirely happy with the layout:



    What would be the best way to reduce the space between the 3 fieldsets, and move them a bit to the right?
    Create a custom css for the fieldset? For the panel? Some layout manager/margins setting?

  4. #4
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,663
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    the code looks clean, but i would extend / override Ext.form.fieldset:

    Code:
        onRender : function(ct, position){
            if(!this.el){
                this.el = document.createElement('fieldset');
                this.el.id = this.id;
                if (this.title || this.header || this.checkboxToggle) {
                    this.el.appendChild(document.createElement('legend')).className = 'x-fieldset-header';
                }
            }
    
            Ext.form.FieldSet.superclass.onRender.call(this, ct, position);
    
            if(this.checkboxToggle){
                var o = typeof this.checkboxToggle == 'object' ?
                        this.checkboxToggle :
                        {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};
                this.checkbox = this.header.insertFirst(o);
                this.checkbox.dom.checked = !this.collapsed;
                this.mon(this.checkbox, 'click', this.onCheckClick, this);
            }
        }
    you could override the onRender method and replace the checkbox with a radio (or making both optional and then apply your wanted behaviour.

    the positioning is a style issue: you could give the panel a padding left for example, or each fieldset a marginLeft and marginBottom (or top).

    fieldsets have a config "bodyStyle", where you could set that.

    kind regards,
    tobiu
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    38
    Vote Rating
    0
    Max_nl is on a distinguished road

      0  

    Default


    Thanks for the reply.

    Quote Originally Posted by tobiu View Post
    the code looks clean, but i would extend / override Ext.form.fieldset:
    I'm a bit hesitant to override onRender, as I'm afraid that might break things if I upgrade to another Ext.js release later, that has different original code in onRender.


    the positioning is a style issue: you could give the panel a padding left for example, or each fieldset a marginLeft and marginBottom (or top).

    fieldsets have a config "bodyStyle", where you could set that.
    Managed to get rid of the extra space at the bottom, by adding "style: 'margin-bottom:0px;' " to the fieldset.

  6. #6
    Sencha User
    Join Date
    Aug 2009
    Location
    France
    Posts
    44
    Vote Rating
    0
    shinkenno is on a distinguished road

      0  

    Default


    Hi,

    I am very interested by this 'radiofieldset'.
    Can you please provide an example of usage for this class ?

    Best regards,
    Arnaud

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar