extjs增删改查：CRUD
大图地址：http://static.oschina.net/uploads/space/2012/0708/143147_pu2i_568818.jpg
Ext.onReady(function () {
Ext.QuickTips.init();
function rendervalue(value) {
if (value.replace(/%/g, "") > 30) {
return '<font color=\"red\">' + value + '</font>';
} else if (value.replace(/%/g, "") < 5) {
return '<font color=\"green\">' + value + '</font>';
} else {
return value;
}
}
var store = new Ext.data.JsonStore({
url:'../pycgi/get_dat.py?table=job_list',
totalProperty:'totalProperty',
root:'results',
baseParams:{startDate:'', endDate:''},
fields:['task_id', 'user_name', 'task_name', 'create_time', 'finish_time', 'finish_flag', 'dow_url', 'del_cmd'
],
pruneModifiedRecords:true
});
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:"任务ID", width:80, dataIndex:'task_id', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
{header:"用户名", width:100, dataIndex:'user_name', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
{header:"任务名", width:100, dataIndex:'task_name', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
{header:"创建时间", width:100, dataIndex:'create_time', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
{header:"结束时间", width:100, dataIndex:'finish_time', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
{header:"结束标志", width:100, dataIndex:'finish_flag', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
{header:"下载URL", width:100, dataIndex:'dow_url', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
{header:"删除命令", width:100, dataIndex:'del_cmd', editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))}
]);
var Record = Ext.data.Record.create([
{name:'task_id', type:'int'},
{name:'user_name', type:'string'},
{name:'task_name', type:'string'},
{name:'create_time', type:'string'},
{name:'finish_time', type:'string'},
{name:'finish_flag', type:'int'},
{name:'dow_url', type:'string'},
{name:'del_cmd', type:'string'}
]);
var grid = new Ext.grid.EditorGridPanel({
store:store,
mode:'remote',
applyTo:'grid',
autoScroll:true,
stripeRows:true,
loadMask:true,
frame:true,
viewConfig:{
forceFit:true,
listeners:{
refresh:function (view) {
var gridcount = 0;
store.each(function (r) {
var day = (new Date(r.data.day)).getDay();
if (day == 0 || day == 6) {
grid.getView().getRow(gridcount).style.backgroundColor = '#FDEADA';
}
gridcount++;
});
}
}
},
bbar:new Ext.PagingToolbar({
pageSize:20,
store:store,
displayInfo:true,
displayMsg:"显示第 {0} 条到 {1} 条记录，一共 {2} 条",
emptyMsg:"没有记录",
beforePageText:'第',
afterPageText:'页 共{0}页',
firstText:'首页',
prevText:'上一页',
nextText:'下一页',
lastText:'尾页',
refreshText:'刷新'
}),
tbar:[
{
text:'添加一行',
icon:'../img/add.gif',
handler:function () {
var p = new Record({
task_id:'',
user_name:'',
task_name:'',
create_time:'',
finish_time:'',
finish_flag:'',
dow_url:'',
del_cmd:''
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
grid.view.refresh();
}
},
'-',
{
text:"保存修改/新增",
icon:'../img/save.png',
handler:function () {
var modified = store.modified;
saveData(modified);
}
},
'-',
{
text:'删除选择',
icon:'../img/delete.gif',
handler:function () {
if (grid.getSelectionModel().hasSelection()) {
Ext.Msg.confirm('信息', '确定要删除？', function (btn) {
if (btn == 'yes') {
setIds = ""
var rows = grid.getSelectionModel().getSelections();//获取所选行数
for (var i = 0; i < rows.length; i++) {
store.remove(rows[i]); //执行删除
//store.removed.push(rows[i]);
setIds += rows[i].get("task_id");
if (i < rows.length - 1) setIds += ',';
}
setIds = '[' + setIds + ']'
grid.view.refresh();
}
});
}
else {
Ext.Msg.alert("错误", "没有任何行被选中，无法进行删除操作！");
}
}
},
'-',
{
text:"保存删除",
icon:'../img/save.png',
handler:function () {
//var modified = store.modified;
delData(setIds);
}
},
'-',
'按时间范围从' ,
{
xtype:"datefield",
format:'Y-m-d',
id:'startDate',
allowBlank:false
},
' 到 ',
{
xtype:"datefield",
format:'Y-m-d',
id:'endDate',
allowBlank:false
},
'-',
{
text:'查询',
icon:'../img/search.png',
listeners:{click:function () {
if (!Ext.getCmp('startDate').isValid() || !Ext.getCmp('endDate').isValid()) {
Ext.Msg.alert('提示', '日期不能为空!');
} else if (Ext.getCmp('startDate').value > Ext.getCmp('endDate').value) {
Ext.Msg.alert('提示', '开始日期不能大于结束日期!');
} else if (Ext.getCmp('endDate').value >= new Date().format('Y-m-d')) {
Ext.Msg.alert('提示', '只能选择今日之前的日期!');
} else {
store.on('beforeload', function () {
store.baseParams = {
start:0,
limit:20,
startDate:Ext.getCmp('startDate').value,
endDate:Ext.getCmp('endDate').value
};
});
store.load();
}
}
}
},
'-',
{
text:'重置',
icon:'../img/refresh.png',
tooltip:'清空查询条件',
handler:function () {
Ext.getCmp('startDate').reset();
Ext.getCmp('endDate').reset();
store.reload({start:0, limit:20});
}
},
'-',
{
text:'刷新',
icon:'../img/refresh.png',
tooltip:'刷新纪录',
handler:function () {
store.removeAll();
store.reload({start:0, limit:20});
//store.reload();
}
},
'-',
{
text:'图表',
icon:'../img/chart.png',
tooltip:'显示图表',
listeners:{
click:function () {
//store.sort('task_name', 'ASC');
var chartTabs = new Ext.TabPanel({
activeTab:0,
autoScroll:true,
autoWidth:true,
monitorResize:true,
enableTabScroll:true,
items:[
{
title:'taskid',
items:{
xtype:'linechart',
url:'../ext-3.4.0/resources/charts.swf',
store:store,
xField:'task_name',
yField:'task_id',
yAxis:new Ext.chart.NumericAxis({
displayName:'task_id'
}),
tipRenderer:function (chart, record) {
return record.data.task_id
+ ' in ' + record.data.task_name;
}
}
}
]
});
var chartWindow = new Ext.Window({
title:'图表',
closable:true,
width:900,
height:450,
layout:'fit',
items:chartTabs,
listeners:{
beforeclose:function () {
chartTabs.destroy();
chartWindow.hide();
store.sort('day', 'DESC');
return false;
}
}
});
chartWindow.show();
}
}
},
'-',
{
text:'导出到Excel',
icon:'../img/excel.gif',
handler:function () {
if (!Ext.fly('frmDummy')) {
var frm = document.createElement('form');
frm.id = 'frmDummy';
frm.name = id;
frm.className = 'x-hidden';
document.body.appendChild(frm);
}
Ext.Ajax.request({
url:'../pycgi/py2xls.py',
method:'POST',
form:Ext.fly('frmDummy'),
isUpload:true,
params:{ tname:'job_list', fname:'jobList'}
});
}
},
'-'
],
sm:sm,
cm:cm
});
store.load({start:0, limit:20});
function saveData(modified) {
var json = [];
Ext.each(modified, function (item) {
json.push(item.data);
});
if (json.length > 0) {
Ext.Ajax.request({
url:"../pycgi/saveData.py",
params:{ data:Ext.util.JSON.encode(json) },
method:"POST",
success:function (response) {//response
Ext.Msg.alert('信息', response.responseText, function () {// action.result.msg
store.reload();
});
},
failure:function () {
Ext.Msg.alert("错误", "与后台联系的时候出现了问题");
}
});
}
else {
Ext.Msg.alert("警告", "没有任何需要更新的数据！");
}
}
function delData(setIds) {
if (setIds != "") {
Ext.Ajax.request({
url:"../pycgi/saveData.py",
params:{ delId:setIds},
method:"POST",
success:function (response) {//response
Ext.Msg.alert('信息', response.responseText, function () {// action.result.msg
store.reload();
});
},
failure:function () {
Ext.Msg.alert("错误", "与后台联系的时候出现了问题");
}
});
}
else {
Ext.Msg.alert("警告", "没有任何需要del的数据！");
}
}
new Ext.Viewport({
layout:'fit',
items:[grid]
});
});
ref：
1、ExtJS中使用SelectionModel获取Records批量删除的前台实现
http://www.itzhai.com/extjs-using-selectionmodel-get-the-prospects-to-achieve-bulk-deletion-records.html
2、extjs学习笔记（六) grid中数据的保存，添加和删除
http://www.cnblogs.com/yage/archive/2009/10/30/1591785.html
3、ExtJs 入门教程
http://www.cnblogs.com/iamlilinfeng/archive/2012/12/31/2840663.html
4、ExtJS开发中未整理的资料
http://www.cnblogs.com/xia520pi/archive/2011/12/13/2285781.html