List filter in Extjs Grid - extjs

Question

I'm new to EXTJS and i want to create a static Grid in it. I have read some documents and created the grid and i cannot create filter for this. Here is my code and any help would be appreciated.
Ext.application({
name: 'Sample app',
launch: function() {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'email', type: 'string'},
{name: 'age', type: 'int'},
{name: 'city', type: 'string'}]
});
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'User1', email: 'user1#test.com', age: 21, city: 'City1' },
{ name: 'User2', email: 'user2#test.com', age: 28, city: 'City3' },
{ name: 'User3', email: 'user3#test.com', age: 24, city: 'City2' },
{ name: 'User4', email: 'user4#test.com', age: 23, city: 'City1' },
{ name: 'User5', email: 'user5#test.com', age: 24, city: 'City3' },
{ name: 'User6', email: 'user6#test.com', age: 26, city: 'City4' }
]
});
var optionsStore = Ext.create('Ext.data.Store', {
fields: ['city'],
proxy: {
type: 'ajax',
url: 'myData',
reader: 'array'
}
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
width: 400,
height: 200,
title: 'Users',
columns: [
{
text: 'Name',
width: 100,
sortable: true,
dataIndex: 'name',
filter: {type: 'string'}
},
{
text: 'Email Address',
width: 150,
sortable: true,
filterable : true,
dataIndex: 'email',
hidden: false,
filter: {type: 'string'}
},
{
text: 'Age',
width: 150,
sortable: true,
filterable : true,
dataIndex: 'age',
hidden: false,
filter: {type: 'numeric'}
},
{
text: 'City',
flex: 1,
sortable: true,
dataIndex: 'city',
filter: {
type: 'list',
store: optionsStore
}
}
]
});
}
});

Answer 1

Have you tried to have a look to this example