带清空功能的ComboBox
cacb.js
HTML:
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);
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>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>