source: trunk/web/addons/job_monarch/lib/extjs-30/examples/grid/row-editor.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: 9.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 */
7Ext.onReady(function(){
8    Ext.QuickTips.init();
9
10    var Employee = Ext.data.Record.create([{
11        name: 'name',
12        type: 'string'
13    }, {
14        name: 'email',
15        type: 'string'
16    }, {
17        name: 'start',
18        type: 'date',
19        dateFormat: 'n/j/Y'
20    },{
21        name: 'salary',
22        type: 'float'
23    },{
24        name: 'active',
25        type: 'bool'
26    }]);
27
28
29    // hideous function to generate employee data
30    var genData = function(){
31        var data = [];
32        var s = new Date(2007, 0, 1);
33        var now = new Date(), i = -1;
34        while(s.getTime() < now.getTime()){
35            var ecount = Ext.ux.getRandomInt(0, 3);
36            for(var i = 0; i < ecount; i++){
37                var name = Ext.ux.generateName();
38                data.push({
39                    start : s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)),
40                    name : name,
41                    email: name.toLowerCase().replace(' ', '.') + '@exttest.com',
42                    active: true,
43                    salary: Math.floor(Ext.ux.getRandomInt(35000, 85000)/1000)*1000
44                });
45            }
46            s = s.add(Date.MONTH, 1);
47        }
48        return data;
49    }
50
51
52    var store = new Ext.data.GroupingStore({
53        reader: new Ext.data.JsonReader({fields: Employee}),
54        data: genData(),
55        sortInfo: {field: 'start', direction: 'ASC'}
56    });
57
58    var editor = new Ext.ux.grid.RowEditor({
59        saveText: 'Update'
60    });
61
62    var grid = new Ext.grid.GridPanel({
63        store: store,
64        width: 600,
65        region:'center',
66        margins: '0 5 5 5',
67        autoExpandColumn: 'name',
68        plugins: [editor],
69        view: new Ext.grid.GroupingView({
70            markDirty: false
71        }),
72        tbar: [{
73            iconCls: 'icon-user-add',
74            text: 'Add Employee',
75            handler: function(){
76                var e = new Employee({
77                    name: 'New Guy',
78                    email: 'new@exttest.com',
79                    start: (new Date()).clearTime(),
80                    salary: 50000,
81                    active: true
82                });
83                editor.stopEditing();
84                store.insert(0, e);
85                grid.getView().refresh();
86                grid.getSelectionModel().selectRow(0);
87                editor.startEditing(0);
88            }
89        },{
90            ref: '../removeBtn',
91            iconCls: 'icon-user-delete',
92            text: 'Remove Employee',
93            disabled: true,
94            handler: function(){
95                editor.stopEditing();
96                var s = grid.getSelectionModel().getSelections();
97                for(var i = 0, r; r = s[i]; i++){
98                    store.remove(r);
99                }
100            }
101        }],
102
103        columns: [
104        new Ext.grid.RowNumberer(),
105        {
106            id: 'name',
107            header: 'First Name',
108            dataIndex: 'name',
109            width: 220,
110            sortable: true,
111            editor: {
112                xtype: 'textfield',
113                allowBlank: false
114            }
115        },{
116            header: 'Email',
117            dataIndex: 'email',
118            width: 150,
119            sortable: true,
120            editor: {
121                xtype: 'textfield',
122                allowBlank: false,
123                vtype: 'email'
124            }
125        },{
126            xtype: 'datecolumn',
127            header: 'Start Date',
128            dataIndex: 'start',
129            format: 'm/d/Y',
130            width: 100,
131            sortable: true,
132            groupRenderer: Ext.util.Format.dateRenderer('M y'),
133            editor: {
134                xtype: 'datefield',
135                allowBlank: false,
136                minValue: '01/01/2006',
137                minText: 'Can\'t have a start date before the company existed!',
138                maxValue: (new Date()).format('m/d/Y')
139            }
140        },{
141            xtype: 'numbercolumn',
142            header: 'Salary',
143            dataIndex: 'salary',
144            format: '$0,0.00',
145            width: 100,
146            sortable: true,
147            editor: {
148                xtype: 'numberfield',
149                allowBlank: false,
150                minValue: 1,
151                maxValue: 150000
152            }
153        },{
154            xtype: 'booleancolumn',
155            header: 'Active',
156            dataIndex: 'active',
157            align: 'center',
158            width: 50,
159            trueText: 'Yes',
160            falseText: 'No',
161            editor: {
162                xtype: 'checkbox'
163            }
164        }]
165    });
166
167    var cstore = new Ext.data.JsonStore({
168        fields:['month', 'employees', 'salary'],
169        data:[],
170        refreshData: function(){
171            var o = {}, data = [];
172            var s = new Date(2007, 0, 1);
173            var now = new Date(), i = -1;
174            while(s.getTime() < now.getTime()){
175                var m = {
176                    month: s.format('M y'),
177                    employees: 0,
178                    salary: 0,
179                    index: ++i
180                }
181                data.push(m);
182                o[m.month] = m;
183                s = s.add(Date.MONTH, 1);
184            }
185            store.each(function(r){
186                var m = o[r.data.start.format('M y')];
187                for(var i = m.index, mo; mo = data[i]; i++){
188                    mo.employees += 10000;
189                    mo.salary += r.data.salary;
190                }
191            });
192            this.loadData(data);
193        }
194    });
195    cstore.refreshData();
196    store.on('add', cstore.refreshData, cstore);
197    store.on('remove', cstore.refreshData, cstore);
198    store.on('update', cstore.refreshData, cstore);
199
200    var chart = new Ext.Panel({
201        width:600,
202        height:200,
203        layout:'fit',
204        margins: '5 5 0',
205        region: 'north',
206        split: true,
207        minHeight: 100,
208        maxHeight: 500,
209
210        items: {
211            xtype: 'columnchart',
212            store: cstore,
213            url:'../../resources/charts.swf',
214            xField: 'month',
215            yAxis: new Ext.chart.NumericAxis({
216                displayName: 'Employees',
217                labelRenderer : Ext.util.Format.numberRenderer('0,0')
218            }),
219            tipRenderer : function(chart, record, index, series){
220                if(series.yField == 'salary'){
221                    return Ext.util.Format.number(record.data.salary, '$0,0') + ' total salary in ' + record.data.month;
222                }else{
223                    return Ext.util.Format.number(Math.floor(record.data.employees/10000), '0,0') + ' total employees in ' + record.data.month;
224                }
225            },
226
227            // style chart so it looks pretty
228            chartStyle: {
229                padding: 10,
230                animationEnabled: true,
231                font: {
232                    name: 'Tahoma',
233                    color: 0x444444,
234                    size: 11
235                },
236                dataTip: {
237                    padding: 5,
238                    border: {
239                        color: 0x99bbe8,
240                        size:1
241                    },
242                    background: {
243                        color: 0xDAE7F6,
244                        alpha: .9
245                    },
246                    font: {
247                        name: 'Tahoma',
248                        color: 0x15428B,
249                        size: 10,
250                        bold: true
251                    }
252                },
253                xAxis: {
254                    color: 0x69aBc8,
255                    majorTicks: {color: 0x69aBc8, length: 4},
256                    minorTicks: {color: 0x69aBc8, length: 2},
257                    majorGridLines: {size: 1, color: 0xeeeeee}
258                },
259                yAxis: {
260                    color: 0x69aBc8,
261                    majorTicks: {color: 0x69aBc8, length: 4},
262                    minorTicks: {color: 0x69aBc8, length: 2},
263                    majorGridLines: {size: 1, color: 0xdfe8f6}
264                }
265            },
266            series: [{
267                type: 'column',
268                displayName: 'Salary',
269                yField: 'salary',
270                style: {
271                    image:'../chart/bar.gif',
272                    mode: 'stretch',
273                    color:0x99BBE8
274                }
275            }]
276        }
277    });
278
279
280    var layout = new Ext.Panel({
281        title: 'Employee Salary by Month',
282        layout: 'border',
283        layoutConfig: {
284            columns: 1
285        },
286        width:600,
287        height: 600,
288        items: [chart, grid]
289    });
290    layout.render(Ext.getBody());
291
292    grid.getSelectionModel().on('selectionchange', function(sm){
293        grid.removeBtn.setDisabled(sm.getCount() < 1);
294    });
295});
Note: See TracBrowser for help on using the repository browser.