Skip to content

Instantly share code, notes, and snippets.

@nickweavers
Created February 18, 2010 17:58
Show Gist options
  • Save nickweavers/307893 to your computer and use it in GitHub Desktop.
Save nickweavers/307893 to your computer and use it in GitHub Desktop.
<?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