先上效果图:
配置一列实际由三个只有图标的按钮组成:分别为上移、配置和下移
这种效果实现起来十分简单,且看:
正常情况下列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}
]