EXT2.2 ComboBox中添加工具栏tbar -

liang1long2qun3

浏览: 15026 次
性别:
来自: 广州

最近访客更多访客>>

dy0419

laou

ForLove_ForYOU

bygenius

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (4)

社区版块

存档分类

EXT2.2 ComboBox中添加工具栏tbar

EXT JavaScript CSS HTML

在下拉框添加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>

效果图：