/ext-4.0.7/examples/grid/grid-plugins.js
JavaScript | 230 lines | 184 code | 16 blank | 30 comment | 3 complexity | 368477a5d35221c18e05efb79e7d6785 MD5 | raw file
1/*
2
3This file is part of Ext JS 4
4
5Copyright (c) 2011 Sencha Inc
6
7Contact: http://www.sencha.com/contact
8
9GNU General Public License Usage
10This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
11
12If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
13
14*/
15Ext.Loader.setConfig({
16 enabled: true
17});
18Ext.Loader.setPath('Ext.ux', '../ux');
19
20Ext.require([
21 'Ext.grid.*',
22 'Ext.data.*',
23 'Ext.ux.RowExpander',
24 'Ext.selection.CheckboxModel'
25]);
26
27Ext.onReady(function(){
28 Ext.define('Company', {
29 extend: 'Ext.data.Model',
30 fields: [
31 {name: 'company'},
32 {name: 'price', type: 'float'},
33 {name: 'change', type: 'float'},
34 {name: 'pctChange', type: 'float'},
35 {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
36 {name: 'industry'},
37 {name: 'desc'}
38 ]
39 });
40 // Array data for the grids
41 Ext.grid.dummyData = [
42 ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
43 ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
44 ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
45 ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
46 ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
47 ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
48 ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
49 ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
50 ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
51 ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
52 ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
53 ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
54 ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
55 ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
56 ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
57 ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
58 ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
59 ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
60 ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
61 ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
62 ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
63 ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
64 ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Services', 'Medical'],
65 ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
66 ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
67 ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
68 ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
69 ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
70 ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
71 ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
72 ];
73
74 // add in some dummy descriptions
75 for(var i = 0; i < Ext.grid.dummyData.length; i++){
76 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. ');
77 }
78
79
80 Ext.QuickTips.init();
81
82 var getLocalStore = function() {
83 return Ext.create('Ext.data.ArrayStore', {
84 model: 'Company',
85 data: Ext.grid.dummyData
86 });
87 };
88
89
90 ////////////////////////////////////////////////////////////////////////////////////////
91 // Grid 1
92 ////////////////////////////////////////////////////////////////////////////////////////
93 // row expander
94
95 var grid1 = Ext.create('Ext.grid.Panel', {
96 store: getLocalStore(),
97 columns: [
98 {text: "Company", flex: 1, dataIndex: 'company'},
99 {text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
100 {text: "Change", dataIndex: 'change'},
101 {text: "% Change", dataIndex: 'pctChange'},
102 {text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
103 ],
104 width: 600,
105 height: 300,
106 plugins: [{
107 ptype: 'rowexpander',
108 rowBodyTpl : [
109 '<p><b>Company:</b> {company}</p><br>',
110 '<p><b>Summary:</b> {desc}</p>'
111 ]
112 }],
113 collapsible: true,
114 animCollapse: false,
115 title: 'Expander Rows in a Collapsible Grid',
116 iconCls: 'icon-grid',
117 renderTo: Ext.getBody()
118 });
119
120 ////////////////////////////////////////////////////////////////////////////////////////
121 // Grid 2
122 ////////////////////////////////////////////////////////////////////////////////////////
123 var sm = Ext.create('Ext.selection.CheckboxModel');
124 var grid2 = Ext.create('Ext.grid.Panel', {
125 store: getLocalStore(),
126 selModel: sm,
127 columns: [
128 {text: "Company", width: 200, dataIndex: 'company'},
129 {text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
130 {text: "Change", dataIndex: 'change'},
131 {text: "% Change", dataIndex: 'pctChange'},
132 {text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
133 ],
134 columnLines: true,
135 width: 600,
136 height: 300,
137 frame: true,
138 title: 'Framed with Checkbox Selection and Horizontal Scrolling',
139 iconCls: 'icon-grid',
140 renderTo: Ext.getBody()
141 });
142
143 ////////////////////////////////////////////////////////////////////////////////////////
144 // Grid 3
145 ////////////////////////////////////////////////////////////////////////////////////////
146 var grid3 = Ext.create('Ext.grid.Panel', {
147 store: getLocalStore(),
148 columns: [
149 Ext.create('Ext.grid.RowNumberer'),
150 {text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
151 {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
152 {text: "Change", width: 120, sortable: true, dataIndex: 'change'},
153 {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
154 {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
155 ],
156 columnLines: true,
157 width:600,
158 height:300,
159 title:'Grid with Numbered Rows',
160 iconCls:'icon-grid',
161 renderTo: Ext.getBody()
162 });
163
164 ////////////////////////////////////////////////////////////////////////////////////////
165 // Grid 4
166 ////////////////////////////////////////////////////////////////////////////////////////
167 var selModel = Ext.create('Ext.selection.CheckboxModel', {
168 listeners: {
169 selectionchange: function(sm, selections) {
170 grid4.down('#removeButton').setDisabled(selections.length == 0);
171 }
172 }
173 });
174
175 var grid4 = Ext.create('Ext.grid.Panel', {
176 id:'button-grid',
177 store: getLocalStore(),
178 columns: [
179 {text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
180 {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
181 {text: "Change", width: 120, sortable: true, dataIndex: 'change'},
182 {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
183 {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
184 ],
185 columnLines: true,
186 selModel: selModel,
187
188 // inline buttons
189 dockedItems: [{
190 xtype: 'toolbar',
191 dock: 'bottom',
192 ui: 'footer',
193 layout: {
194 pack: 'center'
195 },
196 items: [{
197 minWidth: 80,
198 text: 'Save'
199 },{
200 minWidth: 80,
201 text: 'Cancel'
202 }]
203 }, {
204 xtype: 'toolbar',
205 items: [{
206 text:'Add Something',
207 tooltip:'Add a new row',
208 iconCls:'add'
209 }, '-', {
210 text:'Options',
211 tooltip:'Set options',
212 iconCls:'option'
213 },'-',{
214 itemId: 'removeButton',
215 text:'Remove Something',
216 tooltip:'Remove the selected item',
217 iconCls:'remove',
218 disabled: true
219 }]
220 }],
221
222 width: 600,
223 height: 300,
224 frame: true,
225 title: 'Support for standard Panel features such as framing, buttons and toolbars',
226 iconCls: 'icon-grid',
227 renderTo: Ext.getBody()
228 });
229});
230