我的网格中的 Ext.js 3.2.1 我正在使用网格过滤器插件，我想仅在字符串数据类型列的列标题菜单中添加一项

Question

我正在使用 Ext.js 3.2.1，并且我有一个网格面板，其中像插件一样定义了插件

该插件是另一个名为 GridFilters.js 的 js 文件，所以我想在网格的列标题菜单中添加一项，如下所示 它已经在菜单中添加了“包含”过滤器，我想实现与包含过滤器相同的功能，但名称将是“开头为”，所以知道我如何实现这一点吗？

在 gridfilters.js 文件中 在渲染时他们调用 createmenu

https://fiddle.sencha.com/#view/editor&fiddle/3p6f

1. 上面是GridFilters.js文件中的createmenu函数

我添加了一项，但它只在标题菜单中显示该选项，但是当我将鼠标移至该选项时，什么也没有发生，我不知道我需要做更多的事情才能获得具有与现有图标相同的图标的文本框

我期待当将鼠标移至新添加的项目时，它会向我显示带有眼镜图标的文本框

Answer 1

请查看更新后的fiddle以供参考。在此我创建了一个覆盖，以在标题菜单中添加“包含”和“开头为”。当用户单击“Contains”或“StartsWith”时，它将创建一个文本字段作为子菜单。为此，我使用了自定义菜单。

自定义菜单：

Ext.define('CustomFilterMenu', {
    extend: 'Ext.menu.Menu',
    alias: 'widget.customfiltermenu',
    initComponent: function () {
        this.textField = Ext.create('Ext.form.field.Text', {
            emptyText: 'Filter...',
            enableKeyEvents: true,
            listeners: {
                keyup: this.onFilterKeyUp,
                scope: this
            }
        });
        this.items = [this.textField];
        this.callParent(arguments);
    },
    onFilterKeyUp: function (field, e) {
        var value = field.getValue();
        if (value.length >= 3) {
            store.clearFilter(); // Clear any existing filters
            if (this.ownerItem.text == 'Contains') {
                store.filterBy(function (record) {
                    return record.get('company').toLowerCase().indexOf(value.toLowerCase()) !== -1;
                });
            } else if (this.ownerItem.text == 'Starts With') {
                store.filterBy(function (record) {
                    return record.get('company').toLowerCase().indexOf(value.toLowerCase()) === 0;
                });
            }
        } else {
            store.clearFilter(); // Clear the filter if the input is less than 3 characters
        }
    }
});

标题菜单：

Ext.define('null', {
    override: 'Ext.grid.header.Container',
    getMenuItems: function () {
        var me = this,
            menuItems = [],
            hideableColumns = me.enableColumnHide ? me.getColumnMenu(me) : null;
        if (me.sortable) {
            menuItems = [{
                itemId: 'ascItem',
                text: me.sortAscText,
                iconCls: me.menuSortAscCls,
                handler: me.onSortAscClick,
                scope: me
            }, {
                itemId: 'descItem',
                text: me.sortDescText,
                iconCls: me.menuSortDescCls,
                handler: me.onSortDescClick,
                scope: me
            }];
        }
        if (hideableColumns && hideableColumns.length) {
            if (me.sortable) {
                menuItems.push({
                    itemId: 'columnItemSeparator',
                    xtype: 'menuseparator'
                });
            }
            menuItems.push({
                itemId: 'columnItem',
                text: me.columnsText,
                iconCls: me.menuColsIcon,
                menu: hideableColumns,
                hideOnClick: false
            });
        }

        menuItems.push({
            itemId: 'containsFilter',
            text: "Contains",
            iconCls: 'ux-gridfilter-text-icon',
            menu: Ext.create('CustomFilterMenu') // Add the custom filter menu as a submenu
        }, {
            itemId: 'startFilter',
            text: "Starts With",
            iconCls: 'ux-gridfilter-text-icon',
            menu: Ext.create('CustomFilterMenu')
        });
        return menuItems;
    },
})