extjs多行下拉框(combobox)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<style type="text/css">
html,body{
padding:10px;
}
</style>
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript">
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)
}
});
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);
})
});
</script>
</head>
<body>
<div id="multiSel" style="width:200px;"></div>
<input type="button" value="getRecord" id='g' />
</body>
</html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<style type="text/css">
html,body{
padding:10px;
}
</style>
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript">
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)
}
});
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);
})
});
</script>
</head>
<body>
<div id="multiSel" style="width:200px;"></div>
<input type="button" value="getRecord" id='g' />
</body>
</html>