Ext.ux.form.ComboBoxAdd
Ext.ux.form.ComboBoxAdd.jsExt.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; }, /*** * 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}); }, /*** * 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>效果：/upload/attachment/118059/62a0235c-ad93-3129-bfe9-1ebf301e3c35.png
页:
[1]