GridPanel添加按钮列和响应函数
2013-12-16 15:45
246 查看
先介绍一下在grid面板添加按钮列的方法,这种方法也比较常用吧。只展示前端的编程哦,后台的java代码太多太累赘了,涉及到的ajax等等数据交互,就当作是个alert函数看待吧~ 上菜了,代码如下。
在grid面板定义了“操作”列,根据该列的值(dataIndex:'status')判断按钮文字,接下来定义按钮的响应方法。代码如下。
开始的“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“判断是否显示。
顺便也贴上弹出框的代码,如下所示。
这里注意,关于弹出窗口的大小,反正不用钱,不能太小气。。。
/************************** 华丽的分割线 *******************************/
另外,也有第二种添加按钮列和响应函数的办法,上菜。
这个function showButton(value)函数,可以这样定义:
两种方法,感觉还是第二种比较javascript一点,比较原味简单好使,而第一种就经过ext封装过了,如果ext不是很熟悉,就用第二种吧。码字辛苦啊,走过路过请点个赞~
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='添加' onclick='addFn();' >" ; } else{ return "<input type='button' value='查看详情' onclick='viewFn();' >" ; } } function addFn(){ //注意该函数应该是全局函数! alert('为什么还是——HelloWorld'); }
两种方法,感觉还是第二种比较javascript一点,比较原味简单好使,而第一种就经过ext封装过了,如果ext不是很熟悉,就用第二种吧。码字辛苦啊,走过路过请点个赞~
相关文章推荐
- WINCE SD 驱动学习
- String的"+"-StringBuilder-StringBuffer比较
- java中Set容器如何检查是否内部包含指定的对象
- 如果你缺少一份快乐的工作
- IE6中 PNG 背景透明的最佳解决方案
- wireshark-源码编译、AMIN协议、解析器讲解
- IOS中的动画
- CPaintDC类与 CClientDC类的区别
- quick-cocos2dx transition
- 对IOS设备中UDID的一些思考
- android Button,textView 等控件设置控件内嵌周围图片使用方法
- oracle 生成序列脚本
- KeyTools 命令用法
- android Button,textView 等控件设置控件内嵌周围图片使用方法
- ddc matlab仿真
- PostgreSQL模式匹配的方法 LIKE等
- 用python整理我的音乐
- 让sybase在Linux启动时自启动
- TC SRM573 div2 p1000
- ERROR 1093 (HY000) 错误的原因及解决方法!