layout-browser.js
3.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/*
* Ext JS Library 2.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
//
// 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,
// 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()
});
});