ExtJS 4 TreePanel自动加载

Sti*_*tán 6 javascript extjs4

我有一个Ext.tree.PanelTreeStore.此树位于选项卡中.问题是当我的应用程序加载应用程序中使用的所有树时加载它们的数据,即使存储已打开autoLoad: false.

我怎么能防止在树上自动加载?

Ext.define('...', {
    extend: 'Ext.container.Container',
    alias: 'widget.listcontainer',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'container',
        html: "...",
        border: 0
    }, {
        xtype: '...',
        flex: 1,
        bodyPadding: 5,
        margin: '9 0 0 0'
    }]
});

Ext.define('...', {
    extend: 'Ext.data.TreeStore',
    model: '...',
    proxy: {
        type: 'ajax',
        reader: {
            type: 'json',
            root: 'data'
        },
        api: {
            read: 'some url'
        }
    }
});

Ext.define('...', {
    extend: 'Ext.tree.Panel',
    alias: 'widget....',
    id: '...',
    title: '...',

    height: 400,
    collapsible: true,
    useArrows: true,
    rootVisible: false,
    multiSelect: true,
    singleExpand: true,
    autoScroll: true,
    store: '...',

    columns: [...]
});
Run Code Online (Sandbox Code Playgroud)

PS我发现如果我在树上将rootVisible更改为true,则此问题不会发生,但随后会显示到根节点(我不想要).

pab*_*car 7

我遇到了同样的问题,为了避免隐式请求,我root在TreeStore的配置中指定了一个内联,如:

Ext.create('Ext.data.TreeStore', {
    model: '...',
    proxy: {
        type: 'ajax',
        reader: {
            type: 'json',
            root: 'data'
    },
    api: {
        read : 'some url'
    }
    folderSort: true,
    rootVisible: false,
    root: {expanded: true, text: "", "data": []} // <- Inline root
});
Run Code Online (Sandbox Code Playgroud)

显式后.load,内联根被覆盖.

  • 我不明白为什么这被投了票.在这里的所有解决方案中,这个解决方案是最灵活的,并且具有最少的黑客攻击.只需定义一个最初没有子项的空扩展根,然后您可以随时加载存储.甚至可以使用隐形根.效果很好!+1 (4认同)

Xup*_* MV 2

如果root是不可见的,那么AJAX树将自动加载层次结构的第一级(正如您已经自己证明的那样)。

我认为最好的方法是在执行某些操作后使根可见或创建树。我编写了阻止AJAX加载数据的请求的代码:

var preventTreeLoad = true;

store.on('beforeexpand', function(node) {
    if (node == this.getRootNode() && preventTreeLoad) {
        Ext.Ajax.abort(this.proxy.activeRequest);
        delete this.proxy.activeRequest;
    }
}, store);

var b = Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: 'btn',
});

b.on('click', function() {
    preventTreeLoad = false;
    this.load();
}, store);
Run Code Online (Sandbox Code Playgroud)

但我不建议使用这种方法。例如,如果 javascript 不是那么快 -Ajax可能会发送请求(不会读取响应,但服务器将执行操作)。