extjs/examples/kitchensink/classic/samples/view/grid/XmlGrid.js

   1 /**
   2  * This example shows how to create a grid from XML data. The grid is stateful so you can
   3  * move or hide columns, reload the page, and come back to the grid in the same state you
   4  * left it in.
   5  *
   6  * The cells are selectable due to use of the `enableTextSelection` option.
   7  */
   8 Ext.define('KitchenSink.view.grid.XmlGrid', {
   9     extend: 'Ext.grid.Panel',
  10     requires: [
  11         'Ext.grid.column.Column',
  12         'KitchenSink.store.Books'
  13     ],
  14     xtype: 'xml-grid',
  15     store: {
  16         type: 'books'
  17     },
  18     stateful: true,
  19     collapsible: true,
  20     multiSelect: true,
  21     stateId: 'stateXmlGrid',
  22     height: 350,
  23     title: 'XML Grid',
  24     viewConfig: {
  25         enableTextSelection: true
  26     },
  27     //<example>
  28     otherContent: [{
  29         type: 'Store',
  30         path: 'classic/samples/store/Books.js'
  31     },{
  32         type: 'Model',
  33         path: 'classic/samples/model/grid/Book.js'
  34     }],
  35     profiles: {
  36         classic: {
  37             width: 600,
  38             percentChangeColumnWidth: 75,
  39             lastUpdatedColumnWidth: 85,
  40             green: 'green',
  41             red: 'red'
  42         },
  43         neptune: {
  44             width: 650,
  45             percentChangeColumnWidth: 100,
  46             lastUpdatedColumnWidth: 115,
  47             green: '#73b51e',
  48             red: '#cf4c35'
  49         }
  50     },
  51     //</example>
  52
  53     initComponent: function () {
  54         var me = this;
  55
  56         me.width = this.profileInfo.width;
  57         me.columns = [
  58             {text: "Author", flex: 1, dataIndex: 'Author'},
  59             {text: "Title", width: 180, dataIndex: 'Title'},
  60             {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
  61             {text: "Product Group", width: 100, dataIndex: 'ProductGroup'}
  62         ];
  63
  64         me.callParent();
  65
  66         this.on('afterlayout', this.loadStore, this, {
  67             delay: 1,
  68             single: true
  69         });
  70     },
  71
  72     loadStore: function() {
  73         this.getStore().load();
  74     }
  75 });