-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-<title>Ext Debug Console</title>
-<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
-
- <!-- GC -->
- <!-- LIBS -->
- <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
- <!-- ENDLIBS -->
-
-
- <script type="text/javascript" src="../../ext-all-debug.js"></script>
-
-<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
-
-</head>
-<body>
-<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
- <h1>Ext Debug Console</h1>
- <div style="width:700px">
- <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. Hit <b>control+shift+home</b> to bring up the console or click on the image below.
- </p>
- <a href="#" onclick="Ext.log('Hello from the Ext console.');return false;"><img src="inspector.gif" width="600" height="337" style="margin:15px;"/></a>
-
- <p>
- The full source is available in the "source" directory of the Ext download.
- </p>
- <hr />
- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
- <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
- <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
- <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
- <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
- <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
- <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
- <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
-</div></body>
-</html>
+<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="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="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