extjs combobox 下拉列表菜单学习

西京刀客

于 2023-06-17 22:16:18 发布

阅读量2.3k

点赞数 1

分类专栏： web前端/桌面前端/js/ts/ui设计/ 文章标签： extjs 前端

本文链接：https://blog.csdn.net/inthat/article/details/131265160

版权

web前端/桌面前端/js/ts/ui设计/ 专栏收录该内容

74 篇文章 19 订阅

订阅专栏

extjs combobox 下拉列表菜单学习

⭐️来自很多年前的extjs笔记，只是一个归档，不做更新！⭐️

常用配置项

emptyText: “–请选择–” //没有值时的水印文字。
editable : false, //是否可编辑，默认可编辑，所以加上

常用监听事件

afterrender 组件渲染之后触发的事件

listeners : {
	'afterrender': function(){
		Ext.Ajax.request({
				method:'post',
				url:'/JF/PolicyConfig_SqlInjectRule/getCurrentObject',
				success:function(response){
					var res = Ext.decode(response.responseText);
					//console.log(res.now_object);
					Ext.getCmp('databaseObject').setValue(res.now_object);
				}
			});
		
	},
	'change':function( combobox, newValue, oldValue){

combobox 下拉列表菜单学习

下拉列表设置默认值使用setValue方法，注意传的参数 valueField的值，不是displayField要展现的值，即可展现你的选择

Ext.getCmp('databaseObject').setValue(res.now_object);

设置默认store中的第一行

获取当前下拉菜单的选择值,该组件有直接方法 getValue()

 var currentRuleSet = Ext.getCmp('ruleSet').getValue();

combobox怎么缩小fieldLabel跟下拉框之间的距离

设置labelWidth:80 宽度和表签字的宽度一样，就没有了间距；宽度越大，间距越明显。
4. 下拉框宽度如何设置?
注意这里的width是指整个下拉框组件的宽度包含你设置的label宽度，因此你要的下拉那个框的宽度就是
width-labelWidth的宽度

{
	xtype:'combobox',
	name:'enable',
	id:'enable',
	fieldLabel: '是否启用',
	labelWidth:60,
	width: 130,

	store:Ext.create('Ext.data.Store', {
	fields: ['value', 'enable' ],
	data : [
			{"value":"2", "enable":"全部"},
			{"value":"1", "enable":"启用"},
			{"value":"0", "enable":"关闭"}
		]
	}),
	value:'2',
	queryMode: 'local',
	displayField: 'enable',
	valueField: 'value'
},

自定义下拉菜单,然后可以添加一些自己的配置项，在初始化组件时进行一些处理如这里的 requireable: false, 在配置项在extjs中没有，是自己定义的

在配置该自定义的配置项后，label分割器加*并且布恩那个为空。

Ext.define('Kitchensink.form.JautoComboBox', {
	extend: 'Ext.form.field.ComboBox',
	alias: 'widget.JautoComboBox',
	editable:false,
	requireable: false,		
	initComponent: function()
	{
		if(this.requireable)
		{
			this.labelSeparator = '：<div style="color: red;line-height: 22px;float: right">*</div>';
			this.allowBlank = false;
		}		
		this.callParent();
	}
	//multiSelect: true,//支持多选
});

下拉菜单需要一个全部，初始设置value，但是store从服务器端ajax请求后返回内容没有全部，选择后就再看不到全部选项？如何解决

思路1：还是想办法服务器端返回的内容加上全部选项
思路2：前端处理

下拉菜单下方添加一个永久选项，让可以选择触发一个事件，从而弹出表单窗口让新建一个xx

思路：监听前端store的load事件，然后掉store的add方法； add方法刚好，加到下拉列表的最后一项
`
//测试成功，在下拉菜单组件中，添加listeners配置项，监听render方法然后获取该组件的store（getStore），绑定store的load事件方法，在load方法中使用store的add方法

  listeners : {
  	'render':function(combo){
  		//store的load事件setValue第一行
  		combo.getStore().on("load",function(s,r,o){
  			console.log(r[0]);
  			if(typeof r[0] != 'undefined'){
  				combo.setValue(r[0].get('id'));

  			}else{
  				combo.setValue('该对象暂无规则，请新建');							
  			}
  			s.add({id: '0',name: '--新建规则--'});
  		});
  	},


		'change':function( combobox, newValue, oldValue){
			//alert(newValue);
			if(newValue == 0){
				//触发自定义事件
				this.fireEvent('addRuleSet',newValue);
			}else{
	
				var store = Ext.ComponentQuery.query('sqlinjectrulelist')[0].getStore();
				var rurl = '/JF/PolicyConfig_SqlInjectRule/getList?ruleset_id='+newValue;
				store.proxy.url=rurl;
				store.type= 'ajax';
				store.reload();
			}
			
		}
	}

监听下拉框选择事件如上实例，可以监听 change事件
如果newValue是我们想要的值，然后调用fireEvent 触发一个自定义事件
在MVC开发模式下，在control中处理这个事件，如下,在control中下的如下，这里要注意

init: function(){
       console.log('Initialized Users! This happens before ' +
                   'the Application launch() function is called');
	var me = this;
	this.control({
//注意点：view中自定义的别名  组件类型[组件中定义name] //试过直接写sqlinjectrulelist不行，要具体到extjs组件上
		'sqlinjectrulelist combobox[name=ruleSet]':
		{
			"addRuleSet": function()
			{
				alert('xxxxxxxxxxx');
				return true;
			}
		},	
//view中的组件如下:
			xtype : 'JComboBox', //自定义 继承自'Ext.form.field.ComboBox' 别名		alias: 'widget.JComboBox',
			fieldLabel : '规则集',
			name : 'ruleSet',
			id : 'ruleSet',
			editable : false,
			displayField : 'name',
			valueField : 'id',
			queryMode : 'remote',
			store : Ext.create('Ext.data.Store',{
				fields:['id','name'],
				autoLoad:true,
				proxy:{
					type:'ajax',
					url:'/JF/PolicyConfig_SqlInjectRule/getRuleSet',
				}
			}),

发现一个问题：我的一个下拉列表第一次点击后，从远端获取完数据后，我的下拉列表又回缩了，之后，点击就没有该问题。

原因定位分析，发现是我代码的问题，我监听了 render事件，在这个组件渲染的时候绑定了store的load事件，之后我第一次点击下拉菜单，触发了load事件，这个时候我setValue让选择第一行就导致了我下拉框加载完突然回缩的问题。

listeners : {
		'render':function(combo){
			//store的load事件setValue第一行
			combo.getStore().on("load",function(s,r,o){
				console.log(r[0]);
				if(typeof r[0] != 'undefined'){
					//combo.setValue(r[0].get('id'));

				}else{
					combo.setValue('该对象无规则，请新建');							
				}
				s.add({id: '0',name: '--新建规则--'});


						
			});
		},

思路1：（推荐）
思考:发现下拉菜单comobox会在第一次点击下拉时，store会请求远端数据，但是页面在加载的时候，store已经ajax请求过了，combox中已经有值了，如何让有值得情况下，第一次点击下拉菜单不让store从服务器端ajax情况数据?

//竟然可以，你点击下拉的时候它不在会ajax请求了，只有在页面加载的那个时候才会ajax，或者你自己代码调load，解决了我的问题；

//queryMode : 'remote',
queryMode : 'local',

//完整代码
{
	xtype : 'JComboBox',
	fieldLabel : '规则集',
	name : 'ruleSet',
	id : 'ruleSet',
	editable : false,
	displayField : 'name',
	valueField : 'id',
	//queryMode : 'remote',
	queryMode : 'local',
	store : Ext.create('Ext.data.Store',{
		storeId:'ruleSetStore',
		fields:['id','name'],
		//autoLoad:false,
		autoLoad:true,
		proxy:{
			type:'ajax',
			url:'/JF/PolicyConfig_SqlInjectRule/getRuleSet',
		}
		/*
		listeners:{
			'load':function(){
				var record = this.getAt(0).get('id');
				Ext.getCmp('ruleSet').setValue(record);
			}
		}
		*/
	}),

思路2（失败）：我直接在store 中配置load事件处理函数，然后setValue；结果一样，下拉列表还是会回缩。

store : Ext.create('Ext.data.Store',{
	fields:['id','name'],
	//autoLoad:false,
	autoLoad:false,
	proxy:{
		type:'ajax',
		url:'/JF/PolicyConfig_SqlInjectRule/getRuleSet',
	},
	listeners:{
		'load':function(){
			var record = this.getAt(0).get('id');
			Ext.getCmp('ruleSet').setValue(record);
		}
	}
}),

思路3：在combox组件的afterrender 事件中，setValue；理论上是可以的，但是我这里为什么查到的结果值都是null，所以set不上- -

'afterrender':function(combo){

	//var fLine = Ext.ComponentQuery.query('[name=ruleSet]')[0].value;  //null
	//var record =  this.getStore().getAt(0).get('id');
	//失败原因：这里this指向的下拉菜单组件，没有getStore方法
	//combo.setValue(fLine);
},

分析：原因处在对getStore 方法理解不到位，查验官方api学习之：

如下例子，一个窗口+表单，我在窗口的button组件中，使用this.getStore,要理解，你这里的this指向button对象，button对象就没有getStore方法。
之前在MVC开发中的 controlel中使用this.getStore 都是this指向当前的控制器control
查询官方api 关键字“getStore” 发现有Ext.getStore 有Ext.app.Controller.getStore Ext.app.ViewMode.getStorel等，说明在集成自控制器的才有该方法- -

因此，改用全局Ext.getStore，传参为storeId值，MVC开发模式下，就时控制器配置项stores实例化的store名。

getStore ( name ) : Ext.data.Store
Shortcut to Ext.data.StoreManager#lookup. Gets a registered Store by id
PARAMETERS
name : Object
RETURNS :Ext.data.Store

storeId : String BINDABLE
Unique identifier for this store. If present, this Store will be registered with the Ext.data.StoreManager, making it easy to reuse elsewhere.
Note that when a store is instantiated by a Controller, the storeId will default to the name of the store if not specified in the class.
Defaults to: null
storeId 是一个字符串，唯一的标识一个store。如果存在，这个store将被注册到store管理器，使其方便在其它地方复用。
注意当一个store被控制器实例化时，storeId将默认为这个store的名字（在类中没有定义的情况下）
这里就是这用情况，使用全局的Ext.getStore传进来的storeId就是控制器实例化的store。

			var dialog = Ext.create('Ext.window.Window', {
				title: '新建规则集',
				maxHeight: 400,
				name: 'add_cmd',
				width: 400,
				modal: true,
				constrainHeader: true,
				autoShow:true,
				items:[
				{ xtype: 'rulesetform' }
				],
				buttons:
				[
					{
						xtype:'JButton',
						text:'保存',
						minWidth:62,
						handler:function() {
							var me = this;
							var win = this.up('window');
							var form = win.down('form').getForm();
							//var store = Ext.getStore('SqlInjectRules');  错误点
							var store = Ext.getStore('SqlInjectRules');

//在store中，我是这样定义的
	Ext.define('JUMP.store.SqlInjectRules', {
		extend: 'Ext.data.Store',
		model: 'JUMP.model.SqlInjectRule',
		/*
		data: [
		
			{ name: 'HaMaster', level: '2', enable: 'up',baseling_name:'激活' },
			{ name: 'HaMaster', level: '1', enable: 'up',baseling_name:'激活' }
		]
		*/
		pageSize: 15,

总结:

当你第一次点击下拉列表的时候，store就会触发ajax从远端获取数据，之后点击就不会触发store的ajax请求。简单的说就是下拉菜单，第一次点击会触发store的load事件
getStore不是任何组件都有的，在control（this指向control对象）中可以直接用，其他组件的情况，可以采用全局Ext.getStore获得；
传参为storeId值，MVC开发模式下，就时控制器配置项stores实例化的store名;
其他情况下，给store添加配置项 storeId:‘xxx’,给store一个id

对下拉框组件的setValue的理解

displayField : 'name',
valueField : 'id',
//queryMode : 'remote',
queryMode : 'local',
store : Ext.create('Ext.data.Store',{
	storeId:'ruleSetStore',
	fields:['id','name'],

问题：有时你用setValue（key）方法赋值，但是发现，显示的是key不是key对应的value值。
setValue()的前提是combobox中的data已经被加载，如果没有该record，则直接显示key

思路1：这种情况，通常可以让下拉组件store load一下，重新从服务器端获取最新的数据，服务器端返回的数据按数据库中id降序排序，监听的store的load事件，这个时候在setValue第一行；这样的话，store中就有完整的信息，setValue就不会有问题。
Ext.getCmp(‘ruleSet’).getStore().load();

	listeners : {
			'render':function(combo){
				//store的load事件setValue第一行
				combo.getStore().on("load",function(s,r,o){
					//console.log(r[0]);
					if(typeof r[0] != 'undefined'){
						//for void list back 
						combo.setValue(r[0].get('id'));

					}else{
						combo.setValue('该对象无规则，请新建');							
					}
					s.add({id: '0',name: '--新建规则--'});


					
				});
			},

下拉列表添加一条选项到第一行

如上面的例子操作store 使用 store的add添加到了下拉菜单的最后一行；有上面方法可以添加到第一行呢?

总结:

下拉菜单一般两个字段displayField,valueField 你setValue set的是value值，它会自动显示display的值，前提你store有这个完整record，否则，你setValue什么就显示什么（这个时候你ajax请求提交的参数值也是你的setValue的值，会出现问题，你实际想提交的valueField中的值，但是此时，没有值）

所以，最佳实践就是在record不完整的情况下，你想只是展示某个内容（不根据这个选择ajax情况），可以setValue；否则最好load一个完整的数据。