2012-01-31 114 views
3

我想實現Ext.ux.grid.filter.ListFilter使用數據存儲(而不是硬編碼列表)作爲覆蓋here in the ExtJS 4 API。這些數據來自於罰款,我看到這列過濾選項,但它只是說,當過濾器選項應該是「正在加載...」:Extjs網格過濾器 - 動態ListFilter

Loading...

我很肯定我有這個配置根據API規範,但沒有任何運氣與此。有沒有人正確實施這個?

我用得到的過濾選項設置這樣的店:

// get the levels for filtering 
var levelStore = Ext.create('Ext.data.Store', { 
    fields: ['levels'], 
    proxy: { 
     type: 'ajax', 
     url: '../json?queryName=levels', 
     reader: 'json' 
    }, 
    autoLoad: true 
}); 

我實現了過濾器配置在列像這樣:

{ 
header: 'Level', 
dataIndex: 'levels', 
width: 160, 
sortable: true, 
filter: { 
    type: 'list', 
    store: levelStore 
} 

的幾點思考我:

我是否需要我的過濾器選項數據存儲才能具有特定的列標題,如「name」而不是「level」?

這是試圖讓他們從ajax加載之前的商店選項,並有一些未指定的方式告訴它加載這些過濾器選項 ajax返回?

我是否需要實現我的過濾器配置與列配置分開才能使用此配置? (我的所有其他過濾器配置,在列的配置正確的完成,似乎工作的罰款)

編輯:

JSON響應看起來是這樣的,不知道這是否是造成麻煩:

[{"levels":"Level 1"},{"levels":"Level 2"},{"levels":"Level 3"}] 

回答

2

我已經解決了。我最終配置了一個空選項數組options: []的篩選器,然後在商店中添加一個回調函數,將篩選器選項添加到空白選項數組中。就像這樣:

列模型(帶過濾器配置):

{ 
    header: 'Level', 
    dataIndex: 'levels', 
    itemId: 'levels', 
    width: 160, 
    sortable: true, 
    filter: { 
     type: 'list', 
     options: [], 
     phpMode: true, 
    } 
} 

商店:

var levelStore = Ext.create('Ext.data.Store', { 
    fields: ['levels'], 
    proxy: { 
     type: 'ajax', 
     url: '../json?queryName=levels', 
     reader: 'json' 
    }, 
    autoLoad: { 
     callback: function() { 
      grid.getView().getHeaderCt().child('#levels').initialConfig.filter.options = levelStore.collect('levels'); 
     } 
    } 
}); 

( '網格' 是我叫我的網格過濾器變量)

+0

我需要完全一樣的東西,但我不知道我將如何爲Ext js 3做這件事,我對這個答案感到讚賞。 – Thorusan86 2012-04-12 08:45:01

0

使用ExtJs 4.0.2a時,我也一樣。我ve find what autoLoad must false for store and some patch to Ext.ux.grid.menu.ListMenu`。

商店:

var levelStore = Ext.create('Ext.data.Store', { 
    fields: ['levels'], 
    proxy: { 
    type: 'ajax', 
    url: '../json?queryName=levels', 
    reader: 'json' 
    }, 
    autoLoad: false 
}); 

並替換ext-4.0.2a/examples/ux/grid/menu/ListMenu.js與顯示方法:

show : function() { 
     var lastArgs = null; 
     console.debug('show filter menu'); 
     return function(){ 
      if (this.loadOnShow && !this.loaded) { 
        this.store.load(); 
      } 
      if(arguments.length === 0){ 
       this.callParent(lastArgs); 
      } else { 
       lastArgs = arguments; 
       this.callParent(arguments); 
      } 
     }; 
    }() 
+0

我已經完成了你所說的。但現在得到一個錯誤'未捕獲TypeError:不能調用方法'每個'null' – 2013-02-27 21:14:35

-1

這是簡單的

filter: { 
    type: 'list', 
    options: levelStore.collect('levels') 
} 
+0

我的問題是'levelStore'沒有在網格渲染時加載。該解決方案將返回一個空數組。 – Geronimo 2013-06-02 03:58:02