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

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

先上效果图：

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

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

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

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 &gt; 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 &lt;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}]

ExtJs4(四)将按钮像列一样放入Gri

热点推荐