1. #1
    Sencha Premium Member
    Join Date
    May 2009
    Posts
    157
    Vote Rating
    9
    ZachG will become famous soon enough

      0  

    Default Hiding/Showing a form element (hide fieldLabel issue)

    Hiding/Showing a form element (hide fieldLabel issue)


    We have an application where we often need to hide form elements based on the selected configuration. An old solution we used was to modify the fieldLabel's class, but that got messy quickly and was hard to make compatible in all browsers. A solution I've come up with, that may help some other people, is to encapsulate the form element inside of a panel, like so:

    Code:
    new Ext.Panel({
         title:"Some Form Panel",
         layout:"form",
         items:[
              new Ext.Panel({
                   id:"some-form-element-container",
                   layout:"form",
                   border:false,
                   items:[
                        new Ext.form.TextField({
                             id:"some-form-element",
                             name:"some-form-element",
                             fieldLabel:"Some Form Element"
                        })
                   ]
              })
         ]
    })
    When we need to hide that textfield, all we do is do Ext.getCmp("some-form-element-container").hide(). The input, as well as the fieldLabel, are both hidden. (Note: you may want to disable some-form-element if you do basicForm.isValid() and other functions like that.)

    This is the easiest way I've found to address dynamically showing/hiding form elements.

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    ooouchh... overkill...

    if you really have to, you could simplify it by wrapping it in a plain old Container instead:
    Code:
    new Ext.form.FormPanel({
        title: "Some Form Panel",
        //layout: 'form',
        items: [{
            xtype: 'container',
            autoEl: {}, // required in Ext 2.x; not sure if this is required in Ext 3.x
            id: "some-form-element-container",
            layout: "form",
            items: [{
                xtype: 'textfield',
                id: "some-form-element",
                name: "some-form-element",
                fieldLabel: "Some Form Element"
            })]
        })]
    });
    or even better, simply get the Component to be hidden and hide its wrapper (iirc, @condor came up with a simple override for this).

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."