ExtJS combobox动态加载数据

数据源的坑

错误的数据源

var comboOptions = new Ext.data.JsonStore({
            url: 'TTS/TTS_Dept_FDate.ashx',
            root: 'children',
            fields: [{name:'ID', name:'Dept'}]
        });

后台返回的JSON格式[{"ID":"123","Dept":"财务"},...]

没有报错但是返回的数据每一行的对象的data属性和json属性不一致 导致选来选去都是第一项

修改后

var comboOptions = new Ext.data.JsonStore({
            url: 'TTS/TTS_Dept_FDate.ashx',
            root: 'children',
            fields: ['ID', 'Dept']
        });

因为返回的事JSON格式并不需要去指定Name直接以上格式就能获取数据

var cmb = new Ext.form.ComboBox({
            id: 'ruleid',
            name: 'ruleid',
            forceSelection: true,
            width: 150,
            listWidth: 150,
            valueField: 'ID',
            displayField: 'Dept',
            store: comboOptions,
            typeAhead: false,
            mode: 'local',
            triggerAction: 'all',
            selectOnFocus: false,
            allowBlank: false,
            listeners: {
                select: function (combo, record, index) {
                    stroe.baseParams['Dept'] = record.ID;
                    stroe.load();
                }
            }
        });

        comboOptions.load();
        comboOptions.on('load', function (store, record, opts) {
            var combo = Ext.getCmp("ruleid");
            var firstValue = record[0].data.ID; //这种方法也可以获得第一项的值
            combo.setValue(firstValue); //设置值
            stroe.load();
        })

这样就设置默认选中第一项

 var store = new Ext.Data.JsonStore({
            root: 'children',
            totalProperty: 'totalRows',
            idProperty: 'id',
            remoteSort: true,
            baseParams: { limit: YZSoft.EnvSetting.PageSize.defaultSize },
            fields: [
                { name: 'id' },
                { name: 'RowNum' },
                { name: 'PSN' },
                { name: 'PName' },
                { name: 'Price' },
                { name: 'Describe' },
                { name: 'Require' },
                { name: 'IsStop' },
                { name: 'CreateDate' },
                { name: 'CreateAccount' },
                { name: 'CreateName' }
            ],

            proxy: new Ext.data.HttpProxy({
                method: 'GET',
                url: 'TTS/TTS_Process.ashx'
            }),
            listeners: {
                scope: this,
                load: function () {
                    if (!Ext.isEmpty(this.grid.loadSelectId)) {
                        var sm = this.grid.getSelectionModel();
                        var rd = this.store.getById(this.grid.loadSelectId);
                        if (rd)
                            sm.selectRecords([rd]);
                        this.grid.loadSelectId = '';
                    }

                    this.updateStatus();
                },
                beforeload: function () {
                    stroe.baseParams['Dept'] = Ext.getCmp('ruleid').getValue();
                }
            }
        });

定义另外一个数据源，监听加载前事件把选中的值发送到后台

转载于:https://www.cnblogs.com/discoverydisport/p/4595801.html