source: trunk/web/addons/job_monarch/lib/extjs-30/examples/grid/grid-plugins.js @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

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