Extjs4 Treenode到GridView
ExtJS4 我想把树节点移到gridpanel。我想在这里插入它的相关数据。但每当我移动treenode时,它都会在该位置创建一个空行。 我已将树创建为:Extjs4 Treenode到GridView,extjs4,draggable,drag,treenode,gridpanel,Extjs4,Draggable,Drag,Treenode,Gridpanel,ExtJS4 我想把树节点移到gridpanel。我想在这里插入它的相关数据。但每当我移动treenode时,它都会在该位置创建一个空行。 我已将树创建为: var treeData = { text: 'Business Processes', children:[ {text: 'Process7', lob: 'Lob7', leaf:true}, {text: 'Process8', lob: 'Lo
var treeData = {
text: 'Business Processes',
children:[
{text: 'Process7', lob: 'Lob7', leaf:true},
{text: 'Process8', lob: 'Lob8', leaf:true},
{text: 'Process9', lob: 'Lob9', leaf:true},
{text: 'Process10', lob: 'Lob10', leaf:true},
{text: 'Process11', lob: 'Lob11', leaf:true},
{text: 'Process12', lob: 'Lob12', leaf:true}
]
};
bpTreeStore = Ext.create('Ext.data.TreeStore',{});
bpTreeStore.setRootNode(treeData);
new Ext.TreePanel({
id:'businessProcessTree',
store : bpTreeStore,
viewConfig: {
plugins:{
ptype: 'treeviewdragdrop',
dropGroup: 'dragGroup',
dragGroup: 'dragGroup',
dragText: 'Place the node to grid'
}
}
});
和网格一样
Ext.define('BusinessProcessStoreModel',{
extend:'Ext.data.Model',
fields: [
{ name:'businessProcessName', type:'string' },
{ name:'businessProcessLob', type:'string' }
]
});
bpMappingStore = Ext.create('Ext.data.ArrayStore', {
model:'BusinessProcessStoreModel',
data:[
['Process1', 'Lob1'],
['Process2', 'Lob2'],
['Process3', 'Lob3']
]
});
var bpMappingGrid = Ext.create('Ext.grid.Panel',{
id:'bpGridPanel',
region:'center',
frame:true,
layout:'fit',
height:300,
columns:[
{ header:'Process Name', dataIndex:'businessProcessName' },
{ header:'Process Lob', dataIndex:'businessProcessLob' }
],
store:bpMappingStore,
viewConfig: {
plugins:{
ptype: 'gridviewdragdrop',
dropGroup: 'dragGroup',
dragGroup: 'dragGroup',
dragText: 'Place the node to grid'
},
listeners: {
drop: function(node, data, overModel, dropPosition)
{
var position = (dropPosition=='after'?overModel.index + 1: overModel.index -1);
Ext.getCmp('bpGridPanel').store.insert(position, [[data.records[0].data.text, 'LOB']]);
//data.records[0].data.lob is undefined don't know why
}
}
}
});
请告诉我如何引用要插入gridpanel的两列中的treenode的“text”和“lob”
在这里,我创建了自己的我解决了这个问题。确保要拖动的树节点必须包含网格正在使用的模型中的属性 这里,treedata可以定义为
var treeData = {
text: 'Business Processes',
children:[
{text: 'Process7', businessProcessName: 'Process7', businessProcessLob: 'Lob7', leaf:true},
{text: 'Process8', businessProcessName: 'Process8', businessProcessLob: 'Lob8', leaf:true},
{text: 'Process9', businessProcessName: 'Process9', businessProcessLob: 'Lob9', leaf:true},
{text: 'Process10',businessProcessName: 'Process10', businessProcessLob: 'Lob10', leaf:true},
{text: 'Process11', businessProcessName: 'Process11', businessProcessLob: 'Lob11', leaf:true},
{text: 'Process12', businessProcessName: 'Process12', businessProcessLob: 'Lob12', leaf:true}
]
};
this.bpTreeStore = Ext.create('Ext.data.TreeStore',{root: this.treeData});
但是当我们将这个treedata对象指定给treestore时。它将删除新属性(businessProcessName和businessProcessLob)
因此,要添加它们,可以运行一个循环
for(var index in treeData.children)
{
this.bpTreeStore.tree.root.childNodes[index].data.businessProcessName = treeData.children[index].businessProcessName;
this.bpTreeStore.tree.root.childNodes[index].data.businessProcessLob = treeData.children[index].businessProcessLob;
}
在此之后,拖动工作正常:)