在下拉框添加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>
??
效果图:
?