Javascript 无法在extjs中隐藏面板

我在一页中有两个网格和一个面板。
最初，栅格可见，面板隐藏。单击按钮后，我启用面板并使用以下方法隐藏2个网格：

firstGrid.hide();
secondGrid.hide();
firstPanel.show();

在面板上保存记录后，我想隐藏面板并启用网格，我尝试使用以下方法：

firstGrid.show();
secondGrid.show();
alert(firstPanel); //<-- firstPanel is not defined (error console)
firstPanel.hide();

firstGrid.show（）；
secondGrid.show（）；
警报（第一面板）// 尝试将id:“firstPanel”添加到面板中，然后执行
Ext.getCmp（'firstPanel'）.hide（）保存方法。
请发布您的布局code@DarinKolev整个页面的布局相当庞大。所以我刚刚发布了面板部分和隐藏它的方法。更重要的是父容器的布局，其中包括所有网格和面板。面板的布局不正确important@DarinKolev父容器只是一个jsp。所有网格都放置在
Ext.onReady（function（）{}）中
面板位于从firstGrid单击按钮时调用函数的内部。或者我应该粘贴整个js页面代码？1200行。对于给定的信息，永远不推荐使用getCmp（），理想的方法是什么？我自己对Extjs相当陌生，所以我总是愿意学习一些more@PedroReis您可以使用Ext.ComponentQuery.query或scope.down或scope.up引用组件istead添加id并使用Ext.getCmp引用它。为此，我考虑了组件up/down，但我认为我们需要更多关于布局的信息。。或者可能是控制器引用，这取决于所有这些发生的位置。我想永远不要使用ComponentQuery。。我会调查的。泰
var firstPanel = Ext.create('Ext.panel.Panel', {
    title: '<center>First Panel</center>',
    margin:'20 0 0 0',
    autoHeight: true,
    width:780,
    standardSubmit:false,
store: storeName,
    hidden:true,
 frame: true,
    layout: {
    type: 'table',
        columns: 4
}, defaults: {
        // applied to each contained panel
        bodyStyle: 'background-color:#dfe8f5;'
    },
    items: [
        {
            xtype:'textfield',width:120,height:31,colspan:1,readOnly:true,margin: '0 0 0 0',
            fieldStyle: 'background-color: #dfe8f5; background-image: none; border: none; font-weight: bold; color: #505050;',
            value:'First Field'
    },{
            xtype:'textfield',id:'usap1',width:199, height:26,colspan:1,readOnly:true,margin: '1 0 1 0',  dataIndex: 'firstVar',
            fieldStyle: 'background-color: #dfe8f5; background-image: none; text-align: center;border: none; font-weight: bold; color: #505050;'
    },{
            xtype:'textfield',width:100,height:31,colspan:1,readOnly:true,margin: '0 0 0 20',
            fieldStyle: 'background-color: #dfe8f5; background-image: none; border: none; font-weight: bold; color: #505050;',
            value:'Second Field'
    },{
            xtype:'textfield',id:'usap2',width:199,height:26,colspan:1,margin: '1 0 1 0',readOnly:true,  dataIndex: 'secondVar',
            fieldStyle: 'background-color: #dfe8f5; background-image: none; text-align: center;border: none; font-weight: bold; color: #505050;'
    },{
            xtype:'textfield',width:100,height:31,colspan:1,margin: '0 0 0 0',readOnly:true,
            fieldStyle: 'background-color: #dfe8f5; background-image: none; border: none; font-weight: bold; color: #505050;',
            value:'Third Field'
    },{
        xtype: 'datefield', id : 'usap3', anchor: '100%', name: 'stockAsOn', format: 'd/m/Y', width: 199, altFormats: 'd-M-y',
            fieldStyle: 'text-align: center;', height: 26
    },{
            xtype:'textfield',width:100,height:31,colspan:1,readOnly:true,margin: '0 0 0 20',
            fieldStyle: 'background-color: #dfe8f5; background-image: none; border: none; font-weight: bold; color: #505050;',
            value:'Fourth Field'
    },{
            xtype:'textfield',id:'usap4',width:199,height:26,colspan:1,margin: '1 0 1 0',
            fieldStyle: 'text-align: center;'
    },{
            xtype:'textfield',width:100,height:31,colspan:1,readOnly:true,margin: '0 0 0 0',
            fieldStyle: 'background-color: #dfe8f5; background-image: none; border: none; font-weight: bold; color: #505050;',
            value:'Fifth Field'
    },{
            xtype:'textfield',id:'usap5',width:199,height:26,colspan:1,margin: '1 0 1 0',
            fieldStyle: 'text-align: center;'
    },{
            xtype:'textfield',width:100,height:31,colspan:1,readOnly:true,margin: '0 0 0 20',
            fieldStyle: 'background-color: #dfe8f5; background-image: none; border: none; font-weight: bold; color: #505050;',
            value:'Sixth Field'
    },{
            xtype:'textfield',id:'usap6',width:199,height:26,colspan:1,margin: '1 0 1 0',
            fieldStyle: 'text-align: center;'
    },{
            xtype:'textfield',width:100,height:31,colspan:1,readOnly:true,margin: '0 0 0 0',
            fieldStyle: 'background-color: #dfe8f5; background-image: none; border: none; font-weight: bold; color: #505050;',
            value:'Seventh Field'
    },{
            xtype:'textfield',id:'usap7',width:199,height:26,colspan:1,margin: '1 0 1 0',
            fieldStyle: 'text-align: center;'
    },{
            xtype:'textfield',width:151,height:31,colspan:1,readOnly:true,margin: '0 0 0 20',
            fieldStyle: 'background-color: #dfe8f5; background-image: none; border: none; font-weight: bold; color: #505050;',
            value:'Eigth Field'
    },{
            xtype:'textfield',id:'usap8',width:199,height:26,colspan:1,margin: '1 0 1 0',
            fieldStyle: 'text-align: center;'
    },{
            xtype:'textfield',width:151,height:31,colspan:1,readOnly:true,margin: '0 0 0 0',
            fieldStyle: 'background-color: #dfe8f5; background-image: none; border: none; font-weight: bold; color: #505050;',
            value:'Ninth Field'
    },{
        xtype:'textfield',id:'usap9',width:199,height:26,colspan:1,margin: '1 0 1 0',
            fieldStyle: 'text-align: center;'
    },{
            xtype:'textfield',width:151,height:31,colspan:1,readOnly:true,margin: '0 0 0 20',
            fieldStyle: 'background-color: #dfe8f5; background-image: none; border: none; font-weight: bold; color: #505050;',
            value:'tenth Field'
    },{
            xtype:'textfield',id:'usap10',width:199,height:26,colspan:1,margin: '1 0 1 0',
            fieldStyle: 'text-align: center;'
    },{
            xtype:'textfield',width:151,height:31,colspan:1,readOnly:true,margin: '0 0 0 0',
            fieldStyle: 'background-color: #dfe8f5; background-image: none; border: none; font-weight: bold; color: #505050;',
            value:'Eleventh Field'
    },{
            xtype:'textfield',id:'usap11',width:199,height:26,colspan:1,margin: '1 0 1 0',
            fieldStyle: 'text-align: center;'
    },{
        html:'',
        border:false
 }],
    buttons: [{
        xtype: 'checkbox', id:'usapCheck', boxLabel: 'I Accept', allowBlank: false, margin: '1 1 4 230'
 },{
        buttonAlign: 'right',margin:'0 0 0 3.6',text: 'Save',width: '30',iconCls: 'save',
        handler: function() {
            if(Ext.getCmp('usapCheck').getValue()){
                saveMethod();

            }else{
                Ext.MessageBox.alert('Please accept before saving the form');
            }
        }
    },{
            buttonAlign: 'right',margin:'1 1 0 3.6',text: 'Clear',width: '30',iconCls: 'clear',
        handler: function() {
            clearfirstPanel();
        }
    },{
        buttonAlign: 'right',margin:'1 1 1 1.6',text: 'Back',width: '30',iconCls: 'back',
        handler: function() {
            firstGrid.show();
            secondGrid.show();
            firstPanel.hide(); //this part is working fine. Here it gets hidden
        }
    }],
    renderTo: 'panelDiv'
});
 function saveMethod(){.....
---AjaxCall----
    if(jsonTxt.sucFlg==1){
         Ext.MessageBox.alert('Record Saved Successfully');
        firstGrid.show();
        secondGrid.show();
        firstPanel.hide();
    }.....
 }