Created
February 18, 2010 17:58
-
-
Save nickweavers/307893 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* @copyright Copyright (C) 2009 - 2012 SiteWeavers. All rights reserved. | |
*/ | |
// no direct access | |
defined( '_JEXEC' ) or die( 'Restricted access' ); | |
?> | |
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > | |
<head> | |
<title>blahblah Ltd Administration Area</title> | |
<link rel="stylesheet" href="includes/js/ext-3.1.1/resources/css/ext-all.css" type="text/css" media="screen" /> | |
<link rel="stylesheet" href="includes/js/ext-3.1.1/examples/ux/css/RowEditor.css" type="text/css" media="screen" /> | |
<script type="text/javascript" src="includes/js/joomla.javascript.js"></script> | |
<script type="text/javascript" src="includes/js/ext-3.1.1/adapter/ext/ext-base.js"></script> | |
<script type="text/javascript" src="includes/js/ext-3.1.1/ext-all-debug.js"></script> | |
<script type="text/javascript" src="includes/js/ext-3.1.1/examples/ux/ux-all.js"></script> | |
<script type="text/javascript" src="includes/js/ext-3.1.1/examples/ux/TreepanelStateful.js"></script> | |
<style type="text/css" media="print"> | |
/* It is common to set printer friendly styles such as a white background with black text. */ | |
body { | |
background-color: #fff; | |
background-image: none; | |
border-color: #000; /* Sets the border color properties for an element using shorthand notation */ | |
color: #000; | |
} | |
</style> | |
<style type="text/css"> | |
html, body { | |
font:normal 12px verdana; | |
margin:0; | |
padding:0; | |
border:0 none; | |
overflow:hidden; | |
height:100%; | |
} | |
p { | |
margin:5px; | |
} | |
#north { | |
background-color:#000099 ; | |
} | |
#footer { | |
background-image: url("templates/<?php echo $this->template ?>/images/admin_footer_left.jpg"); | |
background-repeat: no-repeat; | |
background-position: left; | |
font-family: Arial, Verdana, Helvetica; | |
color: #FFFFFF; | |
height: 53px; | |
} | |
#footer #text { | |
color: white; | |
padding-top: 60px; | |
padding-left: 5px; | |
vertical-align: middle; | |
} | |
</style> | |
<script type='text/javascript'> | |
//Ext.ns('Employees'); // Create a namespace for our script | |
//Example.version = '1.0'; // Give it a version number | |
Ext.BLANK_IMAGE_URL = 'includes/js/ext-3.1.1/resources/images/default/s.gif'; | |
// Ext.ns('UX'); | |
// UX.StatefulTabPanel = Ext.extend(Ext.TabPanel, { | |
// stateEvents: ['tabchange'], | |
// getstate: function() { | |
// return { tab : this.getActiveTab().id } | |
// }, | |
// applystate: function(state) { | |
// return { tab : this.setActiveTab(state.tab) } | |
// } | |
// }); | |
Ext.onReady(function(){ | |
Ext.QuickTips.init(); | |
var cp = new Ext.state.CookieProvider(); | |
Ext.state.Manager.setProvider(cp); | |
// cp.on('statechange', function(provider, key, value) { | |
// Ext.Msg.alert('State change', 'key: ' + key + ', value: ' + value); | |
// }); | |
// ------------------------------------------------------------------------------------------------------------- | |
// Create an object reference variable to TreeLoader object load the menu used in the left bar | |
// ------------------------------------------------------------------------------------------------------------- | |
var NavTreeLoader =new Ext.tree.TreeLoader({ | |
url: 'index.php', | |
baseParams: { | |
option: 'com_opsuk-backoffice', | |
//task: 'employee_records', | |
//controller: 'employees', | |
view: 'main', | |
layout: 'treeMenu', | |
format: 'raw' | |
} | |
}); | |
// ------------------------------------------------------------------------------------------------------------- | |
// Create an object reference variable to TreePanel object to be used as the left menu bar | |
// ------------------------------------------------------------------------------------------------------------- | |
var NavTreePanel = new Ext.tree.TreePanel({ | |
//var NavTreePanel = new Ext.ux.TreePanelStateful({ | |
id: 'NavTreePanel', | |
stateful: true, | |
stateId:'UserTree', | |
cp: cp, | |
autoScroll: true, | |
split: true, | |
border: false, | |
animate: true, | |
tbar:[{ | |
text:'Reload', | |
handler:function() { | |
NavTreePanel.suspendEvents(); | |
NavTreePanel.root.reload('xnode-10'); | |
NavTreePanel.resumeEvents(); | |
NavTreePanel.restoreState(NavTreePanel.root.getPath()); | |
} | |
}], | |
//plugins: [ new Ext.ux.plugins.TreePanelStateful()], | |
//expanded: true, | |
loader: NavTreeLoader, | |
root: new Ext.tree.AsyncTreeNode(), | |
rootVisible: false, | |
listeners: { | |
click: function(tree_xhr) { | |
Ext.Ajax.request({ | |
// A server side script used to add tabs to the CenterTabPanel and place component objects in them | |
url: 'index.php', | |
params: { | |
option: tree_xhr.attributes.option, | |
controller: tree_xhr.attributes.controller, | |
task: tree_xhr.attributes.task, | |
view: tree_xhr.attributes.view, | |
layout: tree_xhr.attributes.layout, | |
format: tree_xhr.attributes.format | |
}, | |
success: function(comp_xhr) { | |
var newComponent = eval(comp_xhr.responseText); // create component | |
newTab = CenterTabPanel.add(newComponent); // add it to a new tab | |
CenterTabPanel.setActiveTab(newComponent); // make the new tab active | |
}, | |
failure: function(response, options) { | |
Ext.Msg.alert("Failed to load code for CenterTabPanel", "Server communication failure:"); | |
} | |
}) | |
} | |
} | |
}); | |
// ------------------------------------------------------------------------------------------------------------- | |
// Create an object reference variable to the a TabPanel object used as the Center Tab Panel | |
// ------------------------------------------------------------------------------------------------------------- | |
//var CenterTabPanel = new UX.StatefulTabPanel({ | |
var CenterTabPanel = new Ext.TabPanel({ | |
stateful: true, | |
stateID: 'mainTabPanel', | |
deferredRender: false, | |
activeTab: 0, | |
plain: true, | |
defaults: {autoScroll: true} | |
}); | |
// ------------------------------------------------------------------------------------------------------------- | |
// Create an object reference variable to the a Viewport object | |
// The viewport contains regions 'north', 'south', 'east' and 'west' | |
// 'north' contains a static header made of a predefined html div | |
// 'south' contains a static footer made of a predefined html div | |
// 'west' contains an ext TreePanel to hold the BackOffice menu | |
// 'east' is current not used for anything | |
// ------------------------------------------------------------------------------------------------------------- | |
var viewport = new Ext.Viewport({ | |
stateful: true, | |
layout: 'border', | |
//id: 'viewport', | |
items: [ { | |
region: 'north', | |
contentEl: 'north', | |
collapsible: true, | |
autoHeight: true, | |
border: false, | |
margins: '0 0 5 0' | |
}, { | |
// lazily created panel (xtype:'panel' is default) | |
region: 'south', | |
split: true, | |
height: 100, | |
minSize: 100, | |
maxSize: 200, | |
//collapsible: true, | |
margins: '0 0 0 0', | |
layout:'anchor', | |
items: [{ | |
// title: 'Status', | |
// anchor: '100%', | |
// height: 45, | |
// id: 'status_messages', | |
// margins: '5 5 5 5', | |
// html: 'Hello' | |
}, { | |
contentEl: 'footer', | |
anchor: '100%', | |
autoHeight: true, | |
border: false, | |
}] | |
}, { | |
region: 'east', | |
title: 'East Side', | |
collapsible: true, | |
split: true, | |
id: 'east-panel', | |
width: 225, // give east and west regions a width | |
minSize: 175, | |
maxSize: 400, | |
margins: '0 5 0 0', | |
layout: 'fit', // specify layout manager for items | |
items: new Ext.TabPanel({ // this TabPanel is wrapped by another Panel so the title will be applied | |
border: false, // already wrapped so don't add another border | |
activeTab: 1, // second tab initially active | |
tabPosition: 'bottom', | |
items: [{ | |
html: '<p>A TabPanel component can be a region.</p>', | |
title: 'A Tab', | |
autoScroll: true | |
}] | |
}) | |
}, { | |
region: 'west', | |
collapsible: true, | |
title: 'Navigation', | |
id: 'west-panel', | |
width: 200, | |
items: NavTreePanel | |
}, { | |
region: 'center', | |
layout: 'fit', // specify layout manager for items | |
items: CenterTabPanel | |
} | |
] | |
}); | |
//NavTreePanel.restoreState(NavTreePanel.root.getPath()); | |
//CenterTabPanel.restoreState(); | |
// get a reference to the HTML element with id 'hideit' and add a click listener to it | |
}); | |
</script> | |
<jdoc:include type="head" /> | |
</head> | |
<body> | |
<!-- use class="x-hide-display" to prevent a brief flicker of the content --> | |
<div id="north" class="x-hide-display"> | |
<img src="templates/<?php echo $this->template ?>/images/admin_header.jpg" alt="" align="left" /> | |
</div> | |
<div id="east-panel" class="x-hide-display"> | |
</div> | |
<div id="west-panel" class="x-hide-display"> | |
</div> | |
<div id="help-tab" class="x-hide-display"> | |
<!-- <a id="hideit" href="#">Toggle the west region</a> --> | |
<p>My closable attribute is set to true so you can close me if you want to.</p> | |
<p>Typically I would provide written help on how to use the controls for the content that has been loaded into the Main view.</p> | |
</div> | |
<div id="content-tab" class="x-hide-display"> | |
</div> | |
<div id="footer"> | |
<!-- | |
<a href="http://www.siteweavers.co.uk" target="_blank"> | |
<img src="templates/<?php echo $this->template ?>/images/admin_footer_right.jpg" width="205" align="right" /> | |
</a> | |
--> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment