在Sencha Touch 2中过滤列表

Question

我通过选择器过滤Sencha Touch 2中的列表。过滤有效，但是当我选择一个当前不在列表中的值时，列表变为空（这是可以理解的）。但是当我再次将列表过滤到另一个值时，实际上是在列表中，列表仍然保持为空，我必须重新加载它，以获取所有列表项。当我过滤到现有值时，我可以使用选择器多次修改过滤器值。

任何人都可以帮我解决这个问题吗？

继承我的代码：

商店：

Ext.define('my.store.statusStore', {
extend: 'Ext.data.Store',

config: {
    storeId: 'status',
    autoLoad: false,


    fields: [
        {name: 'count_all', mapping:'status__count_all'},
        {name: 'status', mapping: 'current_state'},
        {
            name: 'statusName',
            convert: function(value, record) {
                return my.Renderer.hostStatus(value, record);
            }
        }
    ],

    proxy: {
        type: 'ajax',
        url: '/frontend.php?q=/list,  //Live-Daten
        reader: {
            type: 'json',
            rootProperty: "hostTotals",
            idProperty: 'current_state'
        }
    },

    filters: [
        {
            property: 'status',
            value: ''
        }
    ]
}
});

要过滤的列表视图：

Ext.define('my.view.HostsListView', {
extend: 'Ext.Panel',
xtype: 'ListView',
alias: 'widget.ListView',

requires: [
    'Ext.dataview.List'
],

config: {
    title: 'Hosts',
    layout: 'fit',

    items: [
        {
            xtype: 'list',
            store: 'hosts',
            itemTpl: '<div><span class="host_status_{status}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>' +
                ' {host_name}' +
                '</div>',

            //Bei Klick auf Disclosurebutton zeige die Services des Hosts an

            onItemSelect: function(record) {
                this.parent.fireEvent('hostDetails', record)
            }
        }
    ]
},

initialize: function() {
    this.callParent(arguments);
    var store = Ext.getStore('hosts');
    store.load();

    this.buttonShowCounter = 0;
    this.hideButton = false;
},

show: function() {
    this.callParent(arguments);
    this.buttonShowCounter++;
    if (this.buttonShowCounter === 2) {
        var navbar = this.navigationBar;
        var data = [
            {text: 'Alle', value: ''},
            {text: 'Up', value: 0},
            {text: 'Down', value: 1},
            {text: 'Unreachable', value: 3},
            {text: 'Pending', value: 4}
        ];
        navbar.add(
            {
                xtype: 'statusPickerButton',
                align: 'right',
                pickerData: data,
                valueSet: this.valueSet,
                usedStore: 'hosts'
            }
        );
        this.buttonShowCounter = 0;
        this.hideButton = true;
    }
},

hide: function() {
    var navbar = this.navigationBar;
    if (this.hideButton === true) {
        navbar.remove(navbar.getComponent('ext-container-12').getComponent('statusPickerButton'));
    }
}
});

和选择器：

Ext.define('my.view.StatusPickerButton', {
extend: 'Ext.Button',
xtype: 'statusPickerButton',

requires: 'Ext.Picker',

config: {
    itemId: 'statusPickerButton',
    xtype: 'button',
    iconMask: true,
    iconCls: 'equalizer2',
    ui: 'plain',

    handler: function() {
        this.initializePicker();
    }
},

initializePicker: function() {
    if(!this.picker) {
        this.picker = new Ext.Picker(
            {
                cancelButton: false,
                useTitles: true,
                slots: [
                    {
                        name: 'showStatus',
                        title: 'Filter wählen',
                        data: this.pickerData    //Wird bei der Initialisierung im Controller übergeben
                    }
                ],
                usedStore: this.usedStore,
                listeners: {
                    pick: function(picker, slot) {  //wird ausgeführt, sobald ein Slot gewählt wurde.

                        //hole den aktiven Store und übergibt den Filter
                        var activeStore = Ext.getStore(this.usedStore);

                        //Übergebe den Filter
                        if (slot.showStatus == '') {
                            activeStore.filter();
                        }
                        else {
                            activeStore.filter('status', slot.showStatus);
                        }

                    }
                }
            }
        );
        //falls ein Filterwert bei der Initialisierung übergeben wurde, stelle den Filter auf diesen Wert ein
        if (this.valueSet != null) {
            this.picker.setValue({showStatus: this.valueSet})
        }
        Ext.Viewport.add(this.picker);
    }
    this.picker.show();
}
});