ExtJS - AJAX 调用后无法重新加载组合

Posted 2023-02-26

【中文标题】ExtJS - AJAX 调用后无法重新加载组合

【英文标题】：ExtJS - Unable to reload combo after AJAX call

【发布时间】：2013-08-21 06:08:42

【问题描述】：

背景 我有 ExtJS 网格和选项，可以在 AJAX 的帮助下将新行/数据添加到网格和数据库中

要求 添加新数据时，我有两个组合框 A 和 B，而 B 依赖于 A，我想在 A 的值发生变化时过滤 B 中的值列表，

代码

Ext.define('Model.A', 
    extend: 'Ext.data.Model',
    fields: ['name', 'id', 'number']
);

Ext.define('Model.B', 
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'code']
);

商店

var store = 
    A: new Ext.data.Store(
        autoDestroy: true,
        model: 'Model.A',
        data: data.A,
        proxy: 
            type: 'memory'
        
    ),
    B: new Ext.data.Store(
        autoDestroy: true,
        model: 'Model.B',
        data: data.B,
        proxy: 
            type: 'memory'
        
    ),
;

网格

var grid = Ext.create('Ext.grid.Panel', 
    store: store.data,
    title: "###########",
    renderTo: "grid",
    loadMask: true,
    features: [filters],                
    columns: [
        // The ComboB
        text: "B",
        dataIndex: "comboB",
        width: 250,
        editor: 
            xtype: "combo",
            store: store.b,

            displayField: "###",
            valueField: "###",
            forceSelection: true,
            typeAhead: false,

            allowBlank: false,
            blankText: "required.",

            displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">### - ###</tpl>'),

            listConfig: 
                getInnerTpl: function() 
                    return "### - ###";
                
            
        ,
        renderer: function(value) 
            return data.B.code[value] + " - " + data.B.name[value];
        
    
    .
    . // other grid fields
    .
    ,
        // The ComboA
        text: "A",
        dataIndex: "comboA",
        width: 250,
        editor: 
            xtype: "combo",
            store: store.insurances,

            displayField: "###",
            valueField: "###",
            forceSelection: true,
            typeAhead: false,

            allowBlank: false,
            blankText: "required.",

            displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">### - ###</tpl>'),

            listConfig: 
                getInnerTpl: function() 
                    return "### - ###";
                
            ,

            listeners: 
                change: function (e) 
                    A_ID = "id":e.value;
                    grid.receiveAjaxRequest("URL",A_ID);
                
            
        ,
        renderer: function(value) 
            return data.A.number[value] + " - " + data.A.name[value];
        ,
        filter: 
            type: 'list',
            options: data.insurancesFilter,
            phpMode: true
        
    ],
    tbar: [
        // iconCls: 'icon-add',
        text: 'Add',
        scope: this,
        handler: function () 
            .
            .
            .
        
    ],
    plugins: [rowEditing],
    newRecord: false,
    listeners: 
        beforerender: function() 
            document.getElementById("grid").innerhtml = "";
        
    ,

    /*
     *The Ajax Request Where I have successfully 
     *Received the filtered data and now want to 
     *incorporate the data into the comboB
     */

    receiveAjaxRequest: function (url, ajaxData) 

        gridView = grid.getView();

        gridView.setDisabled(true);

        Ext.Ajax.request(
            url: url,
            params: ajaxData,
            success: function(response) 

                gridView.setDisabled(false);

                //console.log(store.vaccines.data);
                responseJSON = Ext.JSON.decode(response.responseText);

                            // This is how I tried to reload the combox box
                data.B = responseJSON;
                store.B.load();

                //store.B.data = response;
                console.log(store.B);

            
        );
     //receiveAjaxRequest
);

我已经在 receiveAjaxRequest 函数中带来了关于comboA更改的数据，这就是我尝试重新加载组合框的方式

data.B = responseJSON;
store.B.load();

PS：我对 ExtJS 不是很熟悉，而且代码是过去由其他一些开发人员编写的。我被分配了上述要求块

【参考方案1】：

尝试在店铺参数中添加autoLoad : true

【讨论】：

@zzlalani 它会在每次更改时重新加载您的商店

【参考方案2】：

我这样设置actionMethods：

actionMethods: 
        create: 'POST',
        read: 'POST',
        update: 'POST',
        destroy: 'POST'
    

每次按下组合框时都会重新加载组合框的内容（由 servlet 的 doPost 方法调用的数据库查询）。