获取到你想监听的对象的 Ext.core.Element 对象，监听 Element 对象的事件
（这可以作为一个比较通用的方法，比如 Ext.form.Label 没有 click 事件，就可以用此方法）
代码如下：
...
var panel = Ext.create('Ext.panel.Panel', {...})// 定义 Panel
var menu = Ext.create('Ext.menu.Menu', {...})// 定义 Menu
panel.getEl().on('contextmenu', function(e, t) {
e.stopEvent()
menu.showAt(e.getXY())
})
...
=====================================================
showAt 方法在 ExtJS4 的api中没有显示，具体调用的代码为（我自己调试过，都可在 ext-all-debug.js 或其他文件中找到）：
-----------------------------------------------
Ext.menu.Menu：
showAt: function(){
this.callParent(arguments)// 此处会调用 Component 中的 showAt 方法
if (this.floating) {
this.doConstrain()
}
}
-----------------------------------------------
Ext.Component：
showAt: function(x, y, animate) {
if (this.floating) {
this.setPosition(x, y, animate)
} else {
this.setPagePosition(x, y, animate)
}
this.show()
}
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()
Ext.create('Ext.Button', {renderTo:Ext.getBody(),
text : 'CLICK ME',
listeners : {
click : function() {
window.location=url
}
}
})
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）