Question

我正在构建一个树状面板，当我单击+图标展开节点或单击-折叠节点时，该树的行为很奇怪，我的意思是：

select和itemdblclick事件正在按预期运行。

我还附上了这些事件：

beforeitemexpand: function(item, eOpts) {
                   ...
                },
                beforeitemcollapse: function(item, eOpts) {
                    ...
                },
                beforeexpand: function(panel, animate, eOPts) {
                    ...
                },
                beforecollapse: function(panel, animate, eOPts) {
                    ...
                }

它们都不起作用。

这是我的面板视图代码：

Ext.define('mycomponent.mytreepanelview', {
    extend: 'Ext.window.Window',
    itemId: 'mytreewindow',
    id: 'mytreewindow',
    xtype: 'mytreewindow',
    modal: true,
    bodyPadding: 10,
    height: 450,
    width: 375,
    closeAction: 'destroy',
    resizable: false,
    items: [
        {
            xtype: 'label',
            text: '?????'
        },
        {
            id: 'mytree',
            xtype: 'treepanel',
            border: true,
            width: 345,
            height: 325,
            title: '',
            rootVisible: false,
            header: false,
            displayField: 'text',
            store: Ext.create('mycomponent.store', {}),
            viewConfig: {
                preserveScrollOnRefresh: true,
                toggleOnDblClick: false
            }
        },
        {
            xtype: 'label',
            text: '??????'
        }
    ],
    buttons: [
        {
            itemId: 'okButton',
            id: 'okButton',
            text: 'Ok'
        },
        {
            itemId: 'cancelButton',
            id: 'cancelButton',
            text: 'Cancel'
        }
    ],

    initComponent: function () {
        this.callParent(arguments);
        dtzerp.getController('mycomponent.mycontroller');
    },

    constructor: function (config) {
        this.callParent(arguments);
        this.initConfig(config);
        return this;
   }
});

另外，这是我的商店：

Ext.define('mycomponent.mystore', {
    extend: 'Ext.data.TreeStore',
    alias: 'store.mystore',
    storeId: 'mystore',
    model: Ext.create('mycomponent.mymodel'),
    restful: true,
    autoLoad: false,
    root: {
        text: 'Loading...',
        id: 'NULL',
        expanded: true,
        loaded: true
    },
    proxy: {
        type: 'ajax',
        headers: {
           'Accept': '*/*',
           'Cache-Control': 'no-cache',
           'Content-Type': 'application/json',
           'Authorization': localStorage.token
        },
        extraParams: {
           sort: 'name',
           'filter[active]': true,
           'filter[idparent][null]': 0
        },
        reader: {
            type: 'json',
            rootProperty: 'data',
            successProperty: 'success'
        },
        api: {
           read: 'http://myurl',
           create: 'http://myurl',
           update: 'http://myurl',
           destroy: 'http://myurl'
        }
    },
    constructor: function (config) {
        config = Ext.apply({
            rootProperty: Ext.clone(this.rootData)
        }, config);

        this.callParent([config]);
    }
});

此外，来自rest api的数据始终是一个数组，其中包含选定节点中的数据，也就是说，只有选定节点的子级（如果有的话）。

在第一次调用时，其余的api将返回如下内容：

[
  {id: '1', name: 'One', text: 'Item one', leaf: false, idparent: null}, 
  {id: '2', name: 'Two', text: 'Item two', leaf: false, idparent: null}, 
  {id: '3', name: 'Three', text: 'Item three', leaf: true, idparent: null}
]

然后，如果我选择第一个项目，其余的api将返回如下内容：

[
   {id: '4', name: 'Child 1-1', text: 'Child 1 of 1', leaf: false: idparent: '1'},
   {id: '5', name: 'Child 2-1', text: 'Child 2 of 1', leaf: true: idparent: '1'}
]

以此类推...

更新我命令商店（Ext.data.TreeStore）加载包含树面板的窗口的show事件。这是在控制器中：

  init: function () {
            this.control({
               '#mytreewindow': {
                   show: function (item, eOPts) {
                     var store = Ext.getStore('mytreestore');
                     var children = [];
                     var that = this;

                     store.load({
                         callback: function (records) {
                             debugger;
                             console.log(records);

                             var children = [
                               {text: 'testing',
                                leaf: false,
                                idparent: null,
                                idelement: 1,
                                children: [{idparent: 1,
                                            text: 'testing child',
                                            idelement: 2,
                                            leaf: true,
                                            children: []
                               }
                             ];
                             store.loadData(children, false);
                         }

存储进入了回调，但是当debugger停止执行时，就在执行回调之前，用rest-api中的数据填充了树。因此，在store.loadData(...之后，树将更新为新信息，但是，当单击节点+中的节点testing时，它会返回到与图像相同的位置。

我是否缺少任何属性，或者需要添加任何配置以避免这种奇怪的行为？

Answer 1

您需要在onBeforeExpand的{{1}}中覆盖Ext.tree.View方法。

您可以这样做：

Ext.tree.Panel

看小提琴上的例子：https://fiddle.sencha.com/#view/editor&fiddle/2sbc

单击+展开后extjs treepanel怪异的行为

1 个答案: