在下拉框添加toolbar,下拉框的宽度不好控制。
ComboBox一般不需要Toolbar;多选下拉框中可能需要添加“全选”,“反选”按钮。
?
只需要覆盖initList方法,示例如下:
?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>04.form</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function() {
var tb = new Ext.Toolbar({items : [
{
text: '新建'
},
{
text: '修改'
},
{
text: '删除'
},
{
text: '显示'
}
]});
var wayComboBox = new Ext.form.ComboBox({
tbar : tb,
store: ['直销', '非直销'],
emptyText: '请选择',
mode: 'local',
editable : false,
fieldLabel : '性质',
valueField: 'value',
displayField: 'text',
triggerAction : 'all',
applyTo : 'combo',
initList : function() {
if (!this.list) {
var cls = 'x-combo-list';
this.list = new Ext.Layer({
shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
});
var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
this.list.setWidth(lw);
this.list.swallowEvent('mousewheel');
this.assetHeight = 0;
if (this.title) {
this.header = this.list.createChild({cls:cls + '-hd', html: this.title});
this.assetHeight += this.header.getHeight();
}
/* 添加的代码 */
if (this.tbar) {
var tbar = this.list.createChild();
this.tbar.render(tbar);
this.assetHeight += tbar.getHeight();
var lw = this.listWidth || Math.max(this.list.getWidth(),tbar.getWidth());
this.list.setWidth(lw);
}
this.innerList = this.list.createChild({cls:cls + '-inner'});
this.innerList.on('mouseover', this.onViewOver, this);
this.innerList.on('mousemove', this.onViewMove, this);
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
if (this.pageSize) {
this.footer = this.list.createChild({cls:cls + '-ft'});
this.pageTb = new Ext.PagingToolbar({
store:this.store,
pageSize: this.pageSize,
renderTo:this.footer
});
this.assetHeight += this.footer.getHeight();
}
if (!this.tpl) {
this.tpl = '<tpl for="."><div class="' + cls + '-item">{' + this.displayField + '}</div></tpl>';
}
this.view = new Ext.DataView({
applyTo: this.innerList,
tpl: this.tpl,
singleSelect: true,
selectedClass: this.selectedClass,
itemSelector: this.itemSelector || '.' + cls + '-item'
});
this.view.on('click', this.onViewClick, this);
this.bindStore(this.store, true);
if (this.resizable) {
this.resizer = new Ext.Resizable(this.list, {
pinned:true, handles:'se'
});
this.resizer.on('resize', function(r, w, h) {
this.maxHeight = h - this.handleHeight - this.list.getFrameWidth('tb') - this.assetHeight;
this.listWidth = w;
this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
this.restrictHeight();
}, this);
this[this.pageSize ? 'footer' : 'innerList'].setStyle('margin-bottom', this.handleHeight + 'px');
}
}
}
});
});
</script>
</head>
<body>
<br/><br/><br/>
<input id="combo" type="text"/>
</body>
</html>
??
效果图:

?