I have a ExtJS (4.0) grid and it works fine. Now I want it to advance it a bit by adding filters to it. I want users to be able to filter items by the status.

I have created the following store:

var status_store = Ext.create('Ext.data.Store', {
    model: 'Statuses',
    proxy: {
        type: 'ajax',
        url: '/json/statuses/',
        reader: 'json'
    }
});

and I can see it loads, /json/statuses/ will return the following json object:

[
  {
    "name": "OK",
    "isActive": true
  },
  {
    "name": "Outdated",
    "isActive": true
  },
  {
    "name": "New",
    "isActive": true
  }
]

Now I define the filters:

var filters = {
    ftype: 'filters',
    encode: encode,
    local: local,
    filters: [{
        type: 'list',
        dataIndex: 'name',
        store: 'status_store',
        labelField: 'name'          
    }]
};

and add the filter to my column definition:

{text: 'Status', width: 120, dataIndex: 'status', sortable: true, filterable: true, filter: {type: 'list'}},

What happens is I get the following error when the grid loads:

Uncaught TypeError: Object json has no method 'read' (ext-all-debug.js:25702)

and when I click on the column header for the menu:

Uncaught TypeError: Object status_store has no method 'on' (ListMenu.js:69)

How can I fix this or am I doing something conceptually wrong?

Here is the full quote of my code just in case:

I have a ExtJS (4.0) grid and it works fine. Now I want it to advance it a bit by adding filters to it. I want users to be able to filter items by the status.

I have created the following store:

var status_store = Ext.create('Ext.data.Store', {
    model: 'Statuses',
    proxy: {
        type: 'ajax',
        url: '/json/statuses/',
        reader: 'json'
    }
});

and I can see it loads, /json/statuses/ will return the following json object:

[
  {
    "name": "OK",
    "isActive": true
  },
  {
    "name": "Outdated",
    "isActive": true
  },
  {
    "name": "New",
    "isActive": true
  }
]

Now I define the filters:

var filters = {
    ftype: 'filters',
    encode: encode,
    local: local,
    filters: [{
        type: 'list',
        dataIndex: 'name',
        store: 'status_store',
        labelField: 'name'          
    }]
};

and add the filter to my column definition:

{text: 'Status', width: 120, dataIndex: 'status', sortable: true, filterable: true, filter: {type: 'list'}},

What happens is I get the following error when the grid loads:

Uncaught TypeError: Object json has no method 'read' (ext-all-debug.js:25702)

and when I click on the column header for the menu:

Uncaught TypeError: Object status_store has no method 'on' (ListMenu.js:69)

How can I fix this or am I doing something conceptually wrong?

Here is the full quote of my code just in case: http://pastebin./SNn6gFJz

• javascript
• json
• extjs
• grid
• store

Share Improve this question Follow edited May 24, 2013 at 19:01 Darin Kolev 3,4091313 gold badges3333 silver badges4747 bronze badges asked May 14, 2011 at 19:43 abolotnovabolotnov 4,32299 gold badges6363 silver badges9090 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Thanks for Diagnosing the problem. The 4.1 fix is this modify ListMenu.js

in the else part of the constructor

replace

        me.store.on('load', me.onLoad, me);

with

        // add a listener to the store object
        var storeObject = Ext.StoreMgr.lookup(me.store);
        storeObject.on('load', me.onLoad, me);
        me.store = storeObject;

filters: [{
             type: 'list',
             dataIndex: 'name',
             store: 'status_store',
             labelField: 'name' ,
             options:[a,b]
         }]

You also have to give the options in list filters.

I was having a similar problem. I followed the @jd ment on the other answer here but the options menu just said "loading...". I resolved it with a bit of a hack here.