gridPanel添加按钮

在实际开发中有的时候需要一些下图这样的功能,为了实现下图方法,需要做很多事情!当然有一种很好的方法,


但是不安全,不容易维护!为了方便维护所以写了下面的方法!


///添加列单击事件,方便在列内添加功能按钮
Ext.grid.GridPanel.prototype.processEvent = function(name, e){
this.fireEvent(name, e);
var t = e.getTarget();
var v = this.view;
var header = v.findHeaderIndex(t);
if(header !== false){
this.fireEvent("header" + name, this, header, e);
}else{
var row = v.findRowIndex(t);
var cell = v.findCellIndex(t);
if(row !== false){
this.fireEvent("row" + name, this, row, e);
if(cell !== false){
var col =this.colModel.config[cell];
var record= this.store.getAt(row);
if(typeof col.onColumnCilck == "function")
{
col.onColumnCilck(this,record,row,cell,e);
}
this.fireEvent("cell" + name, this, row, cell, e);
}
}
}}
//按钮列
Ext.grid.ButtonColumn =function(text){
var a={
text:text
}
return function(v, p, record){
var tpl= new Ext.Template('<button type="button">{text}</button>');
return tpl.apply(a);
}
}
///添加列单击事件,方便在列内添加功能按钮
Ext.grid.GridPanel.prototype.processEvent = function(name, e){
this.fireEvent(name, e);
var t = e.getTarget();
var v = this.view;
var header = v.findHeaderIndex(t);
if(header !== false){
this.fireEvent("header" + name, this, header, e);
}else{
var row = v.findRowIndex(t);
var cell = v.findCellIndex(t);
if(row !== false){
this.fireEvent("row" + name, this, row, e);
if(cell !== false){
var col =this.colModel.config[cell];
var record= this.store.getAt(row);
if(typeof col.onColumnCilck == "function")
{
col.onColumnCilck(this,record,row,cell,e);
}
this.fireEvent("cell" + name, this, row, cell, e);
}
}
}}
//按钮列
Ext.grid.ButtonColumn =function(text){
var a={
text:text
}
return function(v, p, record){
var tpl= new Ext.Template('<button type="button">{text}</button>');
return tpl.apply(a);
}
}

用法如下:


function RiYongPinGrid() {
var sm = new Ext.grid.CheckboxSelectionModel();

var ColumnProperts = [sm,
{

Name : '',
Caption : "按钮",
Type : 'string',
width : 180,
renderer : Ext.grid.ButtonColumn('按钮'),
onColumnCilck:function(grid,record,rowIndex,colIndex,e)
{
alert(record.get("strname"))
Alert(rowIndex);
Alert(colIndex);
},
editor : new Ext.form.TextField()
},{

Name : 'strname',
Caption : "办公用品名称",
Type : 'string',
width : 180,
renderer : function(value, metadata, record) {
crecord = record;
return "<a href="#" mce_href="#" οnclick=javascript:ShowViewWin()>"
+ value + "</a>";
},
onColumnCilck:function(grid,record,rowIndex,colIndex,e)
{
alert(record.get("strname"))
Alert(rowIndex);
Alert(colIndex);
},
editor : new Ext.form.TextField()
}, {
Name : 'iadderid',
Caption : "创建人",
Type : 'string',
width : 180,
renderer : ColumnPropert.getStoreRenderer({
store : TestData.StaffStore,
valueField : 'istaffbasicinfoid',
DisplayField : 'strrealname'
}),
editor : new Ext.form.TextField()
}, {
Name : 'iguanlierid',
Caption : "管理人",
Type : 'string',
width : 180,
renderer : ColumnPropert.getStoreRenderer({
store : TestData.StaffStore,
valueField : 'istaffbasicinfoid',
DisplayField : 'strrealname'
}),
editor : new Ext.form.TextField()
}, {
Name : 'iadddeptid',
Caption : "归属部门",
Type : 'string',
width : 180,
renderer : ColumnPropert.getStoreRenderer( {
store : TestData.DeptStore,
valueField : 'ideptid',
DisplayField : 'strdeptname'
}),
editor : new Ext.form.TextField()
}];

var columnPropert1 = new ColumnPropert(ColumnProperts);
var record = new Ext.data.Record.create(columnPropert1.GetRecord());

var cm = new Ext.grid.ColumnModel(columnPropert1.GetColumnModel());
cm.defaultSortable = true;
var store = new Ext.data.JsonStore({
url : ServerUrl + '?op=list'
});
store.load();
var grid = new Ext.grid.GridPanel({
store : store,
cm : cm,
sm : sm,
id : 'RYPGrid',
frame : true,
clicksToEdit : 1,
tbar : [{
text : '添加日用品',
iconCls:'tianjia',
handler : function(src) {
StateEdit(src.text)
}
}, {
text : '修改日用品',
iconCls : 'application_form_edit',
handler : function(src) {
var r = Ext.getCmp('RYPGrid').getSelectionModel()
.getSelected();
if (r) {
StateEdit(src.text)
Ext.getCmp('RYPEditPanel').getForm().loadRecord(r);
} else {
alert('请选择一条记录');
}
}
}, {
text : '删除日用品',
iconCls:'shanchu',
handler : function(src) {
var r = Ext.getCmp('RYPGrid').getSelectionModel()
.getSelected();
if (r) {
confirm('提示', '确认删除吗?', function() {
AjaxMethod(ServerUrl, {
op : 'delete',
id : r.get('ibangongyongpinid')
}, function(response, options) {
alert(response.responseText);
Ext.getCmp('RYPGrid').store.remove(r);
});
});
} else {
alert('请选择一条记录');
}
}
}, '日用品查询', {
xtype : 'combo',
triggerClass : ',x-form-search-trigger',
onTriggerClick : function(src) {
store.removeAll();
store.load({
params : {
Key : this.getValue(),
start : 0,
limit : 25
}
});
}
}]
});

return grid;
}
function RiYongPinGrid() {
var sm = new Ext.grid.CheckboxSelectionModel();

var ColumnProperts = [sm,
{

Name : '',
Caption : "按钮",
Type : 'string',
width : 180,
renderer : Ext.grid.ButtonColumn('按钮'),
onColumnCilck:function(grid,record,rowIndex,colIndex,e)
{
alert(record.get("strname"))
Alert(rowIndex);
Alert(colIndex);
},
editor : new Ext.form.TextField()
},{

Name : 'strname',
Caption : "办公用品名称",
Type : 'string',
width : 180,
renderer : function(value, metadata, record) {
crecord = record;
return "<a href="#" mce_href="#" οnclick=javascript:ShowViewWin()>"
+ value + "</a>";
},
onColumnCilck:function(grid,record,rowIndex,colIndex,e)
{
alert(record.get("strname"))
Alert(rowIndex);
Alert(colIndex);
},
editor : new Ext.form.TextField()
}, {
Name : 'iadderid',
Caption : "创建人",
Type : 'string',
width : 180,
renderer : ColumnPropert.getStoreRenderer({
store : TestData.StaffStore,
valueField : 'istaffbasicinfoid',
DisplayField : 'strrealname'
}),
editor : new Ext.form.TextField()
}, {
Name : 'iguanlierid',
Caption : "管理人",
Type : 'string',
width : 180,
renderer : ColumnPropert.getStoreRenderer({
store : TestData.StaffStore,
valueField : 'istaffbasicinfoid',
DisplayField : 'strrealname'
}),
editor : new Ext.form.TextField()
}, {
Name : 'iadddeptid',
Caption : "归属部门",
Type : 'string',
width : 180,
renderer : ColumnPropert.getStoreRenderer( {
store : TestData.DeptStore,
valueField : 'ideptid',
DisplayField : 'strdeptname'
}),
editor : new Ext.form.TextField()
}];

var columnPropert1 = new ColumnPropert(ColumnProperts);
var record = new Ext.data.Record.create(columnPropert1.GetRecord());

var cm = new Ext.grid.ColumnModel(columnPropert1.GetColumnModel());
cm.defaultSortable = true;
var store = new Ext.data.JsonStore({
url : ServerUrl + '?op=list'
});
store.load();
var grid = new Ext.grid.GridPanel({
store : store,
cm : cm,
sm : sm,
id : 'RYPGrid',
frame : true,
clicksToEdit : 1,
tbar : [{
text : '添加日用品',
iconCls:'tianjia',
handler : function(src) {
StateEdit(src.text)
}
}, {
text : '修改日用品',
iconCls : 'application_form_edit',
handler : function(src) {
var r = Ext.getCmp('RYPGrid').getSelectionModel()
.getSelected();
if (r) {
StateEdit(src.text)
Ext.getCmp('RYPEditPanel').getForm().loadRecord(r);
} else {
alert('请选择一条记录');
}
}
}, {
text : '删除日用品',
iconCls:'shanchu',
handler : function(src) {
var r = Ext.getCmp('RYPGrid').getSelectionModel()
.getSelected();
if (r) {
confirm('提示', '确认删除吗?', function() {
AjaxMethod(ServerUrl, {
op : 'delete',
id : r.get('ibangongyongpinid')
}, function(response, options) {
alert(response.responseText);
Ext.getCmp('RYPGrid').store.remove(r);
});
});
} else {
alert('请选择一条记录');
}
}
}, '日用品查询', {
xtype : 'combo',
triggerClass : ',x-form-search-trigger',
onTriggerClick : function(src) {
store.removeAll();
store.load({
params : {
Key : this.getValue(),
start : 0,
limit : 25
}
});
}
}]
});

return grid;
}

要问我ColumnPropert是什么?是我自己写的一个方便开发的东西!因为store和grid之间的列写发,不同所以搞了一个这个东西!

代码如下:


// / <reference path="../../extjs2.0/adapter/ext/ext-base.js" />

// / <reference path="../../extjs2.0/ext-all-debug.js" />
// / <reference path="namespace.js" />

/*
* Config= [ {Caption:'', Name:'', Type:'' } ],
*/

ColumnPropert = function(config) {
this.Columns = config;
// Columns:[{Caption:'',Name:'',Type:'',ColumnModelConfig:[],StoreConfig:[]}],
// this.Columns.Caption=

// 获取数据源的字段描述
// VorP是显示,还是打印
this.GetJsonStoreFields = function(VorP) {

var fields = [], ln = this.Columns.length, j = 0;
for (var i = 0;i < ln; i++) {
var column = this.Columns[i];
var field = {};
// for(var o in column)
// {
// field[o]=column[o];
// }
// 显示
if (VorP == 'V' && column.IsView == 1 || VorP == null) {
if (column.Name != null) {
field.name = column.Name;
field.type = column.Type;
fields[j] = field;
j++;
}
}
// 打印
if (VorP == 'P' && column.IsPrint == 1) {
if (column.Name != null) {
field.name = column.Name;
field.type = column.Type;
fields[j] = field;
j++;
}
}
}
return fields;
};

// 获取数据源的字段描述
this.GetColumnModel = function(VorP) {
var ColumnModels = [], ln = this.Columns.length, j = 0;

for (var i = 0;i < ln; i++) {
var column = this.Columns[j];
var ColumnModel = {};

if (column.Type == 'date') {
ColumnModel.renderer = Ext.util.Format.dateRenderer("Y-m-d");// 默认的日期渲染方式
}

if (VorP == 'V' && column.IsView == 1 || VorP == null) {
for (var o in column) {
ColumnModel[o] = column[o];
}
ColumnModel.header = column.Caption;
ColumnModel.dataIndex = column.Name;
ColumnModel.type = column.Type;
ColumnModels[j] = ColumnModel;
j++;
} else if (VorP == 'P' && column.IsPrint == 1) {
for (var o in column) {
ColumnModel[o] = column[o];
}
ColumnModel.header = column.Caption;
ColumnModel.dataIndex = column.Name;
ColumnModel.type = column.Type;
ColumnModels[j] = ColumnModel;
j++;
}

}
return ColumnModels;
};
// 单条记录
this.GetRecord = function(VorP) {

var fields = [], ln = this.Columns.length, j = 0;
for (var i = 0;i < ln; i++) {
var column = this.Columns[i];
var field = {};
if (VorP == 'V' && column.IsView == 1 || VorP == null) {
if (column.Name != null) {
field.name = column.Name;
// field.type=column.Type;
fields[j] = field;
j++;
}
} else if (VorP == 'P' && column.IsPrint == 1) {
if (column.Name != null) {
field.name = column.Name;
// field.type=column.Type;
fields[j] = field;
j++;
}
}
}
return fields;
}

// 返回一条新的空记录
this.GetNewRecord = function(VorP) {
var newObj = {}, ln = this.Columns.length;
for (var i = 0;i < ln; i++) {
var column = this.Columns[i];

if (VorP == 'V' && column.IsView == 1 || VorP == null) {
if (column.Name != null) {
newObj[column.Name] = column.DefaultValue==null? '':column.DefaultValue;
}
} else if (VorP == 'P' && column.IsPrint == 1) {
if (column.Name != null) {
newObj[column.Name] = column.DefaultValue==null? '':column.DefaultValue;
}
}
}
return newObj;
}


};
/*根据store来渲染grid的列,不需要自己再写额外的渲染方法
* Examples
*
storeConfig:{
store:infoStore,
valueField:'Id',
DisplayField:'Name'
}
*/
ColumnPropert.getStoreRenderer = function(storeConfig) {
return function(value) {
var ln = storeConfig.store.getCount();
var record;
for (var i = 0;i < ln; i++) {
record = storeConfig.store.getAt(i);
if (record.get(storeConfig.valueField) == value) {
return record.get(storeConfig.DisplayField);
}
}
}
}