ExtJs -从列列表中添加数据时，在表中呈现列列表时的延迟

ajsxfq5m 于 11个月前发布在其他

关注(0)|答案(1)|浏览(133)

我试图用表格中的列列表制作一个下拉按钮。我创建了这个代码，但问题是，当代码执行时，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',
  }, .....

型
我当前的用例

Ext.define('ExtModules.ToolbarItems.ManageColums', {
    xtype: 'managecolumns',
    
    manageColumns() {
      const button = {
        xtype: 'button',
        name: 'Manage',
        text: 'Manage Columns',
        handler: (btn, e) => {
          if (btn.menu.items.length === 0) {
            const menuItems = this.createList()

            btn.menu.removeAll()
            btn.menu.add(menuItems)
            btn.showMenu()
          }
        },
        menu: {
          xtype: 'menu',
          items: [],
        }
      };
      return button
    },

    createColumnMenuItems(button) {
      const menuItems = this.createList();
      const newMenu = Ext.create('Ext.menu.Menu', {
        items: this.createColumnMenuItems(menuItems),
      });
  
      button.setMenu(newMenu);
  },
  
  createList() {
    const columns = this.getColumnManager().getColumns();

    return columns.map((column) => ({
      xtype: 'menucheckitem',
      text: column.text,
      checked: true,
      cls: 'toolbar-helper__custom-checkbox-menu-item',
      handler: (item) => {
        const dataIndex = column.dataIndex;
        const columnInstance = this.getColumnByDataIndex(dataIndex);
  
        if (columnInstance) {
          columnInstance.setVisible(item.checked);
        }
      },
    }));
  },
  getColumnByDataIndex(dataIndex) {
    const columnManager = this.getColumnManager();
    const targetColumn = columnManager.getColumns().find((column) => column.dataIndex === dataIndex);
  
    return targetColumn;
  },
  
  getColumnManager() {
    return this.getHeaderContainer().getHeaderAtIndex(0);
  },
})

/* toolbar.js
Ext.define('ExtModules.Helpers.ToolbarHelper', {
  mixins: {
    ...
    manageColumns: 'ExtModules.ToolbarItems.ManageColumns',
  },
  requires: ['Ext.ux.exporter.Exporter'],
*/

型
有人能帮我吗？我真的不知道怎么修

extjs

来源：https://stackoverflow.com/questions/77578380/extjs-delay-in-rendering-column-list-in-table-when-adding-dropdown-from-column

1条答案

按热度按时间

1tuwyuhd1#

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

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',
        hidden: true,
        flex: 1
    }, {
        text: 'Email',
        dataIndex: 'email',
        hidden: true,
        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: !column.hidden, // Set initial value based on column visibility
                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],
            }],
        });
    },
});

字符串

赞(0）回复(0）举报 11个月前

我来回答

ExtJs -从列列表中添加数据时，在表中呈现列列表时的延迟

1条答案

相关问题

热门标签

最新问答