2012-07-07 6 views
0

ExtJS4Treenode to GridView

treenode를 gridpanel로 이동하려고합니다. 관련 데이터가 여기에 삽입되기를 바랍니다. 그러나 treenode를 움직일 때마다 그 위치에 빈 행이 만들어집니다. 나는 '텍스트'과의 TreeNode의 '로브'를 참조하는 방법을 가르쳐주세요이 삽입 될

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 

       } 
      } 
     } 
    }); 

과 그리드 : 나뿐만 트리를 만들었습니다 그리드 패널의 두 열

여기 내 자신을 생성했습니다.

답변

1

이 문제가 해결되었습니다. 드래그되고있는 Treenode에 그리드가 사용하고있는 모델의 속성이 포함되어 있어야합니다. 여기

는 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}); 

로 정의 할 수 있지만, 우리는 treestore이 treedata 객체를 할당 할 때. 새 속성 (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; 
} 

, 드래그 작품 :