extjs 4 如何更改网格上显示的列下拉列表的顺序

Posted 2023-02-26

【中文标题】extjs 4 如何更改网格上显示的列下拉列表的顺序

【英文标题】：extjs 4 How to change ordering of shown column dropdown on grid

【发布时间】：2012-12-28 20:27:51

【问题描述】：

使用 extjs 4.1.1 我有一个有很多列 >20 的网格。

最初，这些列中的大部分都是隐藏的。

如果用户想要取消隐藏列，他们可以选择任意列上的菜单，然后选择“列”选项，这会展开另一个下拉菜单/下拉菜单，显示所有列。显示旁边有复选框的那些。

我的问题是： 下拉列表中的列按照它们在网格中的定义/显示顺序显示。选择它们在网格中的显示顺序是有充分理由的（例如，id 作为第一列）。但是，当用户想要显示其中一个隐藏列时，他们很难在列表中找到它。这是因为列表是按照定义列的顺序排序的。我想按字母顺序对列下拉/退出列表进行排序，而不影响网格中列的顺序。

这是怎么做到的？

【问题讨论】：

网格排序似乎直接与列下拉列表相关联。在网格中拖动一列会更改下拉列表中的顺序...

【参考方案1】：

我想我找到了解决您问题的方法。

首先，我没有 Ext JS 4.1.1。我当前 PC 上的框架。所以我试图找出你阅读 Ext JS 4.1.3 的问题。 Sencha 网站上提供的文档。但我不认为他们在两个次要版本之间的框架的这一部分进行了重大更改，因此我的解决方案也应该适用于您的情况。 我已经使用 JSFiddle 尝试了我的解决方案。不幸的是，他们没有 4.1.1。 ext-all.css 文件，所以我手动链接了 Sencha 提供的 4.0.2 文件，所以菜单看起来有点错位。

标题菜单及其子菜单由 Ext.grid.header.Container 类管理。列子菜单由getColumnMenu 方法构造。每次拖放或其他应该影响网格视图的事件都会清除和重建整个菜单。因此，为了解决问题，覆盖此方法就足够了。因为headercontainer类在框架中太深了，很难扩展，所以必须使用Ext.base.override方法。

列子菜单的菜单项是根据以下结果创建的

   items = headerContainer.query('>gridcolumn[hideable]')

查询。因此，在创建菜单项之前，您必须首先按字母顺序对结果进行排序。我已将 sortColumns 方法添加到类中，该方法执行所有排序操作。

这就是我所做的：link to my solution。

我希望这就是你要找的。​​p>

【讨论】：

不知道为什么没有投票赞成并标记为答案，这是一个很棒的解决方案，为我节省了大量时间。