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>