Hide and show a combobox dynamically?

[whdanj]

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!

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

[whdanj]

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!

[moegal]

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

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:

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