<?php
require_once("init.php");
?>
<!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="lib/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/extjs/ext-all-debug.js"></script>
<style>
.report
{
background:url(testing/img/pie-chart.png) 0 no-repeat !important;
}
.dataset
{
background:url(testing/img/table.png) 0 no-repeat !important;
}
.datasource
{
background:url(testing/img/data.png) 0 no-repeat !important;
}
.computer {background:url(icons/computer.png) 0 no-repeat !important;}
</style>
<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
]
})
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'get-nodes.php'
},
root: {
text: 'MyBase',
id: '0',
expanded: false
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
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());
var tree = Ext.create('Ext.tree.Panel', {
store: store,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
border: true,
//renderTo: 'tree-div',
margins: '5 0 5 5',
cmargins: '0 0 0 0',
region: 'west',
height: 300,
width: 250,
title: 'Files',
collapsible:false,
split:true,
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function(){
tree.expandAll();
}
}, {
text: 'Collapse All',
handler: function(){
tree.collapseAll();
}
}]
}]
});
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: '0 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',
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: '5 0 5 0',
region:'center',
layout:'border',
border:false,
items:[mainTabPanel]
});
eastPanel = new Ext.Panel({
id:'eastPanel',
title:'East Panel',
contentEl:'pnl-detail3',
collapsible:false,
split:true,
margins: '5 5 5 0',
cmargins: '40 0 0 5',
region:'east',
layout:'fit',
width:200,
minSize: 100
});
containerPanel = {
header: false,
title: 'Menu',
tbar: mainTBar,
border:false,
layout:'border',
items:[
tree,
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>