javascript - Unable to hide panel in extjs -

javascript - Unable to hide panel in extjs -

i have 2 grids , 1 panel in page. grids visible , panel hidden. on click of button enable panel , hide 2 grids using:

firstgrid.hide(); secondgrid.hide(); firstpanel.show();

after saving records on panel, want hide panel , enable grids, tried using this:

firstgrid.show(); secondgrid.show(); alert(firstpanel); //<-- firstpanel not defined (error console) firstpanel.hide();

as result 3 (2 grids , 1 panel) visible not desired. want hide panel. can please educate me pointing out mistake?

panel layout:

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 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 take before saving 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 working fine. here gets hidden } }], renderto: 'paneldiv' }); function savemethod(){..... ---ajaxcall---- if(jsontxt.sucflg==1){ ext.messagebox.alert('record saved successfully'); firstgrid.show(); secondgrid.show(); firstpanel.hide(); }..... }

won't allow me comment, seek adding id : 'firstpanel' panel , doing ext.getcmp('firstpanel').hide(); on save method

javascript jsp extjs