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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
|
<html>
<head>
<title>Debug Console</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="debug.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="debug.js"></script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.ns('App');
App.BookStore = function(config) {
var config = config || {};
Ext.applyIf(config, {
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'Item',
id: 'ASIN',
totalRecords: '@total'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title',
'Manufacturer',
'ProductGroup',
// Detail URL is not part of the column model of the grid
'DetailPageURL'
])
});
// call the superclass's constructor
App.BookStore.superclass.constructor.call(this, config);
};
Ext.extend(App.BookStore, Ext.data.Store);
App.BookGrid = Ext.extend(Ext.grid.GridPanel, {
// override
initComponent : function() {
Ext.apply(this, {
// Pass in a column model definition
// Note that the DetailPageURL was defined in the record definition but is not used
// here. That is okay.
columns: [
{header: "Author", width: 120, dataIndex: 'Author', sortable: true},
{header: "Title", dataIndex: 'Title', sortable: true},
{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{header: "Product Group", dataIndex: 'ProductGroup', sortable: true}
],
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
// Note the use of a storeId, this will register thisStore
// with the StoreMgr and allow us to retrieve it very easily.
store: new App.BookStore({
storeId: 'gridBookStore',
url: 'sheldon.xml'
}),
// force the grid to fit the space which is available
viewConfig: {
forceFit: true
}
});
// finally call the superclasses implementation
App.BookGrid.superclass.initComponent.call(this);
}
});
Ext.reg('bookgrid', App.BookGrid);
/**
* App.BookDetail
* @extends Ext.Panel
* This is a specialized Panel which is used to show information about
* a book.
*
* This demonstrates adding 2 custom properties (tplMarkup and
* startingMarkup) to the class. It also overrides the initComponent
* method and adds a new method called updateDetail.
*
* The class will be registered with an xtype of 'bookdetail'
*/
App.BookDetail = Ext.extend(Ext.Panel, {
// add tplMarkup as a new property
tplMarkup: [
'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
'Author: {Author}<br/>',
'Manufacturer: {Manufacturer}<br/>',
'Product Group: {ProductGroup}<br/>'
],
// startingMarup as a new property
startingMarkup: 'Please select a book to see additional details',
// override initComponent to create and compile the template
// apply styles to the body of the panel and initialize
// html to startingMarkup
initComponent: function() {
this.tpl = new Ext.Template(this.tplMarkup);
Ext.apply(this, {
bodyStyle: {
background: '#ffffff',
padding: '7px'
},
html: this.startingMarkup
});
// call the superclass's initComponent implementation
App.BookDetail.superclass.initComponent.call(this);
},
// add a method which updates the details
updateDetail: function(data) {
this.tpl.overwrite(this.body, data);
}
});
// register the App.BookDetail class with an xtype of bookdetail
Ext.reg('bookdetail', App.BookDetail);
/**
* App.BookMasterDetail
* @extends Ext.Panel
*
* This is a specialized panel which is composed of both a bookgrid
* and a bookdetail panel. It provides the glue between the two
* components to allow them to communicate. You could consider this
* the actual application.
*
*/
App.BookMasterDetail = Ext.extend(Ext.Panel, {
// override initComponent
initComponent: function() {
// used applyIf rather than apply so user could
// override the defaults
Ext.applyIf(this, {
frame: true,
title: 'Book List',
width: 540,
height: 400,
layout: 'border',
items: [{
xtype: 'bookgrid',
itemId: 'gridPanel',
region: 'north',
height: 210,
split: true
},{
xtype: 'bookdetail',
itemId: 'detailPanel',
region: 'center'
}]
})
// call the superclass's initComponent implementation
App.BookMasterDetail.superclass.initComponent.call(this);
},
// override initEvents
initEvents: function() {
// call the superclass's initEvents implementation
App.BookMasterDetail.superclass.initEvents.call(this);
// now add application specific events
// notice we use the selectionmodel's rowselect event rather
// than a click event from the grid to provide key navigation
// as well as mouse navigation
var bookGridSm = this.getComponent('gridPanel').getSelectionModel();
bookGridSm.on('rowselect', this.onRowSelect, this);
},
// add a method called onRowSelect
// This matches the method signature as defined by the 'rowselect'
// event defined in Ext.grid.RowSelectionModel
onRowSelect: function(sm, rowIdx, r) {
// getComponent will retrieve itemId's or id's. Note that itemId's
// are scoped locally to this instance of a component to avoid
// conflicts with the ComponentMgr
var detailPanel = this.getComponent('detailPanel');
detailPanel.updateDetail(r.data);
}
});
// register an xtype with this class
Ext.reg('bookmasterdetail', App.BookMasterDetail);
// Finally now that we've defined all of our classes we can instantiate
// an instance of the app and renderTo an existing div called 'binding-example'
// Note now that classes have encapsulated this behavior we can easily create
// an instance of this app to be used in many different contexts, you could
// easily place this application in an Ext.Window for example
// create an instance of the app
var bookApp = new App.BookMasterDetail({
renderTo: 'center2'
});
// We can retrieve a reference to the data store
// via the StoreMgr by its storeId
Ext.StoreMgr.get('gridBookStore').load();
var viewport = new Ext.Viewport({
id: 'viewport-component',
layout:'border',
items:[
new Ext.BoxComponent({ // raw
id:'north-panel',
region:'north',
el: 'north',
height:32
}),{
id:'south-panel',
region:'south',
contentEl: 'south',
split:true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'South',
margins:'0 0 0 0'
}, {
id:'east-panel',
region:'east',
title: 'East Side',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items:
new Ext.TabPanel({
border:false,
activeTab:1,
tabPosition:'bottom',
items:[{
html:'<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll:true
},
new Ext.grid.PropertyGrid({
id:'propGrid',
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": .01,
"borderWidth": 1
}
})]
})
},{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
id:'west-nav',
contentEl: 'west',
title:'Navigation',
border:false,
iconCls:'nav'
},{
id:'west-settings',
title:'Settings',
html:'<p>Some settings in here.</p>',
border:false,
iconCls:'settings'
}]
},
new Ext.TabPanel({
id:'center-region',
region:'center',
deferredRender:false,
activeTab:0,
items:[{
id:'first-tab',
contentEl:'center1',
title: 'Close Me',
closable:true,
autoScroll:true
},{
id:'second-tab',
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
}]
})
]
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<div id="west">
<p>Hi. I'm the west panel.</p>
</div>
<div id="north">
<p>north - generally for menus, toolbars and/or advertisements</p>
</div>
<div id="center2">
</div>
<div id="center1">
<p>Included in ext-all-debug.js is the Ext Debug Console. It offers a limited amount of <a href="http://getfirebug.com">FireBug</a>
functionality cross browser. The most important feature is the "DOM Inspector" and CSS and DOM attribute editing. In any browser where "console"
is not already defined, the Ext console will handle console.log(), time() and other calls.
</p>
<p>
<b>Try It</b><br/>
This page includes ext-all-debug.js and some test markup so you can try it out. Click on the image below to bring up the console.
</p>
<a href="#" onclick="Ext.log('Hello from the Ext console. This is logged using the Ext.log function.');return false;"><img src="debug.png" style="margin:15px;"/></a>
<p>
The full source is available in the "source" directory of the Ext download.
</p>
</div>
<div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south">
<p>south - generally for informational stuff, also could be for status bar</p>
</div>
</body>
</html>
|
