最近在做ext的项目,需求要求处理下拉列表要有全选和去全选的功能。在网上找了http://lovcombo.extjs.eu/ 这个是没有全选功能的,自己又补充了代码,希望对大家有用。
附件里lovcombo.css,和lovcombo.js都是在网上直接下载的,可以实现http://lovcombo.extjs.eu/的效果,lovcombo-new.js是重写了里面的onSelect:function(record, index)方法,拷出来给大家看下
这是旧文件里的
,onSelect:function(record, index) {
if(this.fireEvent('beforeselect', this, record, index) !== false){
// toggle checked field
record.set(this.checkField, !record.get(this.checkField));
// display full list
if(this.store.isFiltered()) {
this.doQuery(this.allQuery);
}
// set (update) value and fire event
this.setValue(this.getCheckedValue());
this.fireEvent('select', this, record, index);
}
} // eo function onSelect
修改过的给大家看下
,onSelect:function(record, index) {
if(record.get(this.displayField) == '全部'){
if(!record.get(this.checkField)){
this.selectAll();
}else{
this.deselectAll();
}
}else{
if(this.fireEvent('beforeselect', this, record, index) !== false){
// toggle checked field
record.set(this.checkField, !record.get(this.checkField));
// display full list
if(this.store.isFiltered()) {
this.doQuery(this.allQuery);
}
// set (update) value and fire event
var snapshot = this.store.snapshot || this.store.data;
var isNotCheck = false;
snapshot.each(function(r) {
if(!r.get(this.checkField) && r.get(this.displayField) != '全部') {
isNotCheck = true;
return;
}
}, this);
snapshot.each(function(r) {
if(r.get(this.displayField) == '全部') {
if(isNotCheck){
r.set(this.checkField, false);
}else{
r.set(this.checkField, true);
}
}
}, this);
this.setValue(this.getCheckedValue());
this.fireEvent('select', this, record, index);
}
}
}