0

ExtJS4

ツリーノードをグリッドパネルに移動しようとしています。関連するデータをここに挿入します。しかし、ツリーノードを移動するたびに、その位置に空の行が作成されます。ツリーを次のように作成しました。

    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

                }
            }
        }
    });

グリッドパネルの 2 つの列に挿入されるツリーノードの「テキスト」と「ロブ」をどのように参照するか教えてください。

ここで私は自分自身を作成し​​ました

4

1 に答える 1

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

しかし、この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;
}

この後、ドラッグは正常に機能します:)

于 2012-07-07T07:57:08.570 に答える