2

背景
我有 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
});

我已经在receiveAjaxRequestcomboA更改的函数中引入了数据,这就是我尝试重新加载组合框的方式

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

PS:我对 ExtJS 不是很熟悉,代码是过去由其他开发人员编写的。我被分配了上面的需求

4

2 回答 2

0

尝试添加autoLoad : true商店的参数

于 2013-08-21T09:02:11.227 回答
0

我这样设置actionMethods

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

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

于 2014-03-25T08:46:26.423 回答