ext从后台加载数据到下拉框

最新推荐文章于 2020-04-09 14:23:45 发布

最新推荐文章于 2020-04-09 14:23:45 发布 · 789 阅读

文章标签：

#后端 #ux

Ext_JS 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用ExtJS库创建一个下拉框，并将其与本地模式结合，用于从服务器获取数据填充选项。通过实例演示了如何配置下拉框的属性，如宽度、模式、允许空白等，以及如何将该下拉框添加到一个表单面板中。此教程适用于寻求在Web应用中实现动态选择功能的开发者。

加载数据

var comboxStore = new Ext.data.JsonStore({   
		autoLoad:true,   
		url : '/fileSavePolicyConf/getPolicyParaCode',  
		fields : [
		          {name : 'collTaskParaId',mapping : 'COLL_TASK_PARA_ID'},
		          {name : 'collPolicyParaName',mapping : 'COLL_TASK_PARA_NAME'}
		          ] 
	});

下拉框

var collTaskParaIdCombo = new ST.ux.ExtField.ClearableComboBox({
		name:'collTaskParaId',
		width: 150,
		mode : 'local',
		anchor:'97%',
		allowBlank: true,
		blankText : "不能为空",
		forceSelection : true,
		editable : false,
		fieldLabel:'策略参数名称',
		displayField:'collPolicyParaName',
		valueField:'collTaskParaId',
		hiddenField:'collTaskParaId',
		triggerAction : 'all',
		store : comboxStore
		
	});

把下拉按钮加到其他列表

var formPanel = new Ext.form.FormPanel({
		id:'node_formPanel2',
		padding:10,
		margin:10,
		labelWidth:80,
		split : true,
		scripts : true,
		autoScroll : true,
		viewConfig : {forceFit : true},
		layout:'form',
		items:[
			{xtype:'textfield', id:'policyParaId_text_add2',name:'policyParaId',anchor:'97%',fieldLabel:'策略参数id',hidden:true},
			{xtype:'textfield', id:'policyDefineId_text_add2',name:'policyDefineId',anchor:'97%',fieldLabel:'策略参数id',hidden:true},
			
			collTaskParaIdCombo,