複数選択ドロップダウン拡張
3934 ワード
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;
// selectFirst();
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)
}
});
new Ext.form.MultiSelect({
store : new Ext.data.JsonStore({
proxy : new Ext.data.HttpProxy({
url : 'xxx'
}),
autoLoad : true,
root : 'msg',
fields : [
{name : 'text',type : 'string',mapping : 'text'},
{name : 'value',type : 'string',mapping : 'value'}
],
listeners : {
'beforeload' : function(store, options) {
//
Ext.apply(this.baseParams, {
'type' : 'xx'
});
},
'load' : function(ds, options) {
var firstValue = ds.getRange()[0].data.value; //
}
}
}),
id: 'xxx',
simpleSelect:false,
height : 80,
width : 100
})
//
var xx= Ext.getCmp('xxx');
// var indexs = xx.getSelectedIndexes();
var xxRec=xx.getSelectedRecords();
var x= '';
Ext.each(xxRec,function(rec){
x+=','+rec.get('value')
})
x= x.substr(1);