Extjs 4.1 - Show and hide some special Items in a form

0
votes

I have a windows with a items include 2 items like

var win = Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 400,
        layout: 'fit',
        items: {  
            xtype: 'form',
            border: false,
            hidden: true,
            items: [{
                xtype: 'textfield',
                fieldLabel: '1'
            },{
                xtype: 'textfield',
                fieldLabel: '2'
            }]
        }
    }).show();

I make a button and i want show/hide first item (fieldLabel : '1') in my window like

 Ext.create('Ext.Button', {
        text: 'Show first item',
        visible: false,
        renderTo: Ext.getBody(),
        handler: function() {
            win.down('form').items.items[0].show(); // not working
        }
    });

But that's not working. How to fix that thanks

ps: I don't want to use id to get comp, b/c my form is dynamic thanks
here is my full code http://jsfiddle.net/aMKjN/

2
extjsextjs4.1
But the form is hidden, so showing one of the children doesn't matter. - Evan Trimboli
@EvanTrimboli if i comment //hidden: true, and the first i hide first item like win.down('form').items.items[0].hide(); and i want to show all by win.down('form').show(); and that's not working? - DeLe
That's correct. If you show a parent, it doesn't mean the children are automatically shown, they retain their state. - Evan Trimboli
@EvanTrimboli But how can i do that, my form has so many item and when i hide some items I can't show all item again (reset show)? - DeLe

2 Answers

0
votes

Try this. It will show only the first textfield.

Ext.create('Ext.Button', {

    text: 'Show first item',

    visible: false,

    renderTo: Ext.getBody(),

    handler: function() {

        win.items.items[0].show();
        win.items.items[0].items.items[1].hide();
    }
});
0
votes

try this it will show only textfield 1 

  Ext.onReady(function () {

   var win = Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 400,
        layout: 'fit',
        items: {  
            xtype: 'form',
            border: false,
//            hidden: true,
            items: [{

                xtype: 'textfield',
                id:'first',
                 hidden: true,
                fieldLabel: '1'
            },{
                xtype: 'textfield',
                fieldLabel: '2'
            }]
        }
    }).show();

    Ext.create('Ext.Button', {
        text: 'Show first item',
        visible: false,
        renderTo: Ext.getBody(),
        handler: function() {            
          Ext.getCmp('first').setVisible(true)
        }
    });
});