examples/debug/debug-console.html

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