对Ext.form.TriggerField实现下拉菜单和手动两种方式输入数据

最新推荐文章于 2022-12-06 18:04:01 发布

原创最新推荐文章于 2022-12-06 18:04:01 发布 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#menu #function #null

ext2.0.2学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用ExtJS创建自定义下拉菜单，并实现菜单项被选中时自动填充到触发字段的功能。通过具体代码示例展示了自定义菜单的创建、事件处理及与触发字段的交互过程。

自定义菜单menu,当选中menu菜单后，选中数据将自动录入triggerfield中，同时menu将隐藏

	var menu=new Ext.menu.Menu({
		shadow:'frame',
		items:[
		{text:'栏目1',handler:onmenucheck},
		{text:'栏目2',handler:onmenucheck},
		{text:'栏目3',handler:onmenucheck}
		]
	})
	function onmenucheck(item){
		menu.hide();
		triggerfield.setValue(item.text);
	}

triggerfield控件实现，当点击下拉图标时自动出现menu菜单

	var triggerfield=new Ext.form.TriggerField({
		fieldLabel:'选择',
		name:'name',
		onSelect:function(record){
		},
		onTriggerClick:function(){
			if(this.menu==null)
			this.menu=menu;
			this.menu.show(this.el,"tl-bl?");
		}
	})

form表单控件，用于放置triggerfield

	var form2=new Ext.form.FormPanel({
		title:'form2',
		frame:true,
		items:[triggerfield],
		renderTo:'form2'
	})

效果显示：