+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>
git.ithinksw.org / extjs.git / blobdiff