Skip to content

Commit 367c41c

Browse files
asciicodeasciicode
committed
init
1 parent 235a1ac commit 367c41c

File tree

11 files changed

+284
-0
lines changed

11 files changed

+284
-0
lines changed

‎_me/images/disk.png‎

620 Bytes
Loading

‎_me/images/email_go.png‎

754 Bytes
Loading

‎_me/images/layout-browser-hd-bg.gif‎

532 Bytes
Loading

‎_me/images/layout-icon.gif‎

1.95 KB
Loading

‎_me/images/page_attach.png‎

794 Bytes
Loading

‎_me/images/printer.png‎

731 Bytes
Loading

‎_me/images/spellcheck.png‎

603 Bytes
Loading

‎_me/layout.js‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
Ext.Loader.setConfig({enabled: true});
2+
3+
Ext.Loader.setPath('Ext.ux', '../ux');
4+
5+
Ext.require([
6+
'Ext.tip.QuickTipManager',
7+
'Ext.container.Viewport',
8+
'Ext.layout.*',
9+
'Ext.form.Panel',
10+
'Ext.form.Label',
11+
'Ext.grid.*',
12+
'Ext.data.*',
13+
'Ext.tree.*',
14+
'Ext.selection.*',
15+
'Ext.tab.Panel',
16+
'Ext.ux.layout.Center'
17+
]);
18+
19+
Ext.onReady(function(){
20+
Ext.tip.QuickTipManager.init();
21+
22+
function clearExtjsComponent(cmp) {
23+
var f;
24+
while(f = cmp.items.first()){
25+
cmp.remove(f, true);
26+
}
27+
}
28+
29+
var contentPanel = {
30+
id: 'content-panel',
31+
region: 'center', // this is what makes this panel into a region within the containing layout
32+
layout: 'card',
33+
margins: '2 5 5 0',
34+
activeItem: 0,
35+
border: false,
36+
items: [{
37+
id: 'start-panel',
38+
title: 'Start Page',
39+
layout: 'fit',
40+
bodyStyle: 'padding:25px',
41+
contentEl: 'start-div' // pull existing content from the page
42+
}]
43+
};
44+
45+
var store = Ext.create('Ext.data.TreeStore', {
46+
root: {
47+
expanded: true
48+
},
49+
proxy: {
50+
type: 'ajax',
51+
url: 'tree-data.json'
52+
}
53+
});
54+
55+
var treePanel = Ext.create('Ext.tree.Panel', {
56+
id: 'tree-panel',
57+
title: 'Sample Layouts',
58+
region:'north',
59+
// split: true,
60+
height: '100%',
61+
// minSize: 150,
62+
rootVisible: false,
63+
autoScroll: true,
64+
store: store
65+
});
66+
67+
treePanel.getSelectionModel().on('select', function(selModel, record, index, eOpts){
68+
console.log(contentPanel);
69+
if (record.get('leaf')){
70+
// clearExtjsComponent(contentPanel)
71+
/*contentPanel.update('');
72+
73+
// add the new component
74+
contentPanel.add(newPanel);
75+
76+
// redraw the containing panel
77+
contentPanel.doLayout();*/
78+
79+
dynamicPanel = new Ext.Component({
80+
loader: {
81+
url: 'me.html',
82+
renderer: 'html',
83+
autoLoad: true,
84+
scripts: true
85+
}
86+
});
87+
88+
Ext.getCmp('content-panel').add(dynamicPanel);
89+
90+
}
91+
});
92+
93+
94+
Ext.create('Ext.Viewport', {
95+
layout: 'border',
96+
title: 'Ext Layout Browser',
97+
items: [{
98+
xtype: 'box',
99+
id: 'header',
100+
region: 'north',
101+
html: '<h1> Ext.Layout.Browser</h1>',
102+
height: 30
103+
},{
104+
layout: 'border',
105+
id: 'layout-browser',
106+
region:'west',
107+
border: false,
108+
split:true,
109+
margins: '2 0 5 5',
110+
width: 275,
111+
minSize: 100,
112+
maxSize: 500,
113+
items: [treePanel]
114+
},
115+
contentPanel
116+
],
117+
renderTo: Ext.getBody()
118+
});
119+
});

‎_me/me.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<title>I'm a title</title>
6+
<!-- Ext -->
7+
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
8+
<script type="text/javascript" src="../../ext-all-debug.js"></script>
9+
10+
<!-- example code -->
11+
12+
13+
14+
<!-- GC -->
15+
16+
17+
<!-- page specific -->
18+
<!-- <script type="text/javascript" src="me.js"></script> -->
19+
<script type="text/javascript" src="layout.js"></script>
20+
</head>
21+
22+
23+
<body>
24+
<div style="display:none;">
25+
26+
<!-- Start page content -->
27+
<div id="start-div">
28+
<div style="float:left;" ><img src="images/layout-icon.gif" /></div>
29+
<div style="margin-left:100px;">
30+
<h2>Welcome!</h2>
31+
<p>There are many sample layouts to choose from that should give you a good head start in building your own
32+
application layout. Just like the combination examples, you can mix and match most layouts as
33+
needed, so don't be afraid to experiment!</p>
34+
<p>Select a layout from the tree to the left to begin.</p>
35+
</div>
36+
</div>
37+
38+
</div>
39+
</body>
40+
</html>

‎_me/me.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
Ext.Loader.setConfig({enabled: true});
2+
3+
Ext.Loader.setPath('Ext.ux', '../ux');
4+
5+
Ext.require([
6+
'Ext.tip.QuickTipManager',
7+
'Ext.container.Viewport',
8+
'Ext.layout.*',
9+
'Ext.form.Panel',
10+
'Ext.form.Label',
11+
'Ext.grid.*',
12+
'Ext.data.*',
13+
'Ext.tree.*',
14+
'Ext.selection.*',
15+
'Ext.tab.Panel',
16+
'Ext.ux.layout.Center'
17+
]);
18+
19+
//
20+
// This is the main layout definition.
21+
//
22+
Ext.onReady(function(){
23+
console.log('allen');
24+
Ext.create('Ext.panel.Panel', {
25+
renderTo: Ext.getBody(),
26+
id:'column-panel',
27+
title: 'Column Layout',
28+
layout: 'column',
29+
bodyStyle: 'padding:5px 0 5px 5px',
30+
margins:'35 5 5 0',
31+
defaults: {bodyStyle:'padding:15px'},
32+
items: [{
33+
columnWidth: '.30',
34+
baseCls:'x-plain',
35+
bodyStyle:'padding:5px 0 5px 5px',
36+
items:[{
37+
title: 'A Panel',
38+
html: '<p>This is some short content.</p>'
39+
}]
40+
},{
41+
columnWidth: '.65',
42+
baseCls:'x-plain',
43+
bodyStyle:'padding:5px 0 5px 5px',
44+
items:[{
45+
title: 'A Panel',
46+
html: '<p>This is some short content.</p>'
47+
}]
48+
}]
49+
});
50+
});

0 commit comments

Comments
 (0)