extjs增删改查：CRUD

01
Ext.onReady(function () {
002
 
003
    Ext.QuickTips.init();
004
 
005
    function rendervalue(value) {
006
        if (value.replace(/%/g, "") > 30) {
007
            return  '<font color=/"red/">' + value + '</font>';
008
        } else if (value.replace(/%/g, "") < 5) {
009
            return  '<font color=/"green/">' + value + '</font>';
010
        } else {
011
            return value;
012
        }
013
    }
014
 
015
    var store = new Ext.data.JsonStore({
016
        url:'../pycgi/get_dat.py?table=job_list',
017
        totalProperty:'totalProperty',
018
        root:'results',
019
        baseParams:{startDate:'', endDate:''},
020
        fields:['task_id', 'user_name', 'task_name', 'create_time', 'finish_time', 'finish_flag', 'dow_url', 'del_cmd'
021
        ],
022
        pruneModifiedRecords:true
023
    });
024
 
025
    var sm = new Ext.grid.CheckboxSelectionModel();
026
 
027
    var cm = new Ext.grid.ColumnModel([
028
        new Ext.grid.RowNumberer(),
029
        sm,
030
        {header:"任务ID", width:80, dataIndex:'task_id', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
031
        {header:"用户名", width:100, dataIndex:'user_name', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
032
        {header:"任务名", width:100, dataIndex:'task_name', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
033
        {header:"创建时间", width:100, dataIndex:'create_time', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
034
        {header:"结束时间", width:100, dataIndex:'finish_time', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
035
        {header:"结束标志", width:100, dataIndex:'finish_flag', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
036
        {header:"下载URL", width:100, dataIndex:'dow_url', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
037
        {header:"删除命令", width:100, dataIndex:'del_cmd', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))}
038
    ]);
039
    var Record = Ext.data.Record.create([
040
        {name:'task_id', type:'int'},
041
        {name:'user_name', type:'string'},
042
        {name:'task_name', type:'string'},
043
        {name:'create_time', type:'string'},
044
        {name:'finish_time', type:'string'},
045
        {name:'finish_flag', type:'int'},
046
        {name:'dow_url', type:'string'},
047
        {name:'del_cmd', type:'string'}
048
    ]);
049
 
050
    var grid = new Ext.grid.EditorGridPanel({
051
        store:store,
052
        mode:'remote',
053
        applyTo:'grid',
054
        autoScroll:true,
055
        stripeRows:true,
056
        loadMask:true,
057
        frame:true,
058
        viewConfig:{
059
            forceFit:true,
060
            listeners:{
061
                refresh:function (view) {
062
                    var gridcount = 0;
063
                    store.each(function (r) {
064
                        var day = (new Date(r.data.day)).getDay();
065
                        if (day == 0 || day == 6) {
066
                            grid.getView().getRow(gridcount).style.backgroundColor = '#FDEADA';
067
                        }
068
                        gridcount++;
069
                    });
070
                }
071
            }
072
        },
073
        bbar:new Ext.PagingToolbar({
074
            pageSize:20,
075
            store:store,
076
            displayInfo:true,
077
            displayMsg:"显示第 {0} 条到 {1} 条记录，一共 {2} 条",
078
            emptyMsg:"没有记录",
079
            beforePageText:'第',
080
            afterPageText:'页 共{0}页',
081
            firstText:'首页',
082
            prevText:'上一页',
083
            nextText:'下一页',
084
            lastText:'尾页',
085
            refreshText:'刷新'
086
        }),
087
        tbar:[
088
            {
089
                text:'添加一行',
090
                icon:'../img/add.gif',
091
                handler:function () {
092
                    var p = new Record({
093
                        task_id:'',
094
                        user_name:'',
095
                        task_name:'',
096
                        create_time:'',
097
                        finish_time:'',
098
                        finish_flag:'',
099
                        dow_url:'',
100
                        del_cmd:''
101
 
102
                    });
103
                    grid.stopEditing();
104
                    store.insert(0, p);
105
                    grid.startEditing(0, 0);
106
                    grid.view.refresh();
107
                }
108
            },
109
            '-',
110
            {
111
                text:"保存修改/新增",
112
                icon:'../img/save.png',
113
                handler:function () {
114
                    var modified = store.modified;
115
                    saveData(modified);
116
                }
117
            },
118
            '-',
119
            {
120
                text:'删除选择',
121
                icon:'../img/delete.gif',
122
                handler:function () {
123
                    if (grid.getSelectionModel().hasSelection()) {
124
                        Ext.Msg.confirm('信息', '确定要删除？', function (btn) {
125
                            if (btn == 'yes') {
126
                                setIds = ""
127
                                var rows = grid.getSelectionModel().getSelections();//获取所选行数
128
                                for (var i = 0; i < rows.length; i++) {
129
                                    store.remove(rows[i]); //执行删除
130
                                    //store.removed.push(rows[i]);
131
                                    setIds += rows[i].get("task_id");
132
                                    if (i < rows.length - 1) setIds += ',';
133
                                }
134
                                setIds = '[' + setIds + ']'
135
 
136
                                grid.view.refresh();
137
                            }
138
                        });
139
                    }
140
                    else {
141
                        Ext.Msg.alert("错误", "没有任何行被选中，无法进行删除操作！");
142
                    }
143
                }
144
            },
145
            '-',
146
            {
147
                text:"保存删除",
148
                icon:'../img/save.png',
149
                handler:function () {
150
                    //var modified = store.modified;
151
                    delData(setIds);
152
                }
153
            },
154
            '-',
155
 
156
            '按时间范围从' ,
157
            {
158
                xtype:"datefield",
159
                format:'Y-m-d',
160
                id:'startDate',
161
                allowBlank:false
162
 
163
 
164
            },
165
            ' 到 ',
166
            {
167
                xtype:"datefield",
168
                format:'Y-m-d',
169
                id:'endDate',
170
                allowBlank:false
171
            },
172
            '-',
173
            {
174
                text:'查询',
175
                icon:'../img/search.png',
176
                listeners:{click:function () {
177
                    if (!Ext.getCmp('startDate').isValid() || !Ext.getCmp('endDate').isValid()) {
178
                        Ext.Msg.alert('提示', '日期不能为空!');
179
                    } else if (Ext.getCmp('startDate').value > Ext.getCmp('endDate').value) {
180
                        Ext.Msg.alert('提示', '开始日期不能大于结束日期!');
181
                    } else if (Ext.getCmp('endDate').value >= new Date().format('Y-m-d')) {
182
                        Ext.Msg.alert('提示', '只能选择今日之前的日期!');
183
                    } else {
184
 
185
                        store.on('beforeload', function () {
186
                            store.baseParams = {
187
                                start:0,
188
                                limit:20,
189
                                startDate:Ext.getCmp('startDate').value,
190
                                endDate:Ext.getCmp('endDate').value
191
                            };
192
                        });
193
                        store.load();
194
                    }
195
                }
196
                }
197
            },
198
            '-',
199
            {
200
                text:'重置',
201
                icon:'../img/refresh.png',
202
                tooltip:'清空查询条件',
203
                handler:function () {
204
                    Ext.getCmp('startDate').reset();
205
                    Ext.getCmp('endDate').reset();
206
                    store.reload({start:0, limit:20});
207
 
208
                }
209
            },
210
            '-',
211
            {
212
                text:'刷新',
213
                icon:'../img/refresh.png',
214
                tooltip:'刷新纪录',
215
                handler:function () {
216
                    store.removeAll();
217
                    store.reload({start:0, limit:20});
218
                    //store.reload();
219
                }
220
            },
221
            '-',
222
            {
223
                text:'图表',
224
                icon:'../img/chart.png',
225
                tooltip:'显示图表',
226
                listeners:{
227
                    click:function () {
228
                        //store.sort('task_name', 'ASC');
229
                        var chartTabs = new Ext.TabPanel({
230
                            activeTab:0,
231
 
232
                            autoScroll:true,
233
                            autoWidth:true,
234
                            monitorResize:true,
235
                            enableTabScroll:true,
236
 
237
                            items:[
238
                                {
239
                                    title:'taskid',
240
                                    items:{
241
                                        xtype:'linechart',
242
                                        url:'../ext-3.4.0/resources/charts.swf',
243
                                        store:store,
244
                                        xField:'task_name',
245
                                        yField:'task_id',
246
                                        yAxis:new Ext.chart.NumericAxis({
247
                                            displayName:'task_id'
248
                                        }),
249
                                        tipRenderer:function (chart, record) {
250
                                            return record.data.task_id
251
                                                + ' in ' + record.data.task_name;
252
                                        }
253
                                    }
254
                                }
255
                            ]
256
                        });
257
                        var chartWindow = new Ext.Window({
258
                            title:'图表',
259
                            closable:true,
260
                            width:900,
261
                            height:450,
262
                            layout:'fit',
263
                            items:chartTabs,
264
                            listeners:{
265
                                beforeclose:function () {
266
                                    chartTabs.destroy();
267
                                    chartWindow.hide();
268
                                    store.sort('day', 'DESC');
269
                                    return false;
270
                                }
271
                            }
272
                        });
273
                        chartWindow.show();
274
                    }
275
                }
276
            },
277
            '-',
278
            {
279
                text:'导出到Excel',
280
                icon:'../img/excel.gif',
281
 
282
                handler:function () {
283
                    if (!Ext.fly('frmDummy')) {
284
                        var frm = document.createElement('form');
285
                        frm.id = 'frmDummy';
286
                        frm.name = id;
287
                        frm.className = 'x-hidden';
288
                        document.body.appendChild(frm);
289
                    }
290
                    Ext.Ajax.request({
291
                        url:'../pycgi/py2xls.py',
292
                        method:'POST',
293
                        form:Ext.fly('frmDummy'),
294
                        isUpload:true,
295
                        params:{ tname:'job_list', fname:'jobList'}
296
                    });
297
                }
298
            },
299
            '-'
300
 
301
        ],
302
 
303
        sm:sm,
304
        cm:cm
305
    });
306
    store.load({start:0, limit:20});
307
 
308
    function saveData(modified) {
309
        var json = [];
310
        Ext.each(modified, function (item) {
311
            json.push(item.data);
312
        });
313
        if (json.length > 0) {
314
            Ext.Ajax.request({
315
                url:"../pycgi/saveData.py",
316
                params:{ data:Ext.util.JSON.encode(json) },
317
                method:"POST",
318
                success:function (response) {//response
319
                    Ext.Msg.alert('信息', response.responseText, function () {// action.result.msg
320
                        store.reload();
321
                    });
322
                },
323
                failure:function () {
324
                    Ext.Msg.alert("错误", "与后台联系的时候出现了问题");
325
                }
326
            });
327
        }
328
        else {
329
            Ext.Msg.alert("警告", "没有任何需要更新的数据！");
330
        }
331
    }
332
 
333
 
334
    function delData(setIds) {
335
        if (setIds != "") {
336
            Ext.Ajax.request({
337
                url:"../pycgi/saveData.py",
338
                params:{ delId:setIds},
339
                method:"POST",
340
                success:function (response) {//response
341
                    Ext.Msg.alert('信息', response.responseText, function () {// action.result.msg
342
                        store.reload();
343
                    });
344
                },
345
                failure:function () {
346
                    Ext.Msg.alert("错误", "与后台联系的时候出现了问题");
347
                }
348
            });
349
        }
350
        else {
351
            Ext.Msg.alert("警告", "没有任何需要del的数据！");
352
        }
353
    }
354
 
355
    new Ext.Viewport({
356
        layout:'fit',
357
        items:[grid]
358
    });
359
 
360
});