先介紹一下在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不是很熟悉，就用第二種吧。碼字辛苦啊，走過路過請點個贊~