examples/grid/grid-plugins.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.Loader.setConfig({
  16     enabled: true
  17 });
  18 Ext.Loader.setPath('Ext.ux', '../ux');
  19
  20 Ext.require([
  21     'Ext.grid.*',
  22     'Ext.data.*',
  23     'Ext.ux.RowExpander',
  24     'Ext.selection.CheckboxModel'
  25 ]);
  26
  27 Ext.onReady(function(){
  28     Ext.define('Company', {
  29         extend: 'Ext.data.Model',
  30         fields: [
  31             {name: 'company'},
  32             {name: 'price', type: 'float'},
  33             {name: 'change', type: 'float'},
  34             {name: 'pctChange', type: 'float'},
  35             {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
  36             {name: 'industry'},
  37             {name: 'desc'}
  38          ]
  39     });
  40     // Array data for the grids
  41     Ext.grid.dummyData = [
  42         ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
  43         ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
  44         ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
  45         ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
  46         ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
  47         ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
  48         ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
  49         ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
  50         ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
  51         ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
  52         ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
  53         ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
  54         ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
  55         ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
  56         ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
  57         ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
  58         ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
  59         ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
  60         ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
  61         ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
  62         ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
  63         ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
  64         ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Services', 'Medical'],
  65         ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
  66         ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
  67         ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
  68         ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
  69         ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
  70         ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
  71         ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
  72     ];
  73
  74     // add in some dummy descriptions
  75     for(var i = 0; i < Ext.grid.dummyData.length; i++){
  76         Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. ');
  77     }
  78
  79
  80     Ext.QuickTips.init();
  81
  82     var getLocalStore = function() {
  83         return Ext.create('Ext.data.ArrayStore', {
  84             model: 'Company',
  85             data: Ext.grid.dummyData
  86         });
  87     };
  88
  89
  90     ////////////////////////////////////////////////////////////////////////////////////////
  91     // Grid 1
  92     ////////////////////////////////////////////////////////////////////////////////////////
  93     // row expander
  94
  95     var grid1 = Ext.create('Ext.grid.Panel', {
  96         store: getLocalStore(),
  97         columns: [
  98             {text: "Company", flex: 1, dataIndex: 'company'},
  99             {text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
 100             {text: "Change", dataIndex: 'change'},
 101             {text: "% Change", dataIndex: 'pctChange'},
 102             {text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
 103         ],
 104         width: 600,
 105         height: 300,
 106         plugins: [{
 107             ptype: 'rowexpander',
 108             rowBodyTpl : [
 109                 '<p><b>Company:</b> {company}</p><br>',
 110                 '<p><b>Summary:</b> {desc}</p>'
 111             ]
 112         }],
 113         collapsible: true,
 114         animCollapse: false,
 115         title: 'Expander Rows in a Collapsible Grid',
 116         iconCls: 'icon-grid',
 117         renderTo: Ext.getBody()
 118     });
 119
 120     ////////////////////////////////////////////////////////////////////////////////////////
 121     // Grid 2
 122     ////////////////////////////////////////////////////////////////////////////////////////
 123     var sm = Ext.create('Ext.selection.CheckboxModel');
 124     var grid2 = Ext.create('Ext.grid.Panel', {
 125         store: getLocalStore(),
 126         selModel: sm,
 127         columns: [
 128             {text: "Company", width: 200, dataIndex: 'company'},
 129             {text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
 130             {text: "Change", dataIndex: 'change'},
 131             {text: "% Change", dataIndex: 'pctChange'},
 132             {text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
 133         ],
 134         columnLines: true,
 135         width: 600,
 136         height: 300,
 137         frame: true,
 138         title: 'Framed with Checkbox Selection and Horizontal Scrolling',
 139         iconCls: 'icon-grid',
 140         renderTo: Ext.getBody()
 141     });
 142
 143     ////////////////////////////////////////////////////////////////////////////////////////
 144     // Grid 3
 145     ////////////////////////////////////////////////////////////////////////////////////////
 146     var grid3 = Ext.create('Ext.grid.Panel', {
 147         store: getLocalStore(),
 148         columns: [
 149             Ext.create('Ext.grid.RowNumberer'),
 150             {text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
 151             {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
 152             {text: "Change", width: 120, sortable: true, dataIndex: 'change'},
 153             {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
 154             {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
 155         ],
 156         columnLines: true,
 157         width:600,
 158         height:300,
 159         title:'Grid with Numbered Rows',
 160         iconCls:'icon-grid',
 161         renderTo: Ext.getBody()
 162     });
 163
 164     ////////////////////////////////////////////////////////////////////////////////////////
 165     // Grid 4
 166     ////////////////////////////////////////////////////////////////////////////////////////
 167     var selModel = Ext.create('Ext.selection.CheckboxModel', {
 168         listeners: {
 169             selectionchange: function(sm, selections) {
 170                 grid4.down('#removeButton').setDisabled(selections.length == 0);
 171             }
 172         }
 173     });
 174
 175     var grid4 = Ext.create('Ext.grid.Panel', {
 176         id:'button-grid',
 177         store: getLocalStore(),
 178         columns: [
 179             {text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
 180             {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
 181             {text: "Change", width: 120, sortable: true, dataIndex: 'change'},
 182             {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
 183             {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
 184         ],
 185         columnLines: true,
 186         selModel: selModel,
 187
 188         // inline buttons
 189         dockedItems: [{
 190             xtype: 'toolbar',
 191             dock: 'bottom',
 192             ui: 'footer',
 193             layout: {
 194                 pack: 'center'
 195             },
 196             items: [{
 197                 minWidth: 80,
 198                 text: 'Save'
 199             },{
 200                 minWidth: 80,
 201                 text: 'Cancel'
 202             }]
 203         }, {
 204             xtype: 'toolbar',
 205             items: [{
 206                 text:'Add Something',
 207                 tooltip:'Add a new row',
 208                 iconCls:'add'
 209             }, '-', {
 210                 text:'Options',
 211                 tooltip:'Set options',
 212                 iconCls:'option'
 213             },'-',{
 214                 itemId: 'removeButton',
 215                 text:'Remove Something',
 216                 tooltip:'Remove the selected item',
 217                 iconCls:'remove',
 218                 disabled: true
 219             }]
 220         }],
 221
 222         width: 600,
 223         height: 300,
 224         frame: true,
 225         title: 'Support for standard Panel features such as framing, buttons and toolbars',
 226         iconCls: 'icon-grid',
 227         renderTo: Ext.getBody()
 228     });
 229 });
 230