实现Ext combox 动态数据加载

最新推荐文章于 2018-01-05 16:31:33 发布

原创最新推荐文章于 2018-01-05 16:31:33 发布 · 755 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #json #JSP

Extjs 专栏收录该内容

52 篇文章

订阅专栏

本文介绍如何使用ExtJS框架中的组合框(combo)组件来加载服务器返回的JSON数据，并展示具体的实现代码。通过配置HttpProxy及JsonReader，实现与服务器交互并正确解析返回的数据，最终使组合框能够正确显示提交方式选项。

核心代码如下：（注意名称的对应！）

服务器生成的json数据形如：

[{"ACTIONNAME":"http_get","ACTIONVALUE":"3"},{"ACTIONNAME":"http_post","ACTIONVALUE":"4"}]

var actionStore = new Ext.data.Store({   //定义store数据
        proxy: new Ext.data.HttpProxy({
            url: 'action.jsp?type=loadAction' //递交到服务器的url
        }),
        reader: new Ext.data. JsonReader({},['ACTIONNAME', 'ACTIONVALUE']) //数据域
    });

{    //combox组件
             fieldLabel: '提交方式',
            xtype: "combo",
            store: actionStore,   //对应actionStore数据对象
            mode: 'local',
            triggerAction: 'all',
            allowBlank: false,
            displayField: 'ACTIONNAME',   //显示的名称，与数据域对应的
          valueField: 'ACTIONVALUE',    //ACTIONNAME对应值
            blankText: '请选择提交方式！',
            editable: false,
            emptyText: '－请选择提交方式－',
            hiddenName: 'ACTIONSUBMIT', //提交时候的名字
            selectOnFocus: true,
            anchor: "95%"
        }