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}
]