127 lines
3.9 KiB
JavaScript
127 lines
3.9 KiB
JavaScript
/*
|
|
This file is part of Ext JS 3.4
|
|
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
|
|
Contact: http://www.sencha.com/contact
|
|
|
|
GNU General Public License Usage
|
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
|
packaging of this file.
|
|
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
|
at http://www.sencha.com/contact.
|
|
|
|
Build date: 2013-04-03 15:07:25
|
|
*/
|
|
|
|
//
|
|
// This is the main layout definition.
|
|
//
|
|
Ext.onReady(function(){
|
|
|
|
Ext.QuickTips.init();
|
|
|
|
// This is an inner body element within the Details panel created to provide a "slide in" effect
|
|
// on the panel body without affecting the body's box itself. This element is created on
|
|
// initial use and cached in this var for subsequent access.
|
|
var detailEl;
|
|
|
|
// 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: '2 5 5 0',
|
|
activeItem: 0,
|
|
border: false,
|
|
items: [
|
|
// from basic.js:
|
|
start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table, vbox, hbox,
|
|
// from custom.js:
|
|
rowLayout, centerLayout,
|
|
// from combination.js:
|
|
absoluteForm, tabsNestedLayouts
|
|
]
|
|
};
|
|
|
|
// Go ahead and create the TreePanel now so that we can use it below
|
|
var treePanel = new Ext.tree.TreePanel({
|
|
id: 'tree-panel',
|
|
title: 'Sample Layouts',
|
|
region:'north',
|
|
split: true,
|
|
height: 300,
|
|
minSize: 150,
|
|
autoScroll: true,
|
|
|
|
// tree-specific configs:
|
|
rootVisible: false,
|
|
lines: false,
|
|
singleExpand: true,
|
|
useArrows: true,
|
|
|
|
loader: new Ext.tree.TreeLoader({
|
|
dataUrl:'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.leaf && n.id != sn.id){ // ignore clicks on folders and currently selected node
|
|
Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
|
|
if(!detailEl){
|
|
var bd = Ext.getCmp('details-panel').body;
|
|
bd.update('').setStyle('background','#fff');
|
|
detailEl = bd.createChild(); //create default empty div
|
|
}
|
|
detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
|
|
}
|
|
});
|
|
|
|
// This is the Details panel that contains the description for each example layout.
|
|
var detailsPanel = {
|
|
id: 'details-panel',
|
|
title: 'Details',
|
|
region: 'center',
|
|
bodyStyle: 'padding-bottom:15px;background:#eee;',
|
|
autoScroll: true,
|
|
html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
|
|
};
|
|
|
|
// Finally, build the main layout once all the pieces are ready. This is also a good
|
|
// example of putting together a full-screen BorderLayout within a Viewport.
|
|
new Ext.Viewport({
|
|
layout: 'border',
|
|
title: 'Ext Layout Browser',
|
|
items: [{
|
|
xtype: 'box',
|
|
region: 'north',
|
|
applyTo: 'header',
|
|
height: 30
|
|
},{
|
|
layout: 'border',
|
|
id: 'layout-browser',
|
|
region:'west',
|
|
border: false,
|
|
split:true,
|
|
margins: '2 0 5 5',
|
|
width: 275,
|
|
minSize: 100,
|
|
maxSize: 500,
|
|
items: [treePanel, detailsPanel]
|
|
},
|
|
contentPanel
|
|
],
|
|
renderTo: Ext.getBody()
|
|
});
|
|
});
|