Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / examples / grid / binding-with-classes.js
index eb596dc..90a1dd0 100644 (file)
-/*!
- * Ext JS Library 3.2.2
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.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'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: <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);
+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
@@ -209,11 +222,11 @@ Ext.reg('bookmasterdetail', App.BookMasterDetail);
 // 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
+    // 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();
+});