1. #1
    Ext User
    Join Date
    Feb 2009
    Posts
    46
    Vote Rating
    0
    whdanj is on a distinguished road

      0  

    Default Hide and show a combobox dynamically?

    Hide and show a combobox dynamically?


    Hi all, I have two combobox "Scope" and "Country", at the begining, the "Country" combo is hidden, with the selection of "Scope" combo, the "Country" can be shown or hidden.

    But when i select the "Scope", only select component of "Country" is shown, the Label of "Country" does not shown? Can anyone helps, thanks a lot!

    Code:
    items : [{
                                              xtype : "combo",
                                              fieldLabel : " - Scope",
                                              store : ['Local', 'Regional', 'National'],
                                              name : "scope",
                                              emptyText : "Local",
                                              listeners:{select:{fn:function(combo, value) {
                                                    var countryCmp = Ext.getCmp('country-cvg');
                                                    if (this.value == "Local" ){
                                                       showField(countryCmp);
                                                    }
                                                    if (this.value == "National"){
                                                       hideField(countryCmp);
                                                    }
                                                 }}}  
                                              },{
                                              xtype : "combo",
                                              fieldLabel : " - Country",                             
                                              mode : "local",
                                              store : countryStore,
                                              displayField : "country",
                                              name : "country-cvg",
                                              id: "country-cvg",
                                              hidden: true,
                                              hideLabel: true
                                              }]
    
      
        function hideField (field) {
            field.disable();// for validation
            field.hide();
            //field.getEl().up('.x-form-item').setDisplayed(false); // hide label
            field.container.up('div.x-form-item').setDisplayed(false);
        };
    
        function showField(field){
            field.enable();
            field.show();
            //field.getEl().up('.x-form-item').setDisplayed(true);// show label
            field.container.up('div.x-form-item').setDisplayed(true);
        };

  2. #2
    Ext User
    Join Date
    Feb 2009
    Posts
    46
    Vote Rating
    0
    whdanj is on a distinguished road

      0  

    Default


    I found the reason is because I config the Country combo: hideLabel: true,

    then the label of Country combo can't be shown anymore.

    So I plan to display this Country combo at beginning, after the whole form is rendered, I call hideField(country_cvg) to hide this combo.

    Can anyone tell me how to call a function after the form is loaded, thanks a lot!

  3. #3
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


    somebody already wrote an override for this. I think this is it. You may want to search the forums

    Code:
    Ext.override(Ext.layout.FormLayout, {
        renderItem : function(c, position, target){
            if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){
                var args = [
                       c.id, c.fieldLabel,
                       c.labelStyle||this.labelStyle||'',
                       this.elementStyle||'',
                       typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
                       (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
                       c.clearCls || 'x-form-clear-left' 
                ];
                if(typeof position == 'number'){
                    position = target.dom.childNodes[position] || null;
                }
                if(position){
                    c.formItem = this.fieldTpl.insertBefore(position, args, true);
                }else{
                    c.formItem = this.fieldTpl.append(target, args, true);
                }
                c.actionMode = 'formItem';
                c.render('x-form-el-'+c.id);
                c.container = c.formItem;
                c.actionMode = 'container';
            }else {
                Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
            }
        }
    });
    
    Ext.override(Ext.form.TriggerField, {
    	actionMode: 'wrap',
    	onShow: Ext.form.TriggerField.superclass.onShow,
    	onHide: Ext.form.TriggerField.superclass.onHide
    });
    You will need to hide / disable and show / enable. I set some properties on field I want hidden as follows:

    hidden: true,
    disabled: true,

    The use something like this to hide/show:

    Code:
    function FullShowHide(str,act){
    	if(act=='show'){
    		Ext.getCmp(str).show();
    		Ext.getCmp(str).enable();
    	}else{ //hide
    		Ext.getCmp(str).hide();
    		Ext.getCmp(str).disable();
    	}
    }
    Thanks, Marty

Thread Participants: 1