extjs - Extjs Grid のリスト フィルター

Question

私は EXTJS が初めてで、その中に静的グリッドを作成したいと考えています。いくつかのドキュメントを読み、グリッドを作成しましたが、このためのフィルターを作成できません。ここに私のコードがあり、助けていただければ幸いです。

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

この例を見てみましたか