Question

我正在尝试使用搜索按钮实现网格类。这是我的代码：

Ext.define('My.grid.Base', {
    extend: 'Ext.grid.Panel',
    frame: false,
    loadMask: true,
    clicksToEdit: 1,
    autoExpandColumn: "name",
    initComponent: function () {
        this.bbar = {
            xtype: 'pagingtoolbar',
            displayInfo: true,
        }
        this.callParent(arguments);
    }
}); 

Ext.define("My.grid.SearchableGrid", {
    extend: "My.grid.Base",
    alias: "widget.users-grid",
    tbar:{
        width: 400,
        xtype: 'searchfield'
    },
    initComponent: function () {
        this.store = "User";
        this.columns = columns;
        this.tbar = tbar;
        this.callParent(arguments);
        this.down('pagingtoolbar').bindStore(this.store);
        this.down('searchfield').store = this.store;
    }
});

不幸的是我收到此错误： Uncaught TypeError: Cannot set property 'remoteFilter' of undefined

我需要每个searchfield元素来使用网格存储。我怎样才能做到这一点？感谢。

Answer 1

我已将可绑定的mixin添加到seachfield添加它似乎问题以某种方式解决了。

Ext.define('Ext.ux.form.SearchField', {
    extend: 'Ext.form.field.Trigger',
    mixins: {
        bindable: 'Ext.util.Bindable'
    },

    alias: 'widget.searchfield',

    trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',

    trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',

    hasSearch: false,
    paramName: 'query',

    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        me.bindStore(me.store || 'ext-empty-store', true);
        me.on('specialkey', function (f, e) {
            if (e.getKey() == e.ENTER) {
                me.onTrigger2Click();
            }
        });

        // We're going to use filtering
        me.store.remoteFilter = true;

        // Set up the proxy to encode the filter in the simplest way as a name/value pair

        // If the Store has not been *configured* with a filterParam property, then use our filter parameter name
        if (!me.store.proxy.hasOwnProperty('filterParam')) {
            me.store.proxy.filterParam = me.paramName;
        }
        me.store.proxy.encodeFilters = function (filters) {
            return filters[0].value;
        }
    },

    afterRender: function () {
        this.callParent();
        this.triggerCell.item(0).setDisplayed(false);
    },

    onTrigger1Click: function () {
        var me = this;

        if (me.hasSearch) {
            me.setValue('');
            me.store.clearFilter();
            me.hasSearch = false;
            me.triggerCell.item(0).setDisplayed(false);
            me.updateLayout();
        }
    },

    onTrigger2Click: function () {
        var me = this,
            value = me.getValue();

        if (value.length > 0) {
            // Param name is ignored here since we use custom encoding in the proxy.
            // id is used by the Store to replace any previous filter
            me.store.filter({
                id: me.paramName,
                property: me.paramName,
                value: value
            });
            me.hasSearch = true;
            me.triggerCell.item(0).setDisplayed(true);
            me.updateLayout();
        }
    }
});

现在，可搜索的用户网格组件可以定义如下：

Ext.define("My.grid.User", {
    extend: "My.grid.Base",
    alias: "widget.users-grid",
    initComponent: function () {
        var me = this;
        me.store = "User";
        me.columns = columns;
        me.tbar = tbar;
        me.tbar.store = 'User';
        me.callParent(arguments);
        me.down('pagingtoolbar').bindStore(me.store);
    }
});

如何将网格存储分配给SearchFieled

1 个答案: