examples/grid/grid-plugins.js

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