Extjs4 grid列的上移和下移

最新推荐文章于 2018-05-04 22:53:56 发布

转载最新推荐文章于 2018-05-04 22:53:56 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/smile361/archive/2012/10/16/2726204.html

本文介绍如何在Grid列中添加包含上移、配置和下移按钮的实现方式，通过设置Columns属性和使用actioncolumn、items等组件来轻松实现按钮功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

正常情况下列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

转载于:https://www.cnblogs.com/smile361/archive/2012/10/16/2726204.html