EXTJS2.2组件Combobox下拉框获取数据

最新推荐文章于 2021-07-26 20:07:55 发布

小蜗牛的路

最新推荐文章于 2021-07-26 20:07:55 发布

阅读量1.4k

点赞数

分类专栏： EXT.JS 文章标签： EXT EXTJS 下拉框 Combobox

本文链接：https://blog.csdn.net/qq_37279783/article/details/83866612

版权

EXT.JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.获取数据

    var dataPath;
    //远程连接
    var genderStore = new Ext.data.JsonStore({         
            proxy: new Ext.data.HttpProxy({              
                method: "POST",               
                url: "<%=request.getContextPath()%>/tHarvestTableSdep.do?invoke=listTplMapDsForJson"   
            }),
            //root和fields需和后台获取json格式一致   
            root: "data",            
            fields:['dataPath','datasourceName'],    
            id:"departmentStore"
        });

        //本地静态数据
        var store = new Ext.data.SimpleStore({
						fields : ['name', 'dbType'],
						data : [[ "ORACLE",'ORACLE'],[ "MYSQL",'MYSQL']
							,[ "SQLSERVER",'SQLSERVER'],[ "DB2",'DB2']
						]
					});

        //这一步必须要，加载数据仓库连接
        genderStore.load();
        var comboBox =  new Ext.form.ComboBox({
            id:'comboBox',
            mode : 'local',
            store : genderStore,
            width : 300,
            triggerAction: 'all',
            editable: false,
            //如果是静态数据，这句删掉
            hiddenName:'dataPath',
            //展示数据
            displayField : 'datasourceName',
            //option的value
            valueField : 'dataPath',
            fieldLabel : '数据挂载目录',
            listeners:{
                'select':function(arg){
                    //获取选中下拉框的value
                    dataPath = Ext.getCmp("comboBox").getValue();
                }
            }
        });

后台传入前端的数据json格式：

{
	"data": [
        {
	    	"dataPath": "cd669a58f7bb454eb970a3403b01c39a",
	    	"datasourceName": "采集RELA"
	    }, {
	    	"dataPath": "f8d886a810f440e398eaa340eff717b0",
	    	"datasourceName": "数据标准数据源"
    	}, {
	    	"dataPath": "be32616ebbbb43c5a6fae9aa1d927cb5",
	    	"datasourceName": "数据标准采集数据源1008"
	    }
    ]
}

2.数据回显

store.on('load',function(){
    Ext.getCmp('dataPath').setValue(值);
    Ext.getCmp('dataPath').setRawValue(值);

    或：
    form_panel.getForm().findField("dataPath").setValue(值);
    form_panel.getForm().findField("dataPath").setRawValue(值);
})

后台复杂json格式拼写方法

参考了https://www.jb51.net/article/137203.htm博主的，感谢

        JSONObject jsonObject = new JSONObject();
        List<JSONObject> jsonList = new ArrayList<>();
        for (THarvestDatasource tHarvestDatasource : list) {
            JSONObject jsonObject2 = new JSONObject();
            jsonObject2.element("dataPath",tHarvestDatasource.getDataPath());
           jsonObject2.element("datasourceName",tHarvestDatasource.getDatasourceName());
            jsonList.add(jsonObject2);
        }
        jsonObject.element("data",jsonList);