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