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

原文来自:云朵网络http://www.02521.com/cod/9222.html