Помогите пожалуйста девушке разобраться

[Feni4ka]

Извиняюсь, если вопрос покажется не сложный, просто я только начала разбираться с ExtJS и столкнулась с такой задачей:
Есть центральная панель:
var center_panel = new Ext.Panel({
region:'center',
id:'center-panel',
margins: '35 0 5 0',
cmargins: '35 5 5 5',
layout: 'border',
split: true,
border: false,
items:[
item1,
item2
]
});
У этой панели два итемса item1 и item2. Они отображаются по умолчанию.
И существует меню, в которой есть кнопка:
xtype: 'tbbutton',
text: 'button1',
handler:
function(){
....
}

Мне нужно, чтобы по нажатию этой кнопки в center_panel загружался другой итемс, например item3:
var item3= new Ext.grid.GridPanel({.....});

Заранее спасибо.
P.S. Я не блондинка!

[VKS]

center_panel.add(item3);
center_panel.doLayout();

[Feni4ka]

спасибо! а чтобы при этом один итемс удалить?

[Feni4ka]

почему то по нажатию на кнопку не происходит добавления(

xtype: 'tbbutton',
handler:
function(){ center_panel.add(items3);
center_panel.doLayout();
}

[VKS]

почему то по нажатию на кнопку не происходит добавления(

xtype: 'tbbutton',
handler:
function(){ center_panel.add(items3);
center_panel.doLayout();
}

Ext.onReady(function() {
    // sample static data for the store
    var myData = [
        ['3m Co',                               71.72, 0.02],
        ['Alcoa Inc',                           29.01, 0.42],
        ['Altria Group Inc',                    83.81, 0.28],
    ];

    // create the data store
    var store = new Ext.data.ArrayStore({
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });

    // manually load local data
    store.loadData(myData);

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {
                id       :'company',
                header   : 'Company', 
                width    : 160, 
                sortable : true, 
                dataIndex: 'company'
            },
            {
                header   : 'Price', 
                width    : 75, 
                sortable : true, 
                renderer : 'usMoney', 
                dataIndex: 'price'
            },
            {
                header   : 'Change', 
                width    : 75, 
                sortable : true, 
                dataIndex: 'change'
            }
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 350,
        width: 600,
        title: 'Array Grid',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'
    });
    
    var grid2 = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {
                id       :'company',
                header   : 'Company', 
                width    : 160, 
                sortable : true, 
                dataIndex: 'company'
            },
            {
                header   : 'Price', 
                width    : 75, 
                sortable : true, 
                renderer : 'usMoney', 
                dataIndex: 'price'
            },
            {
                header   : 'Change', 
                width    : 75, 
                sortable : true, 
                dataIndex: 'change'
            }
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 350,
        width: 600,
        title: 'Array Grid',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'
    });
 
 
    var win = new Ext.Window({
         title:'Add Test'
        ,width:600
        ,height:400
        ,closable:false
        ,layout:'border'
        ,border:false
        ,items:[{
            // west region with buttons
             region:'west'
            ,width:160
            ,minSize:160
            ,split:true
            ,defaults:{minWidth:120}
            ,layout:'table'
            ,bodyStyle:'padding:20px'
            ,layoutConfig:{columns:1, tableAttrs:{style:{width:'100%'}}}
            ,items:[{
                 xtype:'button'
                ,text:'Add Grid 1'
 
                ,handler:function() {
 
                    win.items.itemAt(1).add(grid)
		    win.doLayout()
                }
            },{
                 xtype:'button'
                ,text:'Add Grid 2'
 
                ,handler:function() {
 
                    win.items.itemAt(1).add(grid2)
		    win.doLayout()
                }
            }]
        },{
             region:'center'
            ,autoScroll:true
            ,tbar:['->', {
                text:'Clear'
               ,handler:function(){win.items.itemAt(1).body.update('')}
            }]
        }]
    });
    win.show();
 
});

Вот вам рабочий пример