1、扩展js类库，在项目中建立一个 js文件，命名为:xxx.js 其代码为
if ('function' !== typeof RegExp.escape){
RegExp.escape = function (s)
{
if ('string' !== typeof s)
{
return s
}
return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1')
}
}
Ext.ns('Ext.form')
Ext.form.MultiSelect = Ext.extend(Ext.form.ComboBox,
{
checkField: 'checked',
multi: true,
separator: ',',
initComponent: function ()
{
if (!this.tpl)
{
this.tpl = '<tpl for=".">' + '<div class="x-combo-list-item">'
+ '<img src="' + Ext.BLANK_IMAGE_URL + '" '
+ 'class="ux-MultiSelect-icon ux-MultiSelect-icon-'
+ '{[values.' + this.checkField + '?"checked":"unchecked"'
+ ']}">'
+ '{[values.' + this.displayField + ']}'
+ '</div>'
+ '</tpl>'
}
Ext.form.MultiSelect.superclass.initComponent.apply(this, arguments)
this.on(
{
scope: this,
beforequery: this.onBeforeQuery,
blur: this.onRealBlur
})
this.onLoad = this.onLoad.createSequence(function ()
{
if (this.el)
{
var v = this.el.dom.value
this.el.dom.value = ''
this.el.dom.value = v
}
})
},
initEvents: function ()
{
Ext.form.MultiSelect.superclass.initEvents.apply(this, arguments)
this.keyNav.tab = false
},
beforeBlur: function ()
{
},
postBlur: function ()
{
},
clearValue: function ()
{
this.value = ''
this.setRawValue(this.value)
this.store.clearFilter()
this.store.each(function (r)
{
r.set(this.checkField, false)
}, this)
if (this.hiddenField)
{
this.hiddenField.value = ''
}
this.applyEmptyText()
},
getCheckedDisplay: function ()
{
var re = new RegExp(this.separator, "g")
return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ')
},
getCheckedValue: function (field)
{
field = field || this.valueField
var c = []
var snapshot = this.store.snapshot || this.store.data
snapshot.each(function (r)
{
if (r.get(this.checkField))
{
c.push(r.get(field))
}
}, this)
return c.join(this.separator)
},
onBeforeQuery: function (qe)
{
qe.query = qe.query.replace(new RegExp(RegExp.escape(this.getCheckedDisplay()) + '[ ' + this.separator + ']*'), '')
},
onRealBlur: function ()
{
this.list.hide()
var rv = this.getRawValue()
var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'))
var va = []
var snapshot = this.store.snapshot || this.store.data
Ext.each(rva, function (v)
{
snapshot.each(function (r)
{
if (v === r.get(this.displayField))
{
va.push(r.get(this.valueField))
}
}, this)
}, this)
this.setValue(va.join(this.separator))
this.store.clearFilter()
},
onSelect: function (record, index)
{
if (this.fireEvent('beforeselect', this, record, index) !== false)
{
record.set(this.checkField, !record.get(this.checkField))
if (this.store.isFiltered())
{
this.doQuery(this.allQuery)
}
if (this.multi)
{
if (record.get("key") == "---" && record.get(this.checkField))
{
this.setValue("---")
}
else
{
this.setValue(this.getCheckedValue())
}
}
else
{
this.clearValue()
this.value = record.get(this.valueField)
this.setRawValue(record.get(this.displayField))
this.list.hide()
}
this.fireEvent('select', this, record, index)
}
},
setValue: function (v)
{
if (v)
{
v = '' + v
if (this.valueField)
{
this.store.clearFilter()
this.store.each(function (r)
{
var checked = !(!v.match('(^|' + this.separator + ')'
+ RegExp.escape(r.get(this.valueField))
+ '(' + this.separator + '|$)'))
r.set(this.checkField, checked)
}, this)
this.value = this.getCheckedValue()
this.setRawValue(this.getCheckedDisplay())
if (this.hiddenField)
{
this.hiddenField.value = this.value
}
}
else
{
this.value = v
this.setRawValue(v)
if (this.hiddenField)
{
this.hiddenField.value = v
}
}
if (this.el)
{
this.el.removeClass(this.emptyClass)
}
}
else
{
this.clearValue()
}
},
selectAll: function ()
{
this.store.each(function (record)
{
record.set(this.checkField, true)
}, this)
this.doQuery(this.allQuery)
this.setValue(this.getCheckedValue())
},
deselectAll: function ()
{
this.clearValue()
}
})
Ext.reg('multiSelect', Ext.form.MultiSelect)
2、在ext-all.css文件最后，加入css样式
.ux-MultiSelect-icon { width:16px height:16px float:left background-position: -1px -1px ! important background-repeat:no-repeat ! important }.ux-MultiSelect-icon-checked { background: transparent url(../images/default/menu/checked.gif) }
.ux-MultiSelect-icon-unchecked { background: transparent url(../images/default/menu/unchecked.gif) }
3、使用
var DepartUserStore=new Ext.data.Store({
proxy: new Ext.data.HttpProxy(
{
url:'/Web/Manage/DeskTop/JSON/ScheduleManager/GetSimpleDepartUserInfo.aspx'
}),
//读取Json
reader: new Ext.data.JsonReader(
{ totalProperty: "totalCount", root: "root" },
[
{name:'UserId',type:'int'},
{name:'UserName',type:'string'}
])
})
var DepartUserCbox = new Ext.form.MultiSelect(
{
fieldLabel: ' 姓名',
labelStyle: 'width:80px',
width: 150,
editable: false,
id: 'DepartUserDS',
hiddenName:'DepartUserIdDS',
store: DepartUserStore,
emptyText: '--请选择--',
allowBlank: false,
blankText: '请选择',
mode:'remote',
displayField: 'UserName',
valueField: 'UserId',
triggerAction: 'all',
selectOnFocus: true,
listWidth: 200
})
DepartUserStore.on('load', function ()
{
DepartUserCbox.selectAll() //全选
})
DepartUserStore.load()
var holidayType= new Ext.form.ComboBox({store: new Ext.data.SimpleStore({ fields : ['value', 'text'],
data:[['0','事假'],['1','病假'],['2','年假']] }),
fieldLabel: '性别',
displayField: 'text',
valueField: 'value',
triggerAction: 'all',
allowBlank: false,
width:86,
editable: false,
mode: 'local',
listeners:{
select: function (){
var comb=this
if (this.getValue()=="年假"){
Ext.Ajax.request({
url: url,
method: 'POST',async : false,scope: this,
params: params,
success: function(response, options) {
//alert(response.responseText)
var rsInfo = Ext.util.JSON.decode(response.responseText)
var haveDays= comb.ownerCt.getComponent('havDays')
//注意这里的引用方式
if(rsInfo.success){
haveDays.setValue(rsInfo.data)
}else{
}
}),
}
},
},
}
})
var havDays= new Ext.form.NumberField ({name:'havDays', itemId:'havDays',
fieldLabel: '年假剩余天数',
value:0, })
API 暂不提供你所说的设置。只有一个 hideable 来设置每个字段的可隐藏否。
如果说必须要动态的设置的话，只能是自己写了。
思路是：当某一列隐藏的时候，监听hide 事件。判断出当前未隐藏的个数。
如果等于3 时，就把这些未隐藏的列改为 hideable : false
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）