ExtJS在FiltersFeature中添加新数据类型

你好

使用数据过滤器过滤器功能。过滤器中需要创建下拉列表

通过与Ext.ux.grid.filter.StringFilter ux/grid/filter类似，仅使用ComboBox创建了一个新类Ext.ux.grid.filter.StringFilterRC 这一类的上限是：

Ext.define('Ext.ux.grid.filter.StringFilterRC', {
extend: 'Ext.ux.grid.filter.Filter',
alias: 'gridfilter.stringRC',
---------

将过滤器重置为过滤器功能：

var cnfFilter = {
    ftype: 'filters',
    autoReload: true,
    encode: true,
    local: false
};

连接到其电网Ext.grid.Panel:功能：[cnfFilter]

我编写的表列设置如下：

this.columns = [
      {
       xtype:'rownumberer'
      },
    {text: 'Data1', sortable:true, width:150,  filter: {type: 'string'}, dataIndex:'RC'},
    {text: 'Data2', sortable:true, width:150, filter: {type: 'stringRC'}, dataIndex:'CodePost'}]

问题是缺少数据类型-stringRC

以下是Ext.ux.grid.FiltersFeature的过程：

然后检查stringRc not类型。结果显示，此处加载的过滤类型的所有数据如下：

createFiltersCollection: function () {
    return Ext.create('Ext.util.MixedCollection', false, function (o) {
        return o ? o.dataIndex : null;
    });
}

虽然我可能错了。如何将数据类型添加到筛选器？请为我的英语道歉

更新stringRC的源代码

与Ext.ux.grid.filter.StringFilter的源代码类比

var storeData = Ext.create('Ext.data.Store', {
autoLoad: true,
idProperty: 'RC',
fields: ['RC', 'field1', 'field2', 'field3', 'field4', 'field5', 'field6', 'field7', 'field8', 'field9', 'field0'],
proxy: {
        type: 'direct',
        directFn: Ext.php.myPHPClass.myPHPFunction,
        reader: {
                  type: 'json',
                  root: 'data'
                }
       }
});

Ext.define('Ext.ux.grid.filter.StringFilterRC', {
    extend: 'Ext.ux.grid.filter.Filter',
    alias: 'gridfilter.stringRC', // new type alias

/**
 * @cfg {String} iconCls
 * The iconCls to be applied to the menu item.
 * Defaults to <tt>'ux-gridfilter-text-icon'</tt>.
 */
iconCls : 'ux-gridfilter-text-icon',

emptyText: 'Enter Filter Text...',
selectOnFocus: true,
width: 150,

/**
 * @private
 * Template method that is to initialize the filter and install required menu items.
 */
init : function (config) { // config for ComboBox
    Ext.applyIf(config, {
        enableKeyEvents: true,
        labelCls: 'ux-rangemenu-icon ' + this.iconCls,
        hideEmptyLabel: false,
        labelSeparator: '',

        typeAhead: true,
        queryMode: 'local',
        displayField: 'field1',

        store: storeData,


        listeners: {
            scope: this,
            keyup: this.onInputKeyUp,
            el: {
                click: function(e) {
                    e.stopPropagation();
                }
            }
        }
    });

    this.inputItem = Ext.create('Ext.form.field.ComboBox', config); 
    this.menu.add(this.inputItem);
    this.menu.showSeparator = false;
    this.updateTask = Ext.create('Ext.util.DelayedTask', this.fireUpdate, this);
},

/**
 * @private
 * Template method that is to get and return the value of the filter.
 * @return {String} The value of this filter
 */
getValue : function () {
    return this.inputItem.getValue();
},

/**
 * @private
 * Template method that is to set the value of the filter.
 * @param {Object} value The value to set the filter
 */
setValue : function (value) {
    this.inputItem.setValue(value);
    this.fireEvent('update', this);
},

/**
 * Template method that is to return <tt>true</tt> if the filter
 * has enough configuration information to be activated.
 * @return {Boolean}
 */
isActivatable : function () {
    return this.inputItem.getValue().length > 0;
},

/**
 * @private
 * Template method that is to get and return serialized filter data for
 * transmission to the server.
 * @return {Object/Array} An object or collection of objects containing
 * key value pairs representing the current configuration of the filter.
 */
getSerialArgs : function () {
    return {type: 'string', value: this.getValue()};
},

/**
 * Template method that is to validate the provided Ext.data.Record
 * against the filters configuration.
 * @param {Ext.data.Record} record The record to validate
 * @return {Boolean} true if the record is valid within the bounds
 * of the filter, false otherwise.
 */
validateRecord : function (record) {
    var val = record.get(this.dataIndex);

    if(typeof val != 'string') {
        return (this.getValue().length === 0);
    }

    return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
},

/**
 * @private
 * Handler method called when there is a keyup event on this.inputItem
 */
onInputKeyUp : function (field, e) {
    var k = e.getKey();
    if (k == e.RETURN && field.isValid()) {
        e.stopEvent();
        this.menu.hide();
        return;
    }
    // restart the timer
    this.updateTask.delay(this.updateBuffer);
}
});

---

解决了这个问题。一开始一切正常，问题在于别名的名称：“gridfilter.stringRC”：

我刚把它换了。没错，但我发现了教派之间的冲突。 只要你有空闲时间去理解。所以一切都很好

---

作为一个笑话获得：合适的程序员儿子对父亲说：爸爸，为什么每次太阳从东方升起，父亲，你每天都像儿子一样检查是的，检查父亲：看在上帝的份上，不要碰我的儿子，不要改变任何事，仍然工作

你做得完全正确。我创建了一个简单的测试用例，别名：“gridfilter.stringRC”已经足够识别和创建新的过滤器类型。我觉得问题出在你的过滤器的代码里。确切地说，是如何或什么不起作用的？在我设置了整个内容之后，就是指定的类型stringRC设置列：this.columns=[{xtype:'rownumberer'}，{text:'Data'，sortable:true，width:150，filter:{type:'stringRC'}]我在标题网格中丢失了菜单筛选器，因为我清理了该筛选器，该筛选器再次可用。这就是我认为新类型存在问题的原因。能否向我们展示stringRC筛选器类型的代码？更新后添加的源类型stringRC

var storeData = Ext.create('Ext.data.Store', {
autoLoad: true,
idProperty: 'RC',
fields: ['RC', 'field1', 'field2', 'field3', 'field4', 'field5', 'field6', 'field7', 'field8', 'field9', 'field0'],
proxy: {
        type: 'direct',
        directFn: Ext.php.myPHPClass.myPHPFunction,
        reader: {
                  type: 'json',
                  root: 'data'
                }
       }
});

Ext.define('Ext.ux.grid.filter.StringFilterRC', {
    extend: 'Ext.ux.grid.filter.Filter',
    alias: 'gridfilter.stringRC', // new type alias

/**
 * @cfg {String} iconCls
 * The iconCls to be applied to the menu item.
 * Defaults to <tt>'ux-gridfilter-text-icon'</tt>.
 */
iconCls : 'ux-gridfilter-text-icon',

emptyText: 'Enter Filter Text...',
selectOnFocus: true,
width: 150,

/**
 * @private
 * Template method that is to initialize the filter and install required menu items.
 */
init : function (config) { // config for ComboBox
    Ext.applyIf(config, {
        enableKeyEvents: true,
        labelCls: 'ux-rangemenu-icon ' + this.iconCls,
        hideEmptyLabel: false,
        labelSeparator: '',

        typeAhead: true,
        queryMode: 'local',
        displayField: 'field1',

        store: storeData,


        listeners: {
            scope: this,
            keyup: this.onInputKeyUp,
            el: {
                click: function(e) {
                    e.stopPropagation();
                }
            }
        }
    });

    this.inputItem = Ext.create('Ext.form.field.ComboBox', config); 
    this.menu.add(this.inputItem);
    this.menu.showSeparator = false;
    this.updateTask = Ext.create('Ext.util.DelayedTask', this.fireUpdate, this);
},

/**
 * @private
 * Template method that is to get and return the value of the filter.
 * @return {String} The value of this filter
 */
getValue : function () {
    return this.inputItem.getValue();
},

/**
 * @private
 * Template method that is to set the value of the filter.
 * @param {Object} value The value to set the filter
 */
setValue : function (value) {
    this.inputItem.setValue(value);
    this.fireEvent('update', this);
},

/**
 * Template method that is to return <tt>true</tt> if the filter
 * has enough configuration information to be activated.
 * @return {Boolean}
 */
isActivatable : function () {
    return this.inputItem.getValue().length > 0;
},

/**
 * @private
 * Template method that is to get and return serialized filter data for
 * transmission to the server.
 * @return {Object/Array} An object or collection of objects containing
 * key value pairs representing the current configuration of the filter.
 */
getSerialArgs : function () {
    return {type: 'string', value: this.getValue()};
},

/**
 * Template method that is to validate the provided Ext.data.Record
 * against the filters configuration.
 * @param {Ext.data.Record} record The record to validate
 * @return {Boolean} true if the record is valid within the bounds
 * of the filter, false otherwise.
 */
validateRecord : function (record) {
    var val = record.get(this.dataIndex);

    if(typeof val != 'string') {
        return (this.getValue().length === 0);
    }

    return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
},

/**
 * @private
 * Handler method called when there is a keyup event on this.inputItem
 */
onInputKeyUp : function (field, e) {
    var k = e.getKey();
    if (k == e.RETURN && field.isValid()) {
        e.stopEvent();
        this.menu.hide();
        return;
    }
    // restart the timer
    this.updateTask.delay(this.updateBuffer);
}
});

Ext.define('Ext.ux.grid.filter.StringFilterRC', {
extend: 'Ext.ux.grid.filter.Filter',
alias: 'gridfilter.stringRC',
-----------------------------------------
});