我在页面中有2个网格和1个面板 最初网格是可见的，面板是隐藏的。单击按钮我启用面板并使用以下方法隐藏2个网格：
firstGrid.hide();
secondGrid.hide();
firstPanel.show();
在面板上保存记录后，我想隐藏面板并启用网格，我尝试使用它：
firstGrid.show();
secondGrid.show();
alert(firstPanel); //<-- firstPanel is not defined (error console)
firstPanel.hide();
结果，所有3个（2个网格和1个面板）都是可见的，这是不希望的。我想隐藏面板。
任何人都可以通过指出错误来教育我吗？
面板布局：
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();
}.....
}
答案 0 :(得分：0)
不允许我发表评论，但尝试将ID：'firstPanel'添加到您的面板，然后在保存方法上执行Ext.getCmp('firstPanel').hide();