ExtJs4(4)——将按钮像列一样放入Grid中

先上效果图：

配置一列实际由三个只有图标的按钮组成：分别为上移、配置和下移

这种效果实现起来十分简单，且看：

正常情况下列Grid的Columns形式为：

Columns = [ {text:'方案与协议项关系ID', width:100, dataIndex:'p_mp_autoID', hidden: false}, {text:'方案ID', width:100, dataIndex:'P_autoID',hidden: false}, {text:'协议类型', width:100, dataIndex:'p_mp_type',hidden: false}, {text:'协议配置编码', width:100, dataIndex:'cp_autoID',hidden: false}, {text:'协议名称', width:100, dataIndex:'cp_proName', hidden: false} ]

若要为Grid添加上含有按钮的列，只需加上一列：

Columns = [ { text:'配置', menuDisabled: true, sortable: false, align:'center', xtype: 'actioncolumn', width: 60, items: [{ icon :'/platForm/res/UpArraw.gif', id: 'upArraw', tooltip: '向上移动', handler: function(grid, rowIndex, colIndex) { //rowIndex，colIndex均从0开始 var currentStore =pageVar.secondGrid.getStore(); var rec =currentStore.getAt(rowIndex); if ( rowIndex > 0 ) { currentStore.remove(rec); currentStore.insert( rowIndex -1, rec ); //如果不是第一条的话，则将此数据插入到上一条的上一行 } } },{ icon :'/platForm/res/plugin.gif', tooltip: '配置该项', handler: function(grid, rowIndex, colIndex) { //rowIndex，colIndex均从0开始 var rec = pageVar.secondGrid.getStore().getAt(rowIndex); pageVar.currentRowIndex = rowIndex; OptionBtnEvn(rec); } },{ icon :'/platForm/res/DownArraw.gif', tooltip: '向下移动', id: 'downArraw', handler: function(grid, rowIndex, colIndex) { //rowIndex，colIndex均从0开始 var currentStore =pageVar.secondGrid.getStore(); var rec =currentStore.getAt(rowIndex); if ( rowIndex <currentStore.data.items.length - 1 ) { currentStore.remove(rec); currentStore.insert( rowIndex +1 , rec.data ); //不是最后一条的话，则将此数据插入到此行的下一行的下一行 } } }] }, {text:'方案与协议项关系ID', width:100, dataIndex:'p_mp_autoID', hidden: false}, {text:'方案ID', width:100, dataIndex:'P_autoID',hidden: false}, {text:'协议类型', width:100, dataIndex:'p_mp_type',hidden: false}, {text:'协议配置编码', width:100, dataIndex:'cp_autoID',hidden: false}, {text:'协议名称', width:100, dataIndex:'cp_proName', hidden: false} ]