Results 1 to 3 of 3

Thread: Ext.ux.grid.FiltersFeature

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2011
    Vote Rating

    Default Ext.ux.grid.FiltersFeature


    Any one using this yet in 4.0? I have column filters feature configured to show up in all of my columns and I can type a filter string in and click the Filters menu item and the filterupdate event fires. However, when I try to call getFilterData on the filters feature, it does not return anything.

    The getFiltersData functions looks like this:

    getFilterData : function () {
    var filters = [], i, len;

    this.filters.each(function (f) {
    if ( {
    var d = [].concat(f.serialize());
    for (i = 0, len = d.length; i < len; i++) {
    field: f.dataIndex,
    data: d[i]
    return filters;

    It turns out never returns true .. not even for the current active column.

    I am also seeing that the check box for the filter menu is not getting checked. So I am wondering if the two are related and what I am doing wrong.

    On the grid, the features property is set as follows:

    features: [{
    ftype: 'filters',
    type: 'filters',
    encode: true,
    local: false,
    autoReload: false,
    filters: this.filterData

    this.fitlerData looks something like this:

    [{dataIndex: 'FullName', type: 'string' }]

    Not shown here is the rest of the array but its just all the same thing for the other columns in the grid.

    Can anyone take a guess as to why the checkbox for the menu item is not getting checked or why the getFilterData() function is not returning anything?

  2. #2
    Ext JS Premium Member
    Join Date
    Feb 2011
    Vote Rating

    Default Found the Problem


    After a couple of afternoons trying to figure out why this wasn't working, I finally found the answer.

    The problem lies with the onStateChange event in FilterFeatures class. Apparently this event is getting fired twice ... which explains why I was seeing 'filterupdate' fired twice.

    This event fires when you click on the check box for a column filter (after entering some text for the filter under normal use cases). When the event fires, it calls setChecked on the menu item, which causes the event to fire all over again. is passed to the setChecked method, but never gets set to true. The result is that the first time you check on the menu item, setChecked gets called, passing a false value from and effectively un-checks the menu item.

    Here is the fix:

    * @private
    * Handler for all events on filters.
    * @param {String} event Event name
    * @param {Object} filter Standard signature of the event before the event is fired
    onStateChange: function(event, filter) {
    if (event !== 'serialize') {
    var me = this,
    grid = me.getGridPanel(); = false;

    if (event == "activate") { = true;

    if (filter == me.getMenuFilter()) {
    //me.menuItem.setChecked(, false);

    if ((me.autoReload || me.local) && !me.applyingState) {


    if (!me.applyingState) {

    grid.fireEvent('filterupdate', me, filter);

    You can compare with the original code in examples\ux\grid\FiltersFeature.js. I commented out the setChecked method, and added some code to look at the event to determine if event was being fired because it is being activated.

    I have not tested this thoroughly to know if it is 100% or not but it should be pretty close. As far as I can tell, this entire feature does not work at all without this fix or something similar.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Warsaw, Poland
    Vote Rating

    Default What about Tree ?

    Any tips how to get this one working with TreePanel ?
    Using ExtGantt / ExtScheduler from Bryntum ? I can help you integrate and implement it.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts