+++ /dev/null
-<html>\r
-<head>\r
- <title>Debug Console</title>\r
- <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />\r
- <link rel="stylesheet" type="text/css" href="../../resources/css/debug.css" />\r
-\r
- <!-- GC -->\r
- <!-- LIBS -->\r
- <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>\r
- <!-- ENDLIBS -->\r
-\r
- <script type="text/javascript" src="../../ext-all.js"></script>\r
- <script type="text/javascript" src="../../src/debug.js"></script>\r
-\r
- <style type="text/css">\r
- html, body {\r
- font:normal 12px verdana;\r
- margin:0;\r
- padding:0;\r
- border:0 none;\r
- overflow:hidden;\r
- height:100%;\r
- }\r
- p {\r
- margin:5px;\r
- }\r
- .settings {\r
- background-image:url(../shared/icons/fam/folder_wrench.png);\r
- }\r
- .nav {\r
- background-image:url(../shared/icons/fam/folder_go.png);\r
- }\r
- </style>\r
- <script type="text/javascript">\r
- Ext.onReady(function(){\r
-\r
- Ext.state.Manager.setProvider(new Ext.state.CookieProvider());\r
-\r
-Ext.ns('App');\r
-\r
-App.BookStore = function(config) {\r
- var config = config || {};\r
- Ext.applyIf(config, {\r
- reader: new Ext.data.XmlReader({\r
- // records will have an "Item" tag\r
- record: 'Item',\r
- id: 'ASIN',\r
- totalRecords: '@total'\r
- }, [\r
- // set up the fields mapping into the xml doc\r
- // The first needs mapping, the others are very basic\r
- {name: 'Author', mapping: 'ItemAttributes > Author'},\r
- 'Title',\r
- 'Manufacturer',\r
- 'ProductGroup',\r
- // Detail URL is not part of the column model of the grid\r
- 'DetailPageURL'\r
- ])\r
- });\r
- // call the superclass's constructor\r
- App.BookStore.superclass.constructor.call(this, config);\r
-};\r
-Ext.extend(App.BookStore, Ext.data.Store);\r
-\r
-\r
-\r
-App.BookGrid = Ext.extend(Ext.grid.GridPanel, {\r
- // override\r
- initComponent : function() {\r
- Ext.apply(this, {\r
- // Pass in a column model definition\r
- // Note that the DetailPageURL was defined in the record definition but is not used\r
- // here. That is okay.\r
- columns: [\r
- {header: "Author", width: 120, dataIndex: 'Author', sortable: true},\r
- {header: "Title", dataIndex: 'Title', sortable: true},\r
- {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},\r
- {header: "Product Group", dataIndex: 'ProductGroup', sortable: true}\r
- ],\r
- sm: new Ext.grid.RowSelectionModel({singleSelect: true}),\r
- // Note the use of a storeId, this will register thisStore\r
- // with the StoreMgr and allow us to retrieve it very easily.\r
- store: new App.BookStore({\r
- storeId: 'gridBookStore',\r
- url: 'sheldon.xml'\r
- }),\r
- // force the grid to fit the space which is available\r
- viewConfig: {\r
- forceFit: true\r
- }\r
- });\r
- // finally call the superclasses implementation\r
- App.BookGrid.superclass.initComponent.call(this);\r
- }\r
-});\r
-Ext.reg('bookgrid', App.BookGrid);\r
-\r
-\r
-/**\r
- * App.BookDetail\r
- * @extends Ext.Panel\r
- * This is a specialized Panel which is used to show information about\r
- * a book.\r
- *\r
- * This demonstrates adding 2 custom properties (tplMarkup and\r
- * startingMarkup) to the class. It also overrides the initComponent\r
- * method and adds a new method called updateDetail.\r
- *\r
- * The class will be registered with an xtype of 'bookdetail'\r
- */\r
-App.BookDetail = Ext.extend(Ext.Panel, {\r
- // add tplMarkup as a new property\r
- tplMarkup: [\r
- 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',\r
- 'Author: {Author}<br/>',\r
- 'Manufacturer: {Manufacturer}<br/>',\r
- 'Product Group: {ProductGroup}<br/>'\r
- ],\r
- // startingMarup as a new property\r
- startingMarkup: 'Please select a book to see additional details',\r
- // override initComponent to create and compile the template\r
- // apply styles to the body of the panel and initialize\r
- // html to startingMarkup\r
- initComponent: function() {\r
- this.tpl = new Ext.Template(this.tplMarkup);\r
- Ext.apply(this, {\r
- bodyStyle: {\r
- background: '#ffffff',\r
- padding: '7px'\r
- },\r
- html: this.startingMarkup\r
- });\r
- // call the superclass's initComponent implementation\r
- App.BookDetail.superclass.initComponent.call(this);\r
- },\r
- // add a method which updates the details\r
- updateDetail: function(data) {\r
- this.tpl.overwrite(this.body, data);\r
- }\r
-});\r
-// register the App.BookDetail class with an xtype of bookdetail\r
-Ext.reg('bookdetail', App.BookDetail);\r
-\r
-\r
-/**\r
- * App.BookMasterDetail\r
- * @extends Ext.Panel\r
- *\r
- * This is a specialized panel which is composed of both a bookgrid\r
- * and a bookdetail panel. It provides the glue between the two\r
- * components to allow them to communicate. You could consider this\r
- * the actual application.\r
- *\r
- */\r
-App.BookMasterDetail = Ext.extend(Ext.Panel, {\r
- // override initComponent\r
- initComponent: function() {\r
- // used applyIf rather than apply so user could\r
- // override the defaults\r
- Ext.applyIf(this, {\r
- frame: true,\r
- title: 'Book List',\r
- width: 540,\r
- height: 400,\r
- layout: 'border',\r
- items: [{\r
- xtype: 'bookgrid',\r
- itemId: 'gridPanel',\r
- region: 'north',\r
- height: 210,\r
- split: true\r
- },{\r
- xtype: 'bookdetail',\r
- itemId: 'detailPanel',\r
- region: 'center'\r
- }]\r
- })\r
- // call the superclass's initComponent implementation\r
- App.BookMasterDetail.superclass.initComponent.call(this);\r
- },\r
- // override initEvents\r
- initEvents: function() {\r
- // call the superclass's initEvents implementation\r
- App.BookMasterDetail.superclass.initEvents.call(this);\r
-\r
- // now add application specific events\r
- // notice we use the selectionmodel's rowselect event rather\r
- // than a click event from the grid to provide key navigation\r
- // as well as mouse navigation\r
- var bookGridSm = this.getComponent('gridPanel').getSelectionModel();\r
- bookGridSm.on('rowselect', this.onRowSelect, this);\r
- },\r
- // add a method called onRowSelect\r
- // This matches the method signature as defined by the 'rowselect'\r
- // event defined in Ext.grid.RowSelectionModel\r
- onRowSelect: function(sm, rowIdx, r) {\r
- // getComponent will retrieve itemId's or id's. Note that itemId's\r
- // are scoped locally to this instance of a component to avoid\r
- // conflicts with the ComponentMgr\r
- var detailPanel = this.getComponent('detailPanel');\r
- detailPanel.updateDetail(r.data);\r
- }\r
-});\r
-// register an xtype with this class\r
-Ext.reg('bookmasterdetail', App.BookMasterDetail);\r
-\r
-\r
-// Finally now that we've defined all of our classes we can instantiate\r
-// an instance of the app and renderTo an existing div called 'binding-example'\r
-// Note now that classes have encapsulated this behavior we can easily create\r
-// an instance of this app to be used in many different contexts, you could\r
-// easily place this application in an Ext.Window for example\r
- // create an instance of the app\r
- var bookApp = new App.BookMasterDetail({\r
- renderTo: 'center2'\r
- });\r
- // We can retrieve a reference to the data store\r
- // via the StoreMgr by its storeId\r
- Ext.StoreMgr.get('gridBookStore').load();\r
-\r
-\r
-\r
-\r
- var viewport = new Ext.Viewport({\r
- id: 'viewport-component',\r
- layout:'border',\r
- items:[\r
- new Ext.BoxComponent({ // raw\r
- id:'north-panel',\r
- region:'north',\r
- el: 'north',\r
- height:32\r
- }),{\r
- id:'south-panel',\r
- region:'south',\r
- contentEl: 'south',\r
- split:true,\r
- height: 100,\r
- minSize: 100,\r
- maxSize: 200,\r
- collapsible: true,\r
- title:'South',\r
- margins:'0 0 0 0'\r
- }, {\r
- id:'east-panel',\r
- region:'east',\r
- title: 'East Side',\r
- collapsible: true,\r
- split:true,\r
- width: 225,\r
- minSize: 175,\r
- maxSize: 400,\r
- layout:'fit',\r
- margins:'0 5 0 0',\r
- items:\r
- new Ext.TabPanel({\r
- border:false,\r
- activeTab:1,\r
- tabPosition:'bottom',\r
- items:[{\r
- html:'<p>A TabPanel component can be a region.</p>',\r
- title: 'A Tab',\r
- autoScroll:true\r
- },\r
- new Ext.grid.PropertyGrid({\r
- id:'propGrid',\r
- title: 'Property Grid',\r
- closable: true,\r
- source: {\r
- "(name)": "Properties Grid",\r
- "grouping": false,\r
- "autoFitColumns": true,\r
- "productionQuality": false,\r
- "created": new Date(Date.parse('10/15/2006')),\r
- "tested": false,\r
- "version": .01,\r
- "borderWidth": 1\r
- }\r
- })]\r
- })\r
- },{\r
- region:'west',\r
- id:'west-panel',\r
- title:'West',\r
- split:true,\r
- width: 200,\r
- minSize: 175,\r
- maxSize: 400,\r
- collapsible: true,\r
- margins:'0 0 0 5',\r
- layout:'accordion',\r
- layoutConfig:{\r
- animate:true\r
- },\r
- items: [{\r
- id:'west-nav',\r
- contentEl: 'west',\r
- title:'Navigation',\r
- border:false,\r
- iconCls:'nav'\r
- },{\r
- id:'west-settings',\r
- title:'Settings',\r
- html:'<p>Some settings in here.</p>',\r
- border:false,\r
- iconCls:'settings'\r
- }]\r
- },\r
- new Ext.TabPanel({\r
- id:'center-region',\r
- region:'center',\r
- deferredRender:false,\r
- activeTab:0,\r
- items:[{\r
- id:'first-tab',\r
- contentEl:'center1',\r
- title: 'Close Me',\r
- closable:true,\r
- autoScroll:true\r
- },{\r
- id:'second-tab',\r
- contentEl:'center2',\r
- title: 'Center Panel',\r
- autoScroll:true\r
- }]\r
- })\r
- ]\r
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->\r
- <div id="west">\r
- <p>Hi. I'm the west panel.</p>\r
- </div>\r
- <div id="north">\r
- <p>north - generally for menus, toolbars and/or advertisements</p>\r
- </div>\r
- <div id="center2">\r
- </div>\r
- <div id="center1">\r
- <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
- functionality cross browser. The most important feature is the "DOM Inspector" and CSS and DOM attribute editing. In any browser where "console"\r
- is not already defined, the Ext console will handle console.log(), time() and other calls.\r
- </p>\r
- <p>\r
- <b>Try It</b><br/>\r
- 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
- </p>\r
- <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
-\r
- <p>\r
- The full source is available in the "source" directory of the Ext download.\r
- </p>\r
- </div>\r
- <div id="props-panel" style="width:200px;height:200px;overflow:hidden;">\r
- </div>\r
- <div id="south">\r
- <p>south - generally for informational stuff, also could be for status bar</p>\r
- </div>\r
-\r
- </body>\r
-</html>\r
git.ithinksw.org / extjs.git / blobdiff