PDA

View Full Version : how to show different panel on the center of the window based on button click event



rushi2440
15 Mar 2012, 11:05 PM
hi sencha forum member

I am having some problems in displaying different panel on the center area of border layout window.

Consider I am having border layout window with east side containing different button, which on click will display the grid on the center of the layout window.

My window is shown below with east containing buttons and center is empty.32794i am able to capture button click event to my controller. using below code
init: function() { this.control({
'companyview button[action=company-view]': {
click: this.createCompanyview
}
});
},
createCompanyview: function(btn) {
alert('company view clicked');
}

when the company button is clicked I get the alert window.

But based on the button click I want to open different detail view to the center layout of the window.

Please suggest me some solution , so I can view different window on the border layout of the window as shown above.

Yogendra Singh
Sr. Programmer
Kintudesigns.com

khmurach
16 Mar 2012, 6:09 AM
You can try to use tabpanel. Demo http://ext4all.com/post/tabpanel-change-active-tab-by-click-on-treepanel-item

khmurach
16 Mar 2012, 6:17 AM
Or use card layout. Demo http://ext4all.com/post/using-card-layout

rushi2440
16 Mar 2012, 11:13 PM
@khmurach

thanks for your response, but instead of treepanel can I am trying to add form panel and also adding the button listener to click. But didn't work correctly.

I above example I had made some modification, below is the code

Ext.define('rms.view.companymgt.companyMain', {
extend: 'rms.model.desktopmgt.Module',
alias: 'widget.companymain',
requires: ['rms.view.companymgt.companyView','rms.view.companymgt.companyDetail'],
id: 'companymain',

init: function() {
this.launcher = {
text: 'Company Management System',
iconCls: 'project-mini-icon',
handler: this.createWindow,
scope: this
};
},

createWindow: function() {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('companymgt-win');
if(!win){
win = desktop.createWindow({
id: 'companymgt-win',
title: 'Company Management System',
height: 566,
width: 900,
layout: 'border',
constrain: true,
modal: true,
closeAction: 'destroy',
/*items: [{
region: 'west',
collapsible: true,
//html: 'MAIN VIEW',
xtype: 'companyview',
flext:1
},{
region: 'center',
collapsible: true,
//html: 'DETAIL VIEW',
xtype: 'companydetail',
flex:3
}]*/
items: [tree,cards]
});
}
win.show();
return win.setPosition(100,100);
}
});


var cards = Ext.create('Ext.panel.Panel', {
region: 'center', //for border layout
margins: '5 5 5 5',
border: false,
layout: 'card',
defaults: { bodyPadding: 10 },
items: [
{
title: 'Tab 1',
itemId: 'tab-1',
html: 'Tab 1 content'
},
{
title: 'Tab 2',
itemId: 'tab-2',
html: 'Tab 2 content'
},
{
title: 'Tab 3',
itemId: 'tab-3',
html: 'Tab 3 content'
}
]
});
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Tab 1", panel: 'tab-1', leaf: true },
{ text: "Tab 2", panel: 'tab-2', leaf: true },
{ text: "Tab 3", panel: 'tab-3', leaf: true }
]
}
});
var tree = Ext.create('Ext.form.Panel', {
region: 'west', //for border layout
collapsible: true,
title: 'Menu',
width: 200,
//store: store,
items:[
{
xtype: 'panel',
height: 110,
padding: '10 10 25 10',
width: 200,
collapsible: true,
title: 'Company Information',
items: [
{
xtype: 'button',
height: 27,
style: 'margin-left:30px;margin-top:12px;\n',
width: 128,
text: 'Company',
action: 'company-view'
}
]
},
{
xtype: 'panel',
height: 110,
padding: '10 10 25 10',
width: 200,
collapsible: true,
title: 'Department Information',
items: [
{
xtype: 'button',
height: 27,
style: 'margin-left:30px;margin-top:12px;\n',
width: 128,
text: 'Department',
action: 'department-view'
}
]
},
{
xtype: 'panel',
height: 110,
padding: '10 10 25 10',
width: 200,
collapsible: true,
title: 'Designation Information',
items: [
{
xtype: 'button',
height: 27,
style: 'margin-left:30px;margin-top:12px;',
width: 128,
text: 'Designation',
action: 'designation-view'
}
]
}],
//rootVisible: false,
margins: '5 0 5 5',
listeners: {
click: function (s, m) {
cards.getLayout().setActiveItem(m.raw.panel);
}
}
});


what is wrong in above, suggest me some solution so I can make it working

Yogendra Singh
Sr. Programmer
Kintudesigns.com

khmurach
17 Mar 2012, 1:23 PM
Demo here http://ext4all.com/post/a-little-bit-strange-navigation :)

rushi2440
18 Mar 2012, 12:00 AM
@khmurach

thank you so much.With little changes to my view and controller everything works perfectly.





Yogendra Singh
Sr. Programmer
Kintudesigns.com