source: trunk/web/addons/job_monarch/lib/extjs-30/examples/grid/binding-with-classes.js @ 625

/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * 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);


// 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();
});