PDA

View Full Version : Hide Panel on Tab-click



gijukud6
27 Sep 2012, 3:36 PM
Hi,

so basically i want to show window_1 and window_2 on click of the two tabs in the tabpanel.
What did i do wrong?
Thanks!



Ext.application({
name: 'advanced-search-cui',
launch: function() {

Ext.create('Ext.panel.Panel',

{
xtype: 'panel',
itemId: 'window_main',
title: 'window_main',
width: 1000,
height: 700,
layout: {type: 'vbox'},
items: [
{
xtype: 'panel',
itemId: 'box_1',
width: 999,
height: 25,
layout: {
type: 'hbox',
padding: 0
},
items:[
{
xtype: 'tabpanel',
itemId: 'toolbar',
title: '',
width: 1000,
height: 25,
renderTo: document.body,
items: [{title: 'Wetter',
handler: function(){

var target = Ext.ComponentQuery.query('#window_1')[0];
target.show();
}
},
{title: 'Kalender',
handler: function(){

var target = Ext.ComponentQuery.query('#window_2')[0];
target.show();
}
}
]
},
],


},
{
xtype: 'panel',
itemId: 'box_2',
width: 999,
height: 550,
layout: {type: 'absolute'},
items:[{
xtype: 'panel',
itemId: 'window_1',
title: 'Wetter',
width: 200,
height: 200,
hidden: true,
margin: '10 0 0 10',
resizable:true,
draggable:true,
closable:true,
closeAction:'hide',
layout: {type: 'vbox'},
items: [],

},
{
xtype: 'panel',
itemId: 'window_2',
title: 'Kalender',
width: 200,
height: 200,
hidden: true,
margin: '10 0 0 10',
resizable:true,
draggable:true,
closable:true,
closeAction:'hide',
layout:{type: 'vbox'},
items:[],

}],
}],
renderTo: Ext.getBody()}
)
}
});

vietits
27 Sep 2012, 5:41 PM
Try to fix your code as below:


Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
itemId: 'window_main',
title: 'window_main',
width: 1000,
height: 700,
layout: {type: 'vbox'},
items: [{
xtype: 'panel',
itemId: 'box_1',
width: 999,
height: 25,
layout: {
type: 'hbox',
padding: 0
},
items:[{
xtype: 'tabpanel',
itemId: 'toolbar',
title: '',
width: 1000,
height: 25,
//renderTo: document.body, <- do not use renderTo for children inside container
items: [{
title: 'Wetter',
tabConfig: {
handler: function(){
var target = Ext.ComponentQuery.query('#window_1')[0];
target.show();
}
}
},{
title: 'Kalender',
tabConfig: {
handler: function(){
var target = Ext.ComponentQuery.query('#window_2')[0];
target.show();
}
}
}]
}],
}, {
xtype: 'panel',
itemId: 'box_2',
width: 999,
height: 550,
layout: {type: 'absolute'},
items:[{
xtype: 'panel',
itemId: 'window_1',
title: 'Wetter',
width: 200,
height: 200,
hidden: true,
margin: '10 0 0 10',
resizable:true,
draggable:true,
closable:true,
closeAction:'hide',
layout: {type: 'vbox'},
items: [],
},{
xtype: 'panel',
itemId: 'window_2',
title: 'Kalender',
width: 200,
height: 200,
hidden: true,
margin: '10 0 0 10',
resizable:true,
draggable:true,
closable:true,
closeAction:'hide',
layout:{type: 'vbox'},
items:[],
}],
}],
renderTo: Ext.getBody()
});


});

gijukud6
28 Sep 2012, 4:03 AM
Thank you !