ExtJS类ComboBox效果——ExtJS学习之旅

ExtJS高级应用：ExtJS类ComboBox效果

ExtJS学习之旅：目录   上一篇：  下一篇：

 

ComboBox的效果很不错，扩展了TriggerField打造一个可以包装任意Ext.Component对象的ComboBox效果：

测试页面

svn checkout http://cms4g.googlecode.com/svn/trunk/gae cms4g-read-only

原理：参考DateField,DateField利用了DateMenu，记得Menu原来有一个AdapterMenu，v3.2.0版本里面没有，不过可以直接使用 Menu 的items就可以了！

 

onTriggerClick : function(){
    	if (this.disabled || !this.content) return;
    	if (!this.menu) {
    		this.menu = new Ext.menu.Menu({width: this.getWidth(), plain: true, items: [this.content]});
    		this.content = this.menu.getComponent(0);
    		this.content.on('selectionchange', this.selectionchange, this);
    	}
    	this.menu.show(this.getEl(), 'tl-bl?');
    	this.content.selectCombo(this, this.value);
    }

 然后剩下的就是content需要提供即可方法:

• selectCombo 根据字段值 标记合适的元素为选择
• getCombo根据字段值 获取元素对象{id: '用于getValue()返回', text: '用于显示'}
• selectionchange(contentValue) 当选择的元素发生改变时需要content触发一个事件‘selectionchange‘

通过此扩展可以做任何TriggerField的东西了^ ^