/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
//
// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
//
Ext.app.PoemLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, {
processAttributes : function(attr){
if(attr.title){ // is it a poem node?
// Set the node text that will show in the tree since our raw data does not include a text attribute:
attr.text = attr.title;
// Book icon:
attr.iconCls = 'book';
// Tell the tree this is a leaf node. This could also be passed as an attribute in the original XML,
// but this example demonstrates that you can control this even when you cannot dictate the format of
// the incoming source XML:
attr.leaf = true;
}
}
});
//
// This is the main layout definition.
//
Ext.onReady(function(){
Ext.QuickTips.init();
var detailsText = 'Select a Poem to see more information...';
var tpl = new Ext.Template(
'{title}
',
'{innerText}');
tpl.compile();
var bubble = new Ext.ux.BubblePanel({
padding: 5,
width: 400,
autoHeight: true,
contentEl: 'bubble-markup'
});
var careerPanel = new Ext.Panel({
id: 'career-panel',
//padding: 5,
margins: '5 0 0 5',
frame: true,
width: 400,
height: 600,
title: 'Career',
autoLoad: 'ivanwallis/career.html'
});
var musicPanel = new Ext.Panel({
id: 'music-panel',
//padding: 5,
margins: '5 0 0 5',
frame: true,
width: 400,
height: 600,
title: 'Music',
autoLoad: {
url: 'ivanwallis/music.html',
scripts: true
}
});
var sinisterPanel = new Ext.Panel({
id: 'sinister-panel',
//padding: 5,
margins: '5 0 0 5',
frame: true,
autoScroll: true,
width: 400,
height: 600,
title: 'Sinister Planet',
autoLoad: {
url: 'ivanwallis/sinister.html',
scripts: true
}
});
var galleryPanel = new Ext.Panel({
id: 'gallery-panel',
//padding: 5,
margins: '5 0 0 5',
frame: true,
width: 500,
height: 600,
title: 'Gallery',
html: '',
renderTo: 'somepanel'
});
var poetryPanel = new Ext.Panel({
id: 'poetry-panel',
title: 'Poetry',
layout: 'border',
width: 500,
height: 600,
items: [{
xtype: 'treepanel',
id: 'tree-panel',
region: 'center',
margins: '2 2 0 2',
autoScroll: true,
rootVisible: false,
root: new Ext.tree.AsyncTreeNode(),
// Our custom TreeLoader:
loader: new Ext.app.PoemLoader({
dataUrl:'ivanwallis/poetry.xml'
}),
listeners: {
'render': function(tp){
tp.getSelectionModel().on('selectionchange', function(tree, node){
var el = Ext.getCmp('details-panel').body;
if(node && node.leaf){
tpl.overwrite(el, node.attributes);
}else{
el.update(detailsText);
}
})
}
}
},{
region: 'south',
headerAsText: false,
id: 'details-panel',
autoScroll: true,
collapsible: false,
split: true,
margins: '0 2 2 2',
cmargins: '2 2 2 2',
height: 300,
html: detailsText
}]
});
var linksPanel = new Ext.Panel({
id: 'links-panel',
//padding: 5,
margins: '5 0 0 5',
frame: true,
width: 400,
height: 600,
title: 'Links',
autoLoad: 'ivanwallis/links.html'
});
var clock = new Ext.Toolbar.TextItem('');
// ================ StatusBar Window example =======================
var statusBarPanel = new Ext.Panel({
id: 'statusBar',
headerAsText: false,
autoWidth: true,
autoHeight: true,
border: false,
bodyStyle: 'padding:0px;',
bbar: new Ext.ux.StatusBar({
id: 'win-statusbar',
defaultText: '2009 IvanWallis.com',
items: ['-', clock, '-',
new Date().format('n/d/Y'), ' ', ' ', '-', {
xtype:'tbsplit',
text:'Sites',
menuAlign: 'br-tr?',
menu: new Ext.menu.Menu({
items: [{text: 'Facebook',
icon: 'ivanwallis/facebook.ico',
href: 'http://www.facebook.com/zosocanuck',
hrefTarget: '_blank'
},
{text: 'LinkedIn',
icon: 'ivanwallis/linkedin.ico',
href: 'http://www.linkedin.com/pub/ivan-wallis-cissp/0/271/301',
hrefTarget: '_blank'
}]
})
}]
}),
listeners: {
render: {
fn: function(){
// Kick off the clock timer that updates the clock el every second:
Ext.TaskMgr.start({
run: function(){
Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));
},
interval: 1000
});
},
delay: 100
}
}
});
new Ext.ux.Carousel('simple-example', {
itemSelector: 'img',
interval: 3,
autoPlay: true,
showPlayButton: true,
pauseOnNavigate: true,
freezeOnHover: true,
transitionType: 'fade',
navigationOnHover: true
});
// This is the main content center region that will contain each example layout panel.
// It will be implemented as a CardLayout since it will contain multiple panels with
// only one being visible at any given time.
var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '5 0 0 5',
height: 400,
activeItem: 0,
border: false,
items: [
careerPanel, musicPanel, poetryPanel, linksPanel, galleryPanel, sinisterPanel
]
};
// Go ahead and create the TreePanel now so that we can use it below
var treePanel = new Ext.tree.TreePanel({
id: 'tree-panel',
region:'north',
split: true,
autoHeight: true,
minSize: 150,
autoScroll: true,
// tree-specific configs:
lines: true,
singleExpand: true,
useArrows: true,
expanded: true,
headerAsText: false,
rootVisible: false,
loader: new Ext.tree.TreeLoader({
dataUrl:'ivanwallis/tree-data.json'
}),
root: new Ext.tree.AsyncTreeNode()
});
// Assign the changeLayout function to be called on tree node click.
treePanel.on('click', function(n){
var sn = this.selModel.selNode || {}; // selNode is null on initial selection
if(n.id != sn.id){ // ignore clicks on folders and currently selected node
Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
}
});
var myBorderPanel = new Ext.Panel({
width: 800,
height: 500,
title: 'Ivan Wallis',
layout: 'border',
items: [{
//title: 'Status',
headerAsText: false,
border: false,
region: 'south', // position for region
height: 25,
split: false, // enable resizing
margins: '0 0 0 0',
items: [statusBarPanel]
},{
// xtype: 'panel' implied by default
//title: 'West Region is collapsible',
region:'west',
margins: '5 0 0 5',
height: 150,
width: 250,
collapsible: true, // make collapsible
cmargins: '5 5 0 5', // adjust top margin when collapsed
id: 'west-region-container',
layout: 'fit',
unstyled: true,
items: [treePanel]
},
contentPanel],
renderTo: 'somepanel'
});
});
