扩展DataView实现（MultiSelect）多行选择框

 Ext中有一个Combox组件，但缺少了多行选择框，也就是普通html中size大于0的select选择框。
在网上看到有很多朋友都需要这个组件，今日无聊，于是就简单的扩展了一个，共享给大家。同时再赞ext的强大！

目前支持如下功能：
1、键盘上下箭头导航。
2、键盘上下箭头选择某项保证该项可见（自动滚动滚动条以保证显示）。
3、初始化默认选中第一条记录。
4、通过ctrl或shift实现多项选择。（这个是dataView本身支持的）


以下是通过Extend基于dataView扩展实现的multiSelect的代码：

Ext.form.MultiSelect=Ext.extend(Ext.DataView,{
    multiSelect:true,
    tpl: new Ext.XTemplate(  //view的模板
        '<tpl for=".">',
            '<div class="x-combo-list-item">{text}</div>',
        '</tpl>'
    ),
    style:'cursor:pointer;overflow:auto',
    cls:'x-combo-list-inner',
    ctCls:'x-combo-list',
    overClass:'x-view-over',
    selectedClass:'x-combo-selected',
    itemSelector:'div.x-combo-list-item',
    initComponent:function(){
        Ext.form.MultiSelect.superclass.initComponent.call(this);
    },
    onRender:function(){
        Ext.form.MultiSelect.superclass.onRender.apply(this,arguments);
        var _this=this;
        this.el.dom.onselectstart=function(){return false}  //防止鼠标选择
        new Ext.KeyNav(this.el, {
            "up" : function(e){
                var selIndex=_this.getSelectedIndexes()[0]-1;
                var index=selIndex>-1?selIndex:_this.store.getCount()-1;
                _this.select(index);
            },
            "down" : function(e){
                var selIndex=_this.getSelectedIndexes()[0]+1;
                var index=selIndex==_this.store.getCount()?0:selIndex;
                _this.select(index);
            }
        })
        //定位选中项保证可见
        this.on('selectionchange',function(t,node){    //定位选中项保证可见
            if(!(node=node[0]))return;
            var ct=this.el.dom,barHeight=0,diff;
            var ctSt=ct.scrollTop,nodeOft=node.offsetTop;
            if(ct.offsetHeight-ct.clientHeight>5){
                barHeight=16;
            }
            var cntPos=[ctSt,ctSt+ct.offsetHeight-barHeight];
            var nodePos=[nodeOft,nodeOft+node.offsetHeight];
            if(nodePos[0]<cntPos[0]){
                ct.scrollTop=nodeOft;
            }
            if((diff=nodePos[1]-cntPos[1])>0){
                ct.scrollTop=ctSt+diff+2;
            }
        });
        //选中第一行
        var selectFirst=function(){
            setTimeout(function() {
                _this.select(0)
            }, 1)
        };
        selectFirst();
        this.store.on('load',selectFirst)
    }
});

使用示例（JS）：

Ext.onReady(function(){
    var store=new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(),
        reader: new Ext.data.JsonReader({}, ['value','text']),
        data:[{
                value:1,text:'test1'
            },{
                value:2,text:'test2'
            },{
                value:3,text:'test3'
            },{
                value:4,text:'test4'
            },{
                value:5,text:'test5'
            },{
                value:6,text:'test6'
            },{
                value:7,text:'test7'
            },{
                value:8,text:'test8'
            },{
                value:9,text:'test9'
            },{
                value:10,text:'test10'
            }]
    })
    var ms=new Ext.form.MultiSelect({
        renderTo:'multiSel',
        store:store,
        height:150
    });
    Ext.get('g').on('click',function(){
        alert("选中行索引："+ms.getSelectedIndexes());
        var recs=ms.getSelectedRecords();
        var value="选中项的值";
        Ext.each(recs,function(rec){
            value+='/ntext:'+rec.get('text')+",value:"+rec.get('value')
        })
        alert(value);
    })
});

html代码：

<div id="multiSel" style="width:200px;"></div>
<input type="button" value="getRecord" id='g' />