source: trunk/web/addons/job_monarch/lib/extjs/examples/grid/grid3.js @ 619

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

lib/:

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