带清空功能的ComboBox

最新推荐文章于 2024-01-21 14:21:40 发布

Leon1509

最新推荐文章于 2024-01-21 14:21:40 发布

阅读量301

点赞数

CC 4.0 BY-SA版权

文章标签： EXT prototype HTML

本文链接：https://blog.youkuaiyun.com/Leon1509/article/details/83423345

本文介绍了一个基于ExtJS框架的自定义ClearableComboBox组件的实现方法。该组件允许用户清除已选择的组合框选项，并通过点击清除按钮触发'clear'事件。文章提供了完整的JavaScript代码示例，展示了如何创建并使用这个组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cacb.js


Ext.form.ClearableComboBox = Ext.extend(Ext.form.ComboBox, {
    initComponent: function(){
        Ext.form.ClearableComboBox.superclass.initComponent.call(this);
        this.addEvents('clear');

        this.triggerConfig = {
            tag:'span',
            cls:'x-form-twin-triggers',
            style:'padding-right:2px',
            cn:[
                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger"},
                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger"}
            ]
        };
    },

    getTrigger: function(index){
        return this.triggers[index];
    },

    initTrigger: function(){
        var ts = this.trigger.select('.x-form-trigger', true);
        this.wrap.setStyle('overflow', 'hidden');
        var triggerField = this;
        ts.each(function(t, all, index){
            t.hide = function(){
                var w = triggerField.wrap.getWidth();
                this.dom.style.display = 'none';
                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
            };
            t.show = function(){
                var w = triggerField.wrap.getWidth();
                this.dom.style.display = '';
                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
            };
            var triggerIndex = 'Trigger'+(index+1);

            if(this['hide'+triggerIndex]){
                t.dom.style.display = 'none';
            }
            t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
            t.addClassOnOver('x-form-trigger-over');
            t.addClassOnClick('x-form-trigger-click');
        }, this);
        this.triggers = ts.elements;
    },

    onTrigger1Click: function() {this.onTriggerClick()},
    onTrigger2Click: function() {this.clearValue(); this.fireEvent('clear', this)}
});

Ext.reg('clearcombo', Ext.form.ClearableComboBox);


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>DateTimeField samples</title>

		<!-- Ext files -->
		<link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/dev/resources/css/ext-all.css" />
		<script type="text/javascript" src="http://extjs.com/deploy/dev/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="http://extjs.com/deploy/dev/ext-all-debug.js"></script> 		

		<script type="text/javascript" src="cacb.js"></script>

		<script type="text/javascript">
			Ext.QuickTips.init();
			Ext.form.Field.prototype.msgTarget = 'side';

			Ext.onReady(function(){
				var x = new Ext.form.ClearableComboBox({
					renderTo:Ext.getBody(),
					hiddenName : 'q_type', displayField : 'name', valueField : 'code', width : 100, emptyText : '全部······', mode : 'local', triggerAction : 'all', selectOnFocus : true
				})
			});
		</script>
	</head>
	<body>
	</body>
</html>