2

ブランチが異なる URL にある extjs4.1 を使用して、MVC アプリケーションでツリー ブランチの遅延読み込みを実現したいと考えています。私はかなりの方法で来て、かなりの壁にぶつかりましたが、今のところ分岐していません。

ここで私は失敗します：

Ext.define('OI.view.tree.Tree' ,{
    extend: 'Ext.tree.Panel',
    alias : 'widget.treepanel',
    store: 'TreeStore',
    collapsible: true,
    rootVisible: false,

    viewConfig: {
        plugins: [{
            ptype: 'treeviewdragdrop'
        }]
    },
    height: 350,
    width: 400,
    title: 'Directory Listing',

    initComponent: function() {
        this.store = Ext.data.StoreManager.lookup(this.store);
        this.store.getProxy().url = 'data/level1.json'; // <-- init loading
        this.store.load();
        this.callParent(arguments);
    },

    listeners: {
        itemclick: function(view, record) {

            console.info('ID: '+record.get('id'));
            console.info('TEXT: '+record.get('text'));
            console.info('PrimType: '+record.get('primaryType'));
            console.info(record.fields.getCount());
            console.info('JCRPATH: '+record.get('jcrPath'));

            var newBranchStore = Ext.create('Ext.data.TreeStore', {
                model: 'OI.model.Branch',
                autoLoad: true,
                proxy: {
                    type: 'ajax',
                    reader: {
                        url: 'data/'+ record.get('jcrPath') +'/level1.json', //<-- load json at the level of the url path returned by the model
                        type: 'json'
                    }
                },  
                folderSort: false
            });

            newBranchStore.load({url: 'data/'+ record.get('jcrPath') +'/level1.json',
                callback: function(){
                    console.log('loaded');
                    var mynode = newBranchStore.getNodeById('content_mytest');
                    console.info(mynode.get('id'));
                    this.store.getNodeById(record.get('id')).appendChild(mynode).expand(); // <-- this does not work
                },
                scope: this
            });
        }
    }
});

最初のレベルは正しくロードされていますが、ノードのクリックをトリガーすると、サーバーから適切な json が返されます。この場合は、デバッグ用の静的 json ファイルであり、ノードを静的にフェッチして追加しようとします。クリックされたもの。しかし、それは決して注射されません。

私が最終的に達成したいのは、jsonファイルによって返されたすべての子を、クリックされたノードに追加できることです。

さらに、私はツリーストアについて少し混乱しています...ツリーごとに1つのツリーストアしか存在できないと言ったとき、私は正しいですか? したがって、新しいノードを元のツリーストアにアタッチする必要があります...少し混乱しており、取得できるすべてのポインターが必要になる可能性があります。

4

1 に答える 1

3

あなたはこれを非常に複雑にしています。代わりにこのアプローチを使用してください（基本的に、正しいURLにロードする前にストアのURLを交換するだけです）：

Ext.define('OI.view.tree.Tree' ,{
    extend: 'Ext.tree.Panel',
    alias : 'widget.treepanel',
    store: 'TreeStore',
    collapsible: true,
    rootVisible: false,

    viewConfig: {
        plugins: [{
            ptype: 'treeviewdragdrop'
        }]
    },
    height: 350,
    width: 400,
    title: 'Directory Listing',

    initComponent: function() {
        this.store = Ext.data.StoreManager.lookup(this.store);
        this.store.getProxy().url = 'data/level1.json'; // <-- init loading
        this.store.load();
        this.callParent(arguments);
    },

    listeners: {

        beforeload: function(store, operation) {
            store.getProxy().url = 'data/'+ operation.node.get('jcrPath') +'/level1.json';
        }
    }
});
于 2012-08-10T20:58:18.403 に答える