带复选框且支持搜索功能的下拉列表3

最新推荐文章于 2022-07-12 15:29:41 发布

原创最新推荐文章于 2022-07-12 15:29:41 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #HTML

本文介绍了一个使用ExtJS库实现的组合框列表初始化方法。该方法包括创建阴影效果、设置宽度、监听鼠标滚轮事件等功能，并根据配置参数创建头部、主体及底部元素。此外，还涉及了分页工具栏的使用和数据视图的绑定。


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();
            }

            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)
            {
                //alert(cls);
                //x-combo-list-item
                this.tpl = '<tpl for="."><div class="' + cls + '-item"><span class="unchecked" id="checkBox_{' + this
                        .displayField + '}"+ width="20">    </span>{' + 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');
            }
        }
    },

    bindStore : function(store, initial)
    {
        if (this.store && !initial)
        {
            this.store.un('beforeload', this.onBeforeLoad, this);
            this.store.un('load', this.onLoad, this);
            this.store.un('loadexception', this.collapse, this);
            if (!store)
            {
                this.store = null;
                if (this.view)
                {
                    this.view.setStore(null);
                }
            }
        }
        if (store)
        {
            this.store = Ext.StoreMgr.lookup(store);

            this.store.on('beforeload', this.onBeforeLoad, this);
            this.store.on('load', this.onLoad, this);
            this.store.on('loadexception', this.collapse, this);

            if (this.view)
            {
                this.view.setStore(store);
            }
        }
    },