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();
}
});
}
}
});