Question

我的Ext.tree.Panel有TreeStore。此树位于选项卡中。问题是当我的应用程序加载应用程序中使用的所有树时加载它们的数据，即使商店在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: [...]
});

P.S。我发现如果我在树上将rootVisible更改为true，则此问题不会发生，但它会显示给根节点（我不想要）。

Answer 1

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

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

显式.load后，内联根被覆盖。

Answer 2

如果root不可见，则AJAX树将自动加载第一级层次结构（正如您已经自己证明的那样）。

我认为最好的方法是在某些操作后使root可见或创建树。我编写的代码阻止加载数据的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);

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

Answer 3

您可以在定义树时放置虚拟代理，然后在要开始使用树/存储时设置真实代理。例如：

var store = Ext.define('Ext.data.TreeStore', {
   ...
   // dummy proxy to avoid autoLoad on tree store construction
   proxy: {
      type: 'ajax',
      url: ''
   },
   ...
);

然后，当你想第一次使用它时，

store.setProxy({
   type: 'ajax',
   url: 'http://some/real/url',
   ...
});
store.load();

Answer 4

你可以用一个小的覆盖来解决它：

Ext.override(Ext.tree.View,  
{ 
    setRootNode: function(node)
    {
        var me = this;        
        me.store.setNode(node);
        me.node = node;
        if (!me.rootVisible && me.store.autoLoad)
        {
            node.expand();
        }
    }
});

afterlayout你需要一个load（）

Answer 5

补充XenoN所说的内容（尽管多年以后，我遇到了同样的问题）如果商店定义中的expanded属性设置为true，那么即使autoLoad设置为false，它也会自动加载。这对于TreeStore是唯一的。

但是，如果我们确实希望商店加载和扩展，则需要有时在创建后（需要时）在代码中设置expanded = true（这也会触发以前创建的商店的加载）。

设置store.setRoot（{expanded：true}）;在商店的使用者（即Ext.tree.Panel）中。当您要加载商店时，它将加载它。

像这样之后，store.load（）是多余的，因为expanded = true使商店的代理加载并转到服务器。我知道，很奇怪

Answer 6

最简单的方法是设置Store的根属性

Ext.create('Ext.data.TreeStore', { 
    ....
    autoLoad:false,
    root: {        
      expanded: false
    }
});

Answer 7

尝试使用children和autoLoad : false：

root: {
    children : []
}

ExtJS 4 TreePanel自动加载

7 个答案: