X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..6b044c28b5f26fb99c86c237ffad19741c0f7f3d:/examples/grid/binding-with-classes.js?ds=inline diff --git a/examples/grid/binding-with-classes.js b/examples/grid/binding-with-classes.js index 37f11d2b..66979316 100644 --- a/examples/grid/binding-with-classes.js +++ b/examples/grid/binding-with-classes.js @@ -1,221 +1,219 @@ -/* - * Ext JS Library 2.2.1 - * Copyright(c) 2006-2009, Ext JS, LLC. - * licensing@extjs.com - * - * http://extjs.com/license - */ - -// setup an App namespace -// This is done to prevent collisions in the global namespace -Ext.ns('App'); - -/** - * App.BookStore - * @extends Ext.data.Store - * @cfg {String} url This will be a url of a location to load the BookStore - * This is a specialized Store which maintains books. - * It already knows about Amazon's XML definition and will expose the following - * Record defintion: - * - Author - * - Manufacturer - * - ProductGroup - * - DetailPageURL - */ -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 - * @extends Ext.grid.GridPanel - * This is a custom grid which will display book information. It is tied to - * a specific record definition by the dataIndex properties. - * - * It follows a very custom pattern used only when extending Ext.Components - * in which you can omit the constructor. - * - * It also registers the class with the Component Manager with an xtype of - * bookgrid. This allows the application to take care of the lazy-instatiation - * facilities provided in Ext 2.0's Component Model. - */ -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); - } -}); -// This will associate an string representation of a class -// (called an xtype) with the Component Manager -// It allows you to support lazy instantiation of your components -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: {Title}
', - 'Author: {Author}
', - 'Manufacturer: {Manufacturer}
', - 'Product Group: {ProductGroup}
' - ], - // 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 -Ext.onReady(function() { - // create an instance of the app - var bookApp = new App.BookMasterDetail({ - renderTo: 'binding-example' - }); - // We can retrieve a reference to the data store - // via the StoreMgr by its storeId - Ext.StoreMgr.get('gridBookStore').load(); +/*! + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license + */ +// setup an App namespace +// This is done to prevent collisions in the global namespace +Ext.ns('App'); + +/** + * App.BookStore + * @extends Ext.data.Store + * @cfg {String} url This will be a url of a location to load the BookStore + * This is a specialized Store which maintains books. + * It already knows about Amazon's XML definition and will expose the following + * Record defintion: + * - Author + * - Manufacturer + * - ProductGroup + * - DetailPageURL + */ +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 + * @extends Ext.grid.GridPanel + * This is a custom grid which will display book information. It is tied to + * a specific record definition by the dataIndex properties. + * + * It follows a very custom pattern used only when extending Ext.Components + * in which you can omit the constructor. + * + * It also registers the class with the Component Manager with an xtype of + * bookgrid. This allows the application to take care of the lazy-instatiation + * facilities provided in Ext's Component Model. + */ +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); + } +}); +// This will associate an string representation of a class +// (called an xtype) with the Component Manager +// It allows you to support lazy instantiation of your components +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: {Title}
', + 'Author: {Author}
', + 'Manufacturer: {Manufacturer}
', + 'Product Group: {ProductGroup}
' + ], + // 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 +Ext.onReady(function() { + // create an instance of the app + var bookApp = new App.BookMasterDetail({ + renderTo: 'binding-example' + }); + // We can retrieve a reference to the data store + // via the StoreMgr by its storeId + Ext.StoreMgr.get('gridBookStore').load(); }); \ No newline at end of file