examples/grid/grid-plugins.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7
   8 Ext.onReady(function(){
   9
  10     Ext.QuickTips.init();
  11
  12     var xg = Ext.grid;
  13
  14     // shared reader
  15     var reader = new Ext.data.ArrayReader({}, [
  16        {name: 'company'},
  17        {name: 'price', type: 'float'},
  18        {name: 'change', type: 'float'},
  19        {name: 'pctChange', type: 'float'},
  20        {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
  21        {name: 'industry'},
  22        {name: 'desc'}
  23     ]);
  24
  25     ////////////////////////////////////////////////////////////////////////////////////////
  26     // Grid 1
  27     ////////////////////////////////////////////////////////////////////////////////////////
  28     // row expander
  29     var expander = new Ext.ux.grid.RowExpander({
  30         tpl : new Ext.Template(
  31             '<p><b>Company:</b> {company}</p><br>',
  32             '<p><b>Summary:</b> {desc}</p>'
  33         )
  34     });
  35
  36     var grid1 = new xg.GridPanel({
  37         store: new Ext.data.Store({
  38             reader: reader,
  39             data: xg.dummyData
  40         }),
  41         cm: new xg.ColumnModel({
  42             defaults: {
  43                 width: 20,
  44                 sortable: true
  45             },
  46             columns: [
  47                 expander,
  48                 {id:'company',header: "Company", width: 40, dataIndex: 'company'},
  49                 {header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
  50                 {header: "Change", dataIndex: 'change'},
  51                 {header: "% Change", dataIndex: 'pctChange'},
  52                 {header: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
  53             ]
  54         }),
  55         viewConfig: {
  56             forceFit:true
  57         },
  58         width: 600,
  59         height: 300,
  60         plugins: expander,
  61         collapsible: true,
  62         animCollapse: false,
  63         title: 'Expander Rows, Collapse and Force Fit',
  64         iconCls: 'icon-grid',
  65         renderTo: document.body
  66     });
  67
  68     ////////////////////////////////////////////////////////////////////////////////////////
  69     // Grid 2
  70     ////////////////////////////////////////////////////////////////////////////////////////
  71     var sm = new xg.CheckboxSelectionModel();
  72     var grid2 = new xg.GridPanel({
  73         store: new Ext.data.Store({
  74             reader: reader,
  75             data: xg.dummyData
  76         }),
  77         cm: new xg.ColumnModel({
  78             defaults: {
  79                 width: 120,
  80                 sortable: true
  81             },
  82             columns: [
  83                 sm,
  84                 {id:'company',header: "Company", width: 200, dataIndex: 'company'},
  85                 {header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
  86                 {header: "Change", dataIndex: 'change'},
  87                 {header: "% Change", dataIndex: 'pctChange'},
  88                 {header: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
  89             ]
  90         }),
  91         sm: sm,
  92         columnLines: true,
  93         width:600,
  94         height:300,
  95         frame:true,
  96         title:'Framed with Checkbox Selection and Horizontal Scrolling',
  97         iconCls:'icon-grid',
  98         renderTo: document.body
  99     });
 100
 101     ////////////////////////////////////////////////////////////////////////////////////////
 102     // Grid 3
 103     ////////////////////////////////////////////////////////////////////////////////////////
 104     var grid3 = new xg.GridPanel({
 105         store: new Ext.data.Store({
 106             reader: reader,
 107             data: xg.dummyData
 108         }),
 109         cm: new xg.ColumnModel([
 110             new xg.RowNumberer(),
 111             {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
 112             {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
 113             {header: "Change", width: 20, sortable: true, dataIndex: 'change'},
 114             {header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
 115             {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
 116         ]),
 117         viewConfig: {
 118             forceFit:true
 119         },
 120         columnLines: true,
 121         width:600,
 122         height:300,
 123         title:'Grid with Numbered Rows and Force Fit',
 124         iconCls:'icon-grid',
 125         renderTo: document.body
 126     });
 127
 128     ////////////////////////////////////////////////////////////////////////////////////////
 129     // Grid 4
 130     ////////////////////////////////////////////////////////////////////////////////////////
 131     var sm2 = new xg.CheckboxSelectionModel({
 132         listeners: {
 133             // On selection change, set enabled state of the removeButton
 134             // which was placed into the GridPanel using the ref config
 135             selectionchange: function(sm) {
 136                 if (sm.getCount()) {
 137                     grid4.removeButton.enable();
 138                 } else {
 139                     grid4.removeButton.disable();
 140                 }
 141             }
 142         }
 143     });
 144     var grid4 = new xg.GridPanel({
 145         id:'button-grid',
 146         store: new Ext.data.Store({
 147             reader: reader,
 148             data: xg.dummyData
 149         }),
 150         cm: new xg.ColumnModel([
 151             sm2,
 152             {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
 153             {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
 154             {header: "Change", width: 20, sortable: true, dataIndex: 'change'},
 155             {header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
 156             {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
 157         ]),
 158         sm: sm2,
 159
 160         viewConfig: {
 161             forceFit:true
 162         },
 163         columnLines: true,
 164
 165         // inline buttons
 166         buttons: [{text:'Save'},{text:'Cancel'}],
 167         buttonAlign:'center',
 168
 169         // inline toolbars
 170         tbar:[{
 171             text:'Add Something',
 172             tooltip:'Add a new row',
 173             iconCls:'add'
 174         }, '-', {
 175             text:'Options',
 176             tooltip:'Blah blah blah blaht',
 177             iconCls:'option'
 178         },'-',{
 179             text:'Remove Something',
 180             tooltip:'Remove the selected item',
 181             iconCls:'remove',
 182
 183             // Place a reference in the GridPanel
 184             ref: '../removeButton',
 185             disabled: true
 186         }],
 187
 188         width:600,
 189         height:300,
 190         frame:true,
 191         title:'Support for standard Panel features such as framing, buttons and toolbars',
 192         iconCls:'icon-grid',
 193         renderTo: document.body
 194     });
 195 });
 196
 197
 198
 199 // Array data for the grids
 200 Ext.grid.dummyData = [
 201     ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
 202     ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
 203     ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
 204     ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
 205     ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
 206     ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
 207     ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
 208     ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
 209     ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
 210     ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
 211     ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
 212     ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
 213     ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
 214     ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
 215     ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
 216     ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
 217     ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
 218     ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
 219     ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
 220     ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
 221     ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
 222     ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
 223     ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Services', 'Medical'],
 224     ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
 225     ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
 226     ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
 227     ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
 228     ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
 229     ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
 230     ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
 231 ];
 232
 233 // add in some dummy descriptions
 234 for(var i = 0; i < Ext.grid.dummyData.length; i++){
 235     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. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');
 236 }