extjs grid列数动态可变
var gridStore = new Ext.data.Store({
id: 'gridStore',
proxy: new Ext.data.HttpProxy({ url: 'http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetGridStore&year=' + year + "&month=" + month + "&TypeId=" + TypeId }),
reader: new Ext.data.JsonReader({
root: 'data'
})
});
var CmStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: 'http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetCMJson&TypeId=' + TypeId }),
reader: new Ext.data.JsonReader({
root: 'data'
})
});
CmStore.load({
callback: function() {
var cmArray = [];
var sm = new Ext.grid.CheckboxSelectionModel();
cmArray.push(new Ext.grid.RowNumberer());
cmArray.push(sm);
CmStore.each(function(r) {
var columns = null;
if (r.data.StrFiledName == "empId") {
columns = { header: r.data.StrName, width: 70, sortable: true, dataIndex: r.data.StrFiledName, renderer: function(data, cell, r, rowIndex, columnIndex, store) {
cell.attr = "style=background-color:#f3e2d7";
return GetSyncData("http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetName&empId=" + data);
}
}
}
else if (r.data.IsShow == true) {
columns = { header: r.data.StrName, width: 85, sortable: true, dataIndex: r.data.StrFiledName, renderer: function(data, cell, r, rowIndex, columnIndex, store) {
cell.attr = "style=background-color:#f3e2d7";
return (data == null ? "0" : data);
}
}
} else {
if (IsCheckOut == "1") {
columns = { header: r.data.StrName, width: 85, sortable: true, dataIndex: r.data.StrFiledName, renderer: function(data, cell, r, rowIndex, columnIndex, store) {
cell.attr = "style=background-color:#f3e2d7";
return (data == null ? "0" : data);
}
}
} else {
columns = { header: r.data.StrName, width: 70, sortable: true, dataIndex: r.data.StrFiledName,
editor: new Ext.form.NumberField({
style: 'text-align:left'
}), renderer: function(value) {
return "<font color=red><b>" + (value == null ? "0" : value) + "</b></font>";
}
}
}
}
cmArray.push(columns);
});
var cm = new Ext.grid.ColumnModel(cmArray);
var grid = new Ext.grid.EditorGridPanel({
id: 'grid',
store: gridStore,
sm: sm,
cm: cm,
clicksToEdit: 1,
title: year + "年" + month + "月" + "=>" + GetSyncData("http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetTypeName&TypeId=" + TypeId) + "=>工资表",
region: 'center',
loadMask: true,
stripeRows: true,
autoScroll: true,
border: false,
stateful: true,
trackMouseOver: true,
autoShow: true,
viewConfig: {
forceFit: false
},
listeners: {
"afteredit": function(e) {
var r = e.record; //得到当前行所有数据
var f = e.field; //得到修改列
var v = e.value; //得到修改列修改后值
if (v == "") {
grid.getStore().reload();
return
}
//通过ajax请求修改数据
Ext.Ajax.request({
url: "http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=UpdateMoney",
method: "POST",
params: {
FieldName: f,
UpdataValue: v,
Id: r.data.ID,
TypeID: TypeId
},
success: function(r) {
grid.getStore().reload();
},
failure: function() {
MessageBox("提示", "操作失败！", Ext.MessageBox.ERROR);
grid.getStore().reload();
}
});
}
}
});
CmStore 从另一个数据源(一列的表格, 存放各列名字, 可在后台创建个datatable, json输出去前台)读取列名
id: 'gridStore',
proxy: new Ext.data.HttpProxy({ url: 'http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetGridStore&year=' + year + "&month=" + month + "&TypeId=" + TypeId }),
reader: new Ext.data.JsonReader({
root: 'data'
})
});
var CmStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: 'http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetCMJson&TypeId=' + TypeId }),
reader: new Ext.data.JsonReader({
root: 'data'
})
});
CmStore.load({
callback: function() {
var cmArray = [];
var sm = new Ext.grid.CheckboxSelectionModel();
cmArray.push(new Ext.grid.RowNumberer());
cmArray.push(sm);
CmStore.each(function(r) {
var columns = null;
if (r.data.StrFiledName == "empId") {
columns = { header: r.data.StrName, width: 70, sortable: true, dataIndex: r.data.StrFiledName, renderer: function(data, cell, r, rowIndex, columnIndex, store) {
cell.attr = "style=background-color:#f3e2d7";
return GetSyncData("http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetName&empId=" + data);
}
}
}
else if (r.data.IsShow == true) {
columns = { header: r.data.StrName, width: 85, sortable: true, dataIndex: r.data.StrFiledName, renderer: function(data, cell, r, rowIndex, columnIndex, store) {
cell.attr = "style=background-color:#f3e2d7";
return (data == null ? "0" : data);
}
}
} else {
if (IsCheckOut == "1") {
columns = { header: r.data.StrName, width: 85, sortable: true, dataIndex: r.data.StrFiledName, renderer: function(data, cell, r, rowIndex, columnIndex, store) {
cell.attr = "style=background-color:#f3e2d7";
return (data == null ? "0" : data);
}
}
} else {
columns = { header: r.data.StrName, width: 70, sortable: true, dataIndex: r.data.StrFiledName,
editor: new Ext.form.NumberField({
style: 'text-align:left'
}), renderer: function(value) {
return "<font color=red><b>" + (value == null ? "0" : value) + "</b></font>";
}
}
}
}
cmArray.push(columns);
});
var cm = new Ext.grid.ColumnModel(cmArray);
var grid = new Ext.grid.EditorGridPanel({
id: 'grid',
store: gridStore,
sm: sm,
cm: cm,
clicksToEdit: 1,
title: year + "年" + month + "月" + "=>" + GetSyncData("http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=GetTypeName&TypeId=" + TypeId) + "=>工资表",
region: 'center',
loadMask: true,
stripeRows: true,
autoScroll: true,
border: false,
stateful: true,
trackMouseOver: true,
autoShow: true,
viewConfig: {
forceFit: false
},
listeners: {
"afteredit": function(e) {
var r = e.record; //得到当前行所有数据
var f = e.field; //得到修改列
var v = e.value; //得到修改列修改后值
if (v == "") {
grid.getStore().reload();
return
}
//通过ajax请求修改数据
Ext.Ajax.request({
url: "http://www.cnblogs.com/HR/Pay/PayAjax/PayRollAjax.ashx?model=UpdateMoney",
method: "POST",
params: {
FieldName: f,
UpdataValue: v,
Id: r.data.ID,
TypeID: TypeId
},
success: function(r) {
grid.getStore().reload();
},
failure: function() {
MessageBox("提示", "操作失败！", Ext.MessageBox.ERROR);
grid.getStore().reload();
}
});
}
}
});
