1、之前在winForm上有看過(guò)在選擇數(shù)據(jù)時(shí)會(huì)將一些數(shù)據(jù)放在待選框中，而用戶(hù)可以將想要選擇的數(shù)據(jù)放到備選框中，那么如何用Extjs實(shí)現(xiàn)類(lèi)似功能，我們選擇用兩個(gè)gridPanel來(lái)模擬其中的備選框和待選框。如下圖所示：
定義代碼如下：
{
xtype:'gridpanel',
multiSelect: true,
id:'staff',
x: 5,
y: 0,
height: 205,
width: 260,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'firstGridDDGroup',
dropGroup: 'secondGridDDGroup'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
}
}
},
store:StaffData, //加載數(shù)據(jù)的store
columns: columns,
stripeRows: true,
title: '從業(yè)人員',
margins: '0 2 0 0'
},
{
xtype:'gridpanel',
id:'admin',
x: 280,
y: 0,
height: 205,
width: 260,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'secondGridDDGroup',
dropGroup: 'firstGridDDGroup'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
}
}
},
store:AdminData,
columns:columns,
stripeRows:true,
title:'管理員',
margins:'0 0 0 3'
}
這樣我們?cè)谕献r(shí)即可以將數(shù)據(jù)存儲(chǔ)在所對(duì)應(yīng)的store中，需要的時(shí)候從store取出數(shù)據(jù)即可。
