extjs动态和静态加载下拉框

最新推荐文章于 2022-11-21 10:37:34 发布

原创最新推荐文章于 2022-11-21 10:37:34 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #autoload #url

java web前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在ExtJS中实现下拉框的动态和静态加载。动态加载示例通过设置`autoLoad: false`和指定`HttpProxy`的URL，结合JsonReader进行远程数据获取。静态加载则展示了使用`SimpleStore`和预定义数据来创建本地下拉选项。两种方式都设置了相应的显示和交互属性，如`displayField`、`valueField`和`editable`等。

//加载组
            var portStore = new Ext.data.Store({
                        autoLoad : false,
                        proxy : new Ext.data.HttpProxy({
                                    url : './task.action?name=querykhsjfz'
                                }),
                        reader : new Ext.data.JsonReader({}, [{
                                            name : 'id'
                                        }, {
                                            name : 'name'
                                        }])
                    });

        var khsjfzCombo = new Ext.form.ComboBox({
                hiddenName : 'fzname',
                fieldLabel : '选择分组',
                emptyText : '请选择...',
                triggerAction : 'all',
                store : portStore,
                displayField : 'name',
                valueField : 'id',
                loadingText : '正在加载数据...',
                mode : 'remote',
                forceSelection : true,
                allowBlank : false,
                typeAhead : true,
                resizable : true,
                editable : false,
                anchor : '100%'
            });   

var checkflag=new Ext.form.ComboBox({
                        hiddenName : 'checkflag',
                        id : 'checkflag1',
                        fieldLabel : '发送方式',
                        triggerAction : 'all',
                        emptyText : '请选择',
                        store : new Ext.data.SimpleStore({
                                    fields : ['name', 'code'],
                                    data : [['即时发送', '0'], ['定时发送', '1']]
                                }),
                        displayField : 'name',
                        valueField : 'code',
                        mode : 'local',
                        forceSelection : true, // 选中内容必须为下拉列表的子项
                        editable : false,
                        allowBlank : false,
                        typeAhead : true,
                        resizable : true,
                        anchor : '100%'
                    });