|
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' />
|