examples/grid/grid3.js

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