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