ExtJS4組合框加載/存儲問題

Question

我看到組合框有一個問題，其中有一個“更改”事件的偵聽器。 事件觸發時，它將運行一個函數，該函數過濾存儲，該存儲為另一個組合框供電，以過濾第二個組合框中可用的值。

這個想法是，當您從第一個組合框中的一個簡短列表中進行選擇時，它會縮減第二個組合框中的選擇。

加載表單后，您可以單擊第二個組合框並查看所有選擇，效果很好。 然后，當您在第一個組合框中選擇某個內容，然后再次單擊第二個組合框時，您會看到相應的縮短列表，但該列表變灰，並且“正在加載...”的內容只會旋轉，並且永遠不會消失。

如果您加載表格並在第一個組合框中選擇內容，然后單擊第二個組合框，它將進行篩選並顯示正常，但是如果您嘗試在第一個組合框中更改選擇並單擊，則會遇到我上面描述的加載問題第二個組合框。

請查看下面的代碼，該設置在其他屏幕上運行，並且似乎沒有此問題。

我已經建立了一個ext商店，如下所示：

var comboBreaker = Ext.create('Ext.data.Store', {
    autoLoad: false,
    remoteSort: true,
    remoteFilter: true,
    fields: [{
        name: 'id',
        mapping: 'item_id',
        type: 'int',
        useNull: false},
        'item_display_number','item_name', 'line_item_type_id', 'item_description'
    ],
    proxy:{
        type:'ajax',
        url: '/invoicer/data/getlineitems',
        reader: {
            type: 'json',
            successProperty: 'success',
            root: 'results',
            totalProperty: 'totalCount'
        },
        sorters:[{
            property:'item_display_number',
            direction:'ASC'
        }]
    }
});

該存儲為組合框供電，如下所示：

Ext.define('Writer.Form', {
    extend: 'Ext.form.Panel',
    alias: 'widget.writerform',

    requires: ['Ext.form.field.Text'],

    initComponent: function(){
        this.addEvents('create');
        Ext.apply(this, {
            activeRecord: null,
            frame: true,
            title: 'Line Item',
            id: 'writerform',
            fieldDefaults: {
                anchor: '100%',
                labelAlign: 'right'
            },
            items: [{
                xtype: 'combobox',
                fieldLabel: 'Item #',
                name: 'item_number',
                store: comboBreaker,
                displayField: 'item_display_number',
                valueField: 'id',
                allowBlank: false,
                forceSelection: true
            },{
                xtype: 'combobox',
                fieldLabel: 'Item Type',
                name: 'item_type',
                id: 'item_type',
                displayField: 'line_item_type',
                valueField: 'id',
                store: invoicer_lineItemTypeStore,
                forceSelection: true,
                labelWidth: 75,
                width: 200,
                listeners: {
                    change: {
                        fn: function() {
                            itemNumberFilter(comboBreaker);
                        }
                    }
                }
            }]
});

itemNumberFilter（）函數接受一個存儲並對其進行過濾，這是該代碼：

function itemNumberFilter( store ) {
    var id = Ext.getCmp('item_type').getValue();
    store.remoteFilter = false;
    store.clearFilter();
    if ( id ) {

        store.filter('line_item_type_id', id);
    }
    store.remoteFilter = true;
    store.removeAll();
    store.load({
        scope: this,
        callback: function( records ) {
            console.log('Loaded records!');
            console.log(records);
        }
    });
}

每當我在第一個組合框中更改選擇時，我都會看到已注銷的記錄，並且可以在第二個組合框中“看到”結果，但是它們始終顯示為“正在加載。” GIF。

編輯：視頻示例： http : //screencast.com/t/cUSHyFE6FIV

編輯：我相信這是解決方案：

lastQuery: '',
listeners: {
                        beforequery: {
                            fn: function(query) {
                                delete this.lastQuery;
                            }
                        }
                    }

將此添加到組合框配置可解決此問題。

Edit2：我遇到了由此引入的第二個錯誤，該錯誤通過添加以下內容得以修復：

this.clearValue();

到beforequery函數（刪除this.lastQuery）。 每次單擊下拉箭頭都會清除組合框的值。

Answer 1

比方說，你選擇項x在combo_1 ，然后項目a在削減下拉列表combo_2 。 然后，將combo_1的選擇combo_1為y ，然后將其再次更改為combo_2中的項目列表。 是a在新的列表中提供combo_2 ，從選擇項目導致y在combo_1 ？ 可能是當項目在組合列表中不再存在時嘗試保持選中狀態的問題。

在應用過濾器之前，您是否嘗試過清除combo_2的選擇？

Answer 2

您可以動態加載第二個combox框的存儲，但是請確保將第二個combox框設置為“本地”。