<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ExtJsLayout</title>
<link rel="stylesheet" type="text/css"
href="../../extjs/resources/css/ext-all.css" />
<script type="text/javascript"
src="../../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript"
src="../../extjs/ext-all-debug.js"></script>
<script type="text/javascript">
var eastPanelHidden = false;
var westPanelHidden = false;
var westPanelBtn;
var eastPanelBtn;
var eastPanel;
var westPanel;
var containerPanel;
var viewport;
var tab1;
var tab2;
var detail2;
var invDetailPanel;
var mainTabPanel;
var detailsPanel;
var centerPanel;
var action1 = new Ext.Action({
text: 'Action 1',
handler: function(){
Ext.Msg.alert('Click','You clicked on "Action 1".');
}
});
var action2 = new Ext.Action({
text: 'Action 2',
handler: function(){
Ext.Msg.alert('Click','You clicked on "Action 2".');
}
});
var action3 = new Ext.Action({
text: 'Action 3',
handler: function(){
Ext.Msg.alert('Click','You clicked on "Action 3".');
}
});
var action4 = new Ext.Action({
text: 'Action 4',
handler: function(){
Ext.Msg.alert('Click','You clicked on "Action 4".');
}
});
var mainTBar = new Ext.Toolbar({
items:[action1,
{
text: 'Menu 1',
menu: [action2,action3,action4]
},
{
text: 'Menu 2',
menu: [action2,action3,action4]
}]
})
var westPanelBtn = new Ext.Button({
xtype: 'tbbutton',
text: 'West Panel',
handler: toggleWestPanel,
enableToggle:true,
pressed:true
});
var eastPanelBtn = new Ext.Button({
xtype: 'tbbutton',
text: 'East Panel',
handler: toggleEastPanel,
enableToggle:true,
pressed:true
});
function toggleEastPanel() {
if (eastPanel) {
if (eastPanelHidden == false) {
eastPanel.hide();
eastPanel.ownerCt.doLayout();
} else {
eastPanel.show();
eastPanel.ownerCt.doLayout();
eastPanel.expand();
}
eastPanelHidden = !eastPanelHidden;
}
}
function toggleWestPanel() {
if (westPanel) {
if (westPanelHidden == false) {
westPanel.hide();
westPanel.ownerCt.doLayout();
} else {
westPanel.show();
westPanel.ownerCt.doLayout();
westPanel.expand();
}
westPanelHidden = !westPanelHidden;
}
}
var tabsTBar = new Ext.Toolbar({
items:[westPanelBtn,
{xtype: 'tbspacer'},
eastPanelBtn
]
})
function onTabChange(tabPanel, tab) {
switch (tab.id) {
case 'tab-1':
detail2.hide();
invDetailPanel.show();
break;
case 'tab-2':
invDetailPanel.hide();
detail2.show();
break;
}
}
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
tab1 = {
id:'tab-1',
contentEl:'pnl-tab1',
title: 'Tab 1',
viewConfig: {layout:'fit'},
autoScroll:true
}
tab2 = {
id:'tab-2',
contentEl:'pnl-tab2',
title: 'Tab 2',
viewConfig: {layout:'fit'},
autoScroll:true
}
mainTabPanel = new Ext.TabPanel({
region: 'center',
margins: '0 0 0 0',
tbar: tabsTBar,
activeTab: 0,
items: [tab1,tab2]
});
invDetailPanel = new Ext.Panel({
contentEl:'pnl-detail1',
autoScroll:true,
border:false
});
detail2 = new Ext.Panel({
contentEl:'pnl-detail2',
autoScroll:true,
border:false
})
detailsPanel = new Ext.Panel({
region: 'south',
height:300,
margins: '0 0 0 0',
cmargins: '5 0 0 0',
title: 'Details',
split: true,
layout:'fit',
collapsible: true,
items:[invDetailPanel,detail2]
});
westPanel = new Ext.FormPanel({
region: 'west',
border:true,
title: 'West Panel',
margins: '40 0 0 0',
cmargins: '40 5 0 0',
bodyStyle:'padding:5px 5px 5px 5px',
autoScroll:true,
labelWidth:100,
collapsible:true,
split:true,
width:340,
minSize: 340,
maxSize: 400,
items:[
new Ext.form.TextField({fieldLabel: 'First Name',name:
'first',width:180}),
new Ext.form.TextField({fieldLabel: 'Last Name',name:
'last',width:180})
]
});
centerPanel = new Ext.Panel({
margins: '40 0 0 0',
region:'center',
layout:'border',
border:false,
items:[mainTabPanel,detailsPanel]
});
eastPanel = new Ext.Panel({
id:'eastPanel',
title:'East Panel',
contentEl:'pnl-detail3',
collapsible:true,
split:true,
margins: '40 0 0 0',
cmargins: '40 0 0 5',
region:'east',
layout:'fit',
width:500,
minSize: 100
});
containerPanel = {
header: false,
title: 'Menu',
tbar: mainTBar,
border:false,
layout:'border',
items:[
westPanel,
centerPanel,
eastPanel
]
}
viewport = new Ext.Viewport({
layout:'fit',
items:[
containerPanel
]
});
//toggleEastPanel();
//toggleWestPanel();
mainTabPanel.on('tabchange',onTabChange);
});
</script>
</head>
<body>
<div id="pnl-tab1">Tab 1</div>
<div id="pnl-tab2">Tab 2</div>
<div id="pnl-detail1">Detail 1</div>
<div id="pnl-detail2">Detail 2</div>
<div id="pnl-detail3">Detail 3</div>
</body>
</html>
This e-Mail may contain proprietary and confidential information and is sent for the intended recipient(s) only. If by an addressing or transmission error this mail has been misdirected to you, you are requested to delete this mail immediately. You are also hereby notified that any use, any form of reproduction, dissemination, copying, disclosure, modification, distribution and/or publication of this e-mail message, contents or its attachment other than by its intended recipient/s is strictly prohibited.
Visit us at http://www.polaris.co.in
Comments