先介绍一下在grid面板添加按钮列的方法，这种方法也比较常用吧。只展示前端的编程哦，后台的java代码太多太累赘了，涉及到的ajax等等数据交互，就当作是个alert函数看待吧~ 上菜了，代码如下。
var colmldetail=new Ext.grid.ColumnModel({
columns:[
new Ext.grid.RowNumberer(),
sm,
{header: "共享视图名称", sortable: true, width:100, align:'center', dataIndex: 'pageName'} ,
{header: "共享视图地址", sortable: true, width:100,align:'center', dataIndex: 'pageUrl'} ,
{header: "共享视图详细描述", sortable: true,width:300,align:'center', dataIndex: 'descInfo'} ,
{header: "操作", sortable: true,width:50, align:'left', dataIndex:'status',renderer:showButton} ,
{header: "id", id:'id', sortable: true, dataIndex: 'id', hidden:true}
]
});
function showButton(value){ //"操作"列字段的显示按钮
if (value == '0') {
return "<button>申请</button>";
} else{
return "<button>查看详情</button>";
}
}在grid面板定义了“操作”列，根据该列的值（dataIndex:'status'）判断按钮文字，接下来定义按钮的响应方法。代码如下。
grid.on('cellClick', function(grid, rowIndex, columnIndex, e){
if(columnIndex == 5){
var record = grid.store.getAt(rowIndex);
var interface_id = "view_"+record.get("id");
var interface_name = record.get("pageName");
var state = record.get("status");
if(state=='0'){
applywin.show();
var aform = Ext.getCmp('applyform').getForm();
aform.reset();
//aform.url=fullpath+'/esb/InterfaceApplyAdd.do';
Ext.getCmp('interface_id_Add').setValue(interface_id);
Ext.getCmp('interface_name_Add').setValue(interface_name);
}else{
Ext.Ajax.request({
url:fullpath+'/esb/InterfaceApplyGet.do',
success:function(_response,_options){
detailwin.show();
var obj = Ext.util.JSON.decode(_response.responseText);
var dform = Ext.getCmp('detailform').getForm();
dform.setValues(obj.datas); //注意设置form值的语句需要在show函数后，因为此时的form还没有创建or Render
Ext.getCmp('interface_id').setValue(interface_id);
Ext.getCmp('interface_name').setValue(interface_name);
if(Ext.getCmp('status').getValue()=='apply'){Ext.getCmp('status').setValue("申请中");Ext.getCmp('replyBtn').show()}
if(Ext.getCmp('status').getValue()=='agree'){Ext.getCmp('status').setValue("已通过");Ext.getCmp('replyBtn').hide()}
if(Ext.getCmp('status').getValue()=='rejected'){Ext.getCmp('status').setValue("未通过");Ext.getCmp('replyBtn').show()}
},
failure: function(){
Ext.Msg.alert('信息','查询失败');
},
params: {interface_id:interface_id}
});
}
}
});开始的“if(columnIndex == 5){“，指的是第五列，即”操作“列，可以清晰看到参数的调度。
像这些”Ext.getCmp('interface_id').setValue(interface_id)“的操作，是把值附到弹出窗口的from（下面展示）里面了，Ext.getCmp()操作对应的是id。
像这些”if(Ext.getCmp('status').getValue()=='agree'){Ext.getCmp('status').setValue("已通过");Ext.getCmp('replyBtn').hide()}“的操作，考虑到申请会有被拒、通过的情况，所以定义了”重新申请“按钮（id：replyBtn），根据”status“判断是否显示。
顺便也贴上弹出框的代码，如下所示。
//申请(新增)
var applyform={
usepurse:'applyform',
id:'applyform',
xtype:'form',
url:fullpath+'/esb/InterfaceApplyAdd.do',
baseCls:"x-plain",
style:"padding:5px",
items:[{
xtype:'hidden',name:'interface_id_Add',fieldLabel: '接口ID', id:'interface_id_Add',
anchor:'95%'
},{
xtype:'hidden',name:'interface_name_Add',fieldLabel: '接口名称', id:'interface_name_Add',
anchor:'95%'
},{
xtype:'textarea',name:'applyreason_Add',fieldLabel: '申请理由', id:'applyreason_Add',
allowBlank:false,
height:150,
anchor:'95%'
}
]
};
var applywin=new Ext.Window({
title:"申请",
bodyStyle:'padding:5px',
closeAction :'hide',
plain: true,
frame: true,
id:'applywin',
width: 600,
height:250,
layout:"form",
items:[applyform],
buttons:[{
text:"提交",
handler:function(){
if( Ext.getCmp('applyform').getForm().isValid()){
var bf=Ext.getCmp('applyform').getForm();
Ext.getCmp('applyform').getForm().submit({
waitTitle:"等待中.....",
waitMsg:"正在提交数据，请稍.....",
failure:function(){
Ext.Msg.alert('信息','操作失败，请检查服务器!');
applywin.hide();
},
success:function(_form,_action){
Ext.Msg.alert('信息','操作成功!');
applywin.hide();
store.load({params:{start:0, limit:15}});
}
});
}
}
},{
text:"关闭页面",
handler:function(){
applywin.hide();
}
}]
});
//查看详情
var detailform={
usepurse:'detailform',
id:'detailform',
xtype:'form',
baseCls:"x-plain",
style:"padding:5px",
items:[{
xtype:'hidden',name:'interface_id',fieldLabel: '接口ID', id:'interface_id',
anchor:'95%'
},{
xtype:'hidden',name:'interface_name',fieldLabel: '接口名称', id:'interface_name',
anchor:'95%'
},{
xtype:'textarea',name:'applyreason',fieldLabel: '申请理由', id:'applyreason',
allowBlank:false,
height:130,
anchor:'95%'
},{
xtype:'textfield',name:'status',fieldLabel: '审核情况', id:'status',//状态
readOnly:true,anchor:'95%'
},{
xtype:'textfield',name:'replydesc',fieldLabel: '审核回复', id:'replydesc',
readOnly:true,anchor:'95%'
}
]
};
var detailwin=new Ext.Window({
title:"详情",
bodyStyle:'padding:5px',
closeAction :'hide',
plain: true,
frame: true,
id:'detailwin',
width: 600,
height:300,
layout:"form",
items:[detailform],
buttons:[
{
id:'replyBtn',
text:"重新申请",
handler:function(){
detailwin.hide();
applywin.show();
var reaform = Ext.getCmp('applyform').getForm();
reaform.reset();
reaform.url=fullpath+'/esb/InterfaceApplyChange.do';
Ext.getCmp('interface_id_Add').setValue(Ext.getCmp('interface_id').getValue());
Ext.getCmp('interface_name_Add').setValue(Ext.getCmp('interface_name').getValue());
}
},{
text:"关闭",
handler:function(){
detailwin.hide();
}
}
]
});
这里注意，关于弹出窗口的大小，反正不用钱，不能太小气。。。
/************************** 华丽的分割线 *******************************/
另外，也有第二种添加按钮列和响应函数的办法，上菜。
{header: "操作",sortable: true,width:50,align:'left', dataIndex:'status',renderer:showButton}这个function showButton(value)函数，可以这样定义：
function showButton(){
if (value == '0') {
return "<input type='button' value='添加' οnclick='addFn();' >" ;
} else{
return "<input type='button' value='查看详情' οnclick='viewFn();' >" ;
}
}
function addFn(){ //注意该函数应该是全局函数！
alert('为什么还是——HelloWorld');
} 两种方法，感觉还是第二种比较javascript一点，比较原味简单好使，而第一种就经过ext封装过了，如果ext不是很熟悉，就用第二种吧。码字辛苦啊，走过路过请点个赞~