ExtJs - 从列列表添加下拉列表时渲染表中列列表的延迟

Question

我正在尝试制作一个带有表中列列表的下拉按钮。我创建了这段代码，但问题是当代码执行时，

this

中还没有列，所以数组是

empty

。按钮已生成，但没有任何选项。解决办法是加上

setTimeout

，数据到了，但是按钮没有出现，因为应用程序已经渲染了它所在的容器。第二件事，

setTimeout

不是一个很好的解决方案。

Ext.define('ExtModules.ToolbarItems.ManageColums', {
  extend: 'Ext.form.Panel',
  mixins: { formFields: 'ExtModules.Components.GenericForm' },

  manageColumns() {
      // this.getColumns is []
      const columnMenuItems = this.getColumns().map((column) => {
      console.log(column)
      return {
        xtype: 'menucheckitem',
        text: column.text,
        checked: true,
        handler: (item) => {
          const dataIndex = column.dataIndex;
          const columnInstance = this.getColumnManager().getHeaderByDataIndex(dataIndex);

          if (columnInstance) {
            columnInstance.setVisible(item.checked);
          }
        },
      };
    });
  
    return Ext.create('Ext.button.Button', {
      text: 'Columns',
      menu: Ext.create('Ext.menu.Menu', {
        items: columnMenuItems,
      }),
    });

  },
})

...

Ext.define('ExtModules.Helpers.ToolbarHelper', {
  mixins: {
    ...
    manageColumns: 'ExtModules.ToolbarItems.ManageColums',
    ...
  },
  requires: ['Ext.ux.exporter.Exporter'],

  setUpExtensionBar(extensions, position) {
    const extensionBar = Ext.create('Ext.toolbar.Toolbar', {
      layout: {
        type: 'hbox',
        pack: 'start',
        align: 'stretch',
      },
      // height: 40,
      dock: position || 'top',
      items: extensions,
    })
    this.addDocked(extensionBar)
  },
...

...

Ext.define('ExtModules.Base.DashboardModule', {
  mixins: {
    extensions: 'ExtModules.ToolbarItems.SettingsEditor',
    toolbarHelper: 'ExtModules.Helpers.ToolbarHelper',
  }, .....

有人能帮我解决这个问题吗？我真的不知道如何解决它

Answer 1

请根据您的使用案例检查以下示例，

Ext.define('ExtModules.Store.SampleStore', {
    extend: 'Ext.data.Store',
    fields: ['id', 'name', 'age'],
    data: [{
        id: 1,
        name: 'John',
        age: 30
    }, {
        id: 2,
        name: 'Jane',
        age: 25
    }],
});

Ext.define('ExtModules.Grid.SampleGrid', {
    extend: 'Ext.grid.Panel',
    store: 'ExtModules.Store.SampleStore',
    id: 'SampleGrid',
    columns: [{
        text: 'ID',
        dataIndex: 'id',
        flex: 1
    }, {
        text: 'Name',
        dataIndex: 'name',
        flex: 1
    }, {
        text: 'Age',
        dataIndex: 'age',
        flex: 1
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }],
});

Ext.define('ExtModules.ToolbarItems.ManageColumns', {
    extend: 'Ext.panel.Panel',
    xtype: 'managecolumns',
    initComponent() {
        Ext.apply(this, {
            items: [{
                xtype: 'button',
                text: 'Columns',
                menu: this.createColumnMenu(),
            }, ],
        });
        this.callParent(arguments);
    },
    createColumnMenu() {
        return Ext.create('Ext.menu.Menu', {
            items: this.createColumnMenuItems(),
        });
    },
    createColumnMenuItems() {
        const columns = this.columns || [];

        return columns.map((column) => {
            return {
                xtype: 'menucheckitem',
                text: column.text,
                checked: true,
                handler: (item) => {
                    const dataIndex = column.dataIndex;
                    const columnInstance = this.getColumnByDataIndex(dataIndex);

                    if (columnInstance) {
                        columnInstance.setVisible(item.checked);
                    }
                },
            };
        });
    },

    getColumnByDataIndex(dataIndex) {
        const grid = Ext.getCmp('SampleGrid'); 
        const columnManager = grid.getColumnManager();
        const targetColumn = columnManager.getColumns().find((column) => column.dataIndex === dataIndex);

        return targetColumn;
    },

    getColumnManager() {
        return Ext.getCmp('SampleGrid').getHeaderContainer().getHeaderAtIndex(0); // Adjust 'yourGridId'
    },
});

Ext.application({
    name: 'MyApp',

    launch() {
        var sampleStore = Ext.create('ExtModules.Store.SampleStore');
        var sampleGrid = Ext.create('ExtModules.Grid.SampleGrid', {
            store: sampleStore,
        });
        var manageColumnsToolbar = Ext.create('ExtModules.ToolbarItems.ManageColumns', {
            columns: sampleGrid.columns,
        });

        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [{
                xtype: 'panel',
                items: [sampleGrid, manageColumnsToolbar],
            }],
        });
    },
});