Ext.ux.form.ComboBoxAdd

leon1509

浏览: 529398 次
性别:
来自: 北京

最近访客更多访客>>

yuanliangding

shine_fu

njdccy

tofhao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT prototype HTML

Ext.ux.form.ComboBoxAdd.js

Ext.namespace("Ext.ux.form");
Ext.ux.form.ComboBoxAdd = function(config) {
    Ext.ux.form.ComboBoxAdd.superclass.constructor.apply(this, arguments);        
};
Ext.extend(Ext.ux.form.ComboBoxAdd, Ext.form.ComboBox, {
    
    /***
     * trigger classes.
     */
    trigger1Class: '',            
    trigger2Class: 'x-form-add-trigger',
    
    /***
     * initComponent
     */
    initComponent : function(){
        Ext.ux.form.ComboBoxAdd.superclass.initComponent.call(this);
        
        /***
         * @event add
         * @param {field: Ext.ux.form.ComboBoxAdd, button: Ext.Element}
         * fires when 2nd trigger is clicked
         */
        this.addEvents({add : true});
        
        // implement triggerConfig from Ext.form.TwinTriggerField
        this.triggerConfig = {
            tag:'span', cls:'x-form-twin-triggers', cn:[
            {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
            {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
        ]};
    },
    
    /***
     * getTrigger
     * copied from Ext.form.TwinTriggerField
     * @param {Object} index
     */
    getTrigger : function(index){
        return this.triggers[index];
    },
    
    /***
     * initTrigger
     * copied from Ext.form.TwinTriggerField
     */
    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
     * defer to std ComboBox trigger method
     */
    onTrigger1Click : function() {
        this.onTriggerClick();    
    },
    
    /***
     * onTrigger2Click 
     * this is the "add" button handler.  fire 'add' event     
     */
    onTrigger2Click : function() {
        this.fireEvent('add', {field: this, button: this.triggers[1]});        
    },
        
	/***
	 * insert
	 * provide a convenience method to insert ONE AND ONLY ONE record to the store.	 	 	 	 
	 * @param {Object} index
	 * @param {Object} data (
	 */
	insert : function(index, data) {
        this.reset();
        
        var rec = new this.store.recordType(data);                
        rec.id = rec.data.id; 
        this.store.insert(index, rec);
		this.setValue(rec.data.id);
		this.fireEvent('select', this, rec, index);        
	}
});

html:

<!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>Ext.ux.form.ComboBoxAdd</title>
		<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>
		<style>
			.x-form-add-trigger {
				background-image: url(../../resources/images/default/grid/wait.gif) !important;
				background-position: center center !important;
				cursor: pointer;
				border: 0 !important;
				margin-left: 2px;
			}
		</style>
		<script type="text/javascript" src="cbAdd.js"></script>

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

			Ext.onReady(function(){
				var x = new Ext.ux.form.ComboBoxAdd({
					renderTo:Ext.getBody(),
					hiddenName : 'q_type', displayField : 'name', valueField : 'code', width : 100, emptyText : '全部······', mode : 'local', triggerAction : 'all', selectOnFocus : true
				});
				x.on('add', function(ev) {
					alert('you clicked the add button');  // <-- you might show a form on a dialog here
				});
			});
		</script>
	</head>
	<body>
	<a href="http://extjs.com/forum/showthread.php?t=20511" target="_blank">原贴地址</a>
	</body>
</html>

效果：

[img]/upload/attachment/118059/62a0235c-ad93-3129-bfe9-1ebf301e3c35.png[/img]