-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-// setup an App namespace\r
-// This is done to prevent collisions in the global namespace\r
-Ext.ns('App');\r
-\r
-/**\r
- * App.BookStore\r
- * @extends Ext.data.Store\r
- * @cfg {String} url This will be a url of a location to load the BookStore\r
- * This is a specialized Store which maintains books.\r
- * It already knows about Amazon's XML definition and will expose the following \r
- * Record defintion:\r
- * - Author\r
- * - Manufacturer\r
- * - ProductGroup\r
- * - DetailPageURL\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
-/**\r
- * App.BookGrid\r
- * @extends Ext.grid.GridPanel\r
- * This is a custom grid which will display book information. It is tied to \r
- * a specific record definition by the dataIndex properties. \r
- * \r
- * It follows a very custom pattern used only when extending Ext.Components\r
- * in which you can omit the constructor.\r
- * \r
- * It also registers the class with the Component Manager with an xtype of\r
- * bookgrid. This allows the application to take care of the lazy-instatiation\r
- * facilities provided in Ext 2.0's Component Model.\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
-// This will associate an string representation of a class\r
-// (called an xtype) with the Component Manager\r
-// It allows you to support lazy instantiation of your components\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
-Ext.onReady(function() {\r
- // create an instance of the app\r
- var bookApp = new App.BookMasterDetail({\r
- renderTo: 'binding-example'\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
-});
\ No newline at end of file
+Ext.require([
+ 'Ext.grid.*',
+ 'Ext.data.*',
+ 'Ext.panel.*',
+ 'Ext.layout.container.Border'
+]);
+Ext.Loader.onReady(function() {
+ Ext.define('Book',{
+ extend: 'Ext.data.Model',
+ fields: [
+ // 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',
+ 'DetailPageURL'
+ ]
+ });
+
+
+ /**
+ * 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
+ */
+ Ext.define('App.BookStore', {
+ extend: 'Ext.data.Store',
+ constructor: function(config) {
+ config = config || {};
+
+ config.model = 'Book';
+ config.proxy = {
+ type: 'ajax',
+ url: 'sheldon.xml',
+ reader: Ext.create('Ext.data.reader.Xml', {
+ // records will have an "Item" tag
+ record: 'Item',
+ id: 'ASIN',
+ totalRecords: '@total'
+ })
+ };
+
+ // call the superclass's constructor
+ App.BookStore.superclass.constructor.call(this, config);
+ }
+ });
+
+
+ /**
+ * App.BookGrid
+ * @extends Ext.grid.Panel
+ * 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.
+ */
+ Ext.define('App.BookGrid', {
+ extend: 'Ext.grid.Panel',
+ // 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
+ alias: 'widget.bookgrid',
+
+ // override
+ initComponent : function() {
+ // Pass in a column model definition
+ // Note that the DetailPageURL was defined in the record definition but is not used
+ // here. That is okay.
+ this.columns = [
+ {text: "Author", width: 120, dataIndex: 'Author', sortable: true},
+ {text: "Title", flex: 1, dataIndex: 'Title', sortable: true},
+ {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
+ {text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
+ ];
+ // Note the use of a storeId, this will register thisStore
+ // with the StoreManager and allow us to retrieve it very easily.
+ this.store = new App.BookStore({
+ storeId: 'gridBookStore',
+ url: 'sheldon.xml'
+ });
+ // finally call the superclasses implementation
+ App.BookGrid.superclass.initComponent.call(this);
+ }
+ });
+
+
+ /**
+ * 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'
+ */
+ Ext.define('App.BookDetail', {
+ extend: 'Ext.Panel',
+ // register the App.BookDetail class with an xtype of bookdetail
+ alias: 'widget.bookdetail',
+ // 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',
+
+ bodyPadding: 7,
+ // 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 = Ext.create('Ext.Template', this.tplMarkup);
+ this.html = this.startingMarkup;
+
+ this.bodyStyle = {
+ background: '#ffffff'
+ };
+ // 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);
+ }
+ });
+
+
+ /**
+ * 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.
+ *
+ */
+ Ext.define('App.BookMasterDetail', {
+ extend: 'Ext.Panel',
+ alias: 'widget.bookmasterdetail',
+
+ frame: true,
+ title: 'Book List',
+ width: 540,
+ height: 400,
+ layout: 'border',
+
+ // override initComponent
+ initComponent: function() {
+ this.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();
+ ('selectionchange', function(sm, rs) {
+ if (rs.length) {
+ var detailPanel = Ext.getCmp('detailPanel');
+ bookTpl.overwrite(detailPanel.body, rs[0].data);
+ }
+ })
+ bookGridSm.on('selectionchange', this.onRowSelect, this);
+ },
+ // add a method called onRowSelect
+ // This matches the method signature as defined by the 'rowselect'
+ // event defined in Ext.selection.RowModel
+ onRowSelect: function(sm, rs) {
+ // 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 ComponentManager
+ if (rs.length) {
+ var detailPanel = this.getComponent('detailPanel');
+ detailPanel.updateDetail(rs[0].data);
+ }
+
+ }
+ });
+// do NOT wait until the DOM is ready to run this
+}, false);
+
+
+// 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 StoreManager by its storeId
+ Ext.data.StoreManager.get('gridBookStore').load();
+});
git.ithinksw.org / extjs.git / blobdiff