組合框選擇的篩選器商店

Question

我已經嘗試了這種不同的方式，但仍無法使篩選器正常工作。我的分機應用程序允許用戶從組合框中選擇單個狀態，下面的網格在所選的「值」=狀態中顯示更多數據。在選擇時，組合框觸發一個函數，用於過濾網格存儲並更新商店... 這是我的商店網格...

var store = Ext.create('Ext.data.Store', { 
     autoLoad: true, 
     id: 'OurData', 
     pageSize: 20, 
     pageNumber: 1, 
     remoteSort: true, 
     fields: [ 
    { name: 'States' }, 
    { name: 'FullName' }, 
    { name: 'Capital' }, 
    { name: 'Population' } 
    ], 
     proxy: { 
      type: 'ajax', 
      url: 'GetState/getS', 
      reader: { 
       type: 'json', 
       root: 'myTable', 
       idProperty: 'States', 
       totalProperty: '@count' 
      } 
     } 
    }); 
    store.loadPage(1); 

這是我的組合框

xtype: 'combo', 
        id: 'iccombo', 
        scope: this, 
        store: this.Combostore, 
        fieldLabel: 'Short State', 
        displayField: 'States', 
        valueField: 'States', 
        typeAhead: true, 
        triggerAction: 'all', 
        queryMode: 'remote', 
        name: 'State', 
        labelWidth: 125, 
        anchor: '95%', 
        listeners: { 
         scope: this, 
         select: this.fireFilter 
        } 

，這是其中濾波器應該發生......

fireFilter: function (value) { 

    // Get passed value 
    this.selectedC = value.getValue(); 
    console.log('selectedValue: ' + this.selectedC); 

    // Clear existing filters 
    this.store.clearFilter(false); 

    // Build filter 

    var myfilter = Ext.create('Ext.util.Filter', { 
     scope: this, 
     filterFn: function (item) { 
      var fieldNames = item.fields.keys; 

      for (var j = 0; j < fieldNames.length; j++) { 
       var fieldName = fieldNames[j]; 
       if (item.data[fieldName] != null) { 
        var stringVal = item.data[fieldName].toString(); 
        if (stringVal != null && stringVal.toLowerCase().indexOf(value.toLowerCase()) != -1) { 
         return true; 
        } 
       } 
      } 
      return false; 
     } 

    }); 
    // Apply filter to store 
    this.store.filter(myfilter); 
} 

當我運行代碼時，它顯示網格中的所有數據，並選擇組合框，它仍然顯示相同的數據。 由於某種原因，代碼從未運行通過filterFn ...因爲我的console.log doesn 「T顯示 這是我在Firebug的響應

_dc  1352902173425 
filter [{"property":null,"value":null}] 
limit 20 
page 1 
start 0 

，你可以清楚地看到，選擇了‘價值’是空的，但我的‘的console.log’打印價值選擇...我覺得我得到的傳遞價值和應用過濾器的方式是不正確的...請有人請看看...謝謝

UPDATE ...我能夠進入功能和我的console.log顯示所有田野......但一旦我到達最後一條if語句...我得到這個錯誤

TypeError: value.toLowerCase is not a function

我在做什麼錯在這裏？由於

Answer 1

另外，爲什麼你正在使用remoteSort但不remoteFilter到dbrin的anwser我也無法理解？您也可以通過使用this來解決範圍問題。

無論如何，我會建議你擴展一個新的組合類型，以便你也可以清除你的過濾器，如果你有需要。這是我爲自己使用而寫的一個擴展。請注意，篩選本身需要在onSearch方法中實施，該方法可以是遠程排序或本地排序。

Ext.define('Ext.ux.form.field.FilterCombo', { 
    extend: 'Ext.form.field.ComboBox', 
    alias: 'widget.filtercombo', 
    /** 
    * @cfg {string} recordField 
    * @required 
    * The fieldname of the record that contains the filtervalue 
    */ 

    /** 
    * @cfg {string} searchField 
    * @required 
    * The fieldname on which the filter should be applied 
    */ 

    /** 
    * @cfg {boolean} clearable 
    * Indicates if the clear trigger should be hidden. Defaults to <tt>true</tt>. 
    */ 
    clearable: true, 

    initComponent: function() { 
     var me = this; 

     if (me.clearable) 
      me.trigger2Cls = 'x-form-clear-trigger'; 
     else 
      delete me.onTrigger2Click; 

     me.addEvents(

      /** 
      * @event clear 
      * 
      * @param {Ext.ux.form.field.FilterCombo} FilterCombo The filtercombo that triggered the event 
      */ 
      'clear', 
      /** 
      * @event beforefilter 
      * 
      * @param {Ext.ux.form.field.FilterCombo} FilterCombo The filtercombo that triggered the event 
      * @param {String/Number/Boolean/Float/Date} value The value to filter by 
      * @param {string} field The field to filter on 
      */ 
      'beforefilter' 
     ); 

     me.callParent(arguments); 
     // fetch the id the save way 
     var ident = me.getId(); 

     me.on('select', function (me, rec) { 
      var value = rec[0].data[me.recordField], 
       field = me.searchField; 
      me.fireEvent('beforefilter', me, value, field) 
      me.onShowClearTrigger(true); 
      me.onSearch(value, field); 
     }, me); 
     me.on('afterrender', function() { me.onShowClearTrigger(); }, me); 
    }, 

    /** 
    * @abstract onSearch 
    * running a search on the store that may be removed separately 
    * @param {String/Number/Boolean/Float/Date} val The value to search for 
    * @param {String} field The name of the Field to search on 
    */ 
    onSearch: Ext.emptyFn, 

    /** 
    * @abstract onFilterRemove 
    * removing filters from the the 
    * @param {Boolean} silent Identifies if the filter should be removed without reloading the store 
    */ 
    onClear: Ext.emptyFn, 

    onShowClearTrigger: function (show) { 
     var me = this; 
     if (!me.clearable) 
      return; 
     show = (Ext.isBoolean(show)) ? show : false; 
     if (show) { 
      me.triggerEl.each(function (el, c, i) { 
       if (i === 1) { 
        el.setWidth(el.originWidth, false); 
        el.setVisible(true); 
        me.active = true; 
       } 
      }); 
     } else { 
      me.triggerEl.each(function (el, c, i) { 
       if (i === 1) { 
        el.originWidth = el.getWidth(); 
        el.setWidth(0, false); 
        el.setVisible(false); 
        me.active = false; 
       } 
      }); 
     } 
     // Version specific methods 
     if (Ext.lastRegisteredVersion.shortVersion > 407) { 
      me.updateLayout(); 
     } else { 
      me.updateEditState(); 
     } 
    }, 

    /** 
    * @override onTrigger2Click 
    * eventhandler 
    */ 
    onTrigger2Click: function (args) { 
     this.clear(); 
    }, 

    /** 
    * @private clear 
    * clears the current search 
    */ 
    clear: function() { 
     var me = this; 
     if (!me.clearable) 
      return; 
     me.onClear(false); 
     me.clearValue(); 
     me.onShowClearTrigger(false); 
     me.fireEvent('clear', me); 
    } 
}); 

這是未經測試的組合實現。請注意，我清理了你的filterFn，但我沒有做任何進一步的檢查。

{ 
    xtype: 'filtercombo', 
    id: 'iccombo', 
    scope: this, 
    store: this.Combostore, 
    fieldLabel: 'Short State', 
    displayField: 'States', 
    valueField: 'States', 
    typeAhead: true, 
    triggerAction: 'all', 
    queryMode: 'remote', 
    name: 'State', 
    labelWidth: 125, 
    anchor: '95%', 
    // begin new parts 
    recordField: 'States', 
    searchField: '', 
    clearable: false, 
    onSearch: function (me, value, field) { 

     // New part! 
     var store = Ext.StoreMgr.lookup('YourStoreIdName'); 

     // Clear existing filters 
     store.clearFilter(false); 

     // Build filter 
     var myfilter = Ext.create('Ext.util.Filter', { 
     scope: this, 
     filterFn: function (item) { 
      var fieldNames = item.fields.keys, 
       fieldName, stringVal, 
       len = fieldNames.length, 
       j = 0; 

      for (; j < len; j++) { 
       fieldName = fieldNames[j]; 
       if (item.data[fieldName] != null) { 
        stringVal = item.data[fieldName].toString(); 
        if (stringVal != null && stringVal.toLowerCase().indexOf(value.toLowerCase()) != -1) { 
         return true; 
        } 
       } 
      } 
      return false; 
     } 
    }); 
     // Apply filter to store 
     store.filter(myfilter); 
    } 
} 

我想這應該工作太

var myfilter = Ext.create('Ext.util.Filter', { 
      scope: this, 
      filterFn: function (rec) { 
       var fieldValue = rec[this.fieldName]; 
       if (fieldValue && fieldValue === this.value) 
         return true; 
      return false; 
      } 
     }); 

我設置this前兩瓦爾將其標記爲從外部範圍。

Answer 2

我看到2個問題

1. 店應該有remoteFilter: true設置

2. 在JavaScript中所有變量聲明都挑出來，提升到函數的開始。所以在循環中聲明的任何變量都應該被取出並在函數的頂部聲明。 JS沒有塊範圍（比如Java）。