js文件
if ('function' !== typeof RegExp.escape) { RegExp.escape = function(s) { if ('string' !== typeof s) { return s } return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1') } } Ext.ns('Ext.ux.form'); /*创建用于范围变量和类的命名空间，使它们不是全局性的*/ Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, { /*Ext.extend定义一个类或覆盖*/ checkField: 'checked', separator: ',', initComponent: function() { Ext.ux.form.LovCombo.superclass.initComponent.call(this); this.tpl = ['<tpl for=".">', '<div class="x-combo-list-item">', '<div class="ux-lovcombo-selectall-icon ux-lovcombo-iconux-lovcombo-icon-{[values.' + this.checkField + '?"checked":"unchecked"]}"', '>{' + (this.displayField || 'text') + '}</div>', '</div>', '</tpl>' ].join(""); this.on({ scope: this, expand : function(){ this.getValue()&&this.setValue(this.getValue()); } }); this.onLoad = this.onLoad.createSequence(function() { if (this.el) { var v = this.el.dom.value; this.el.dom.value = v } }); this.store.on("load",function(){ this.getValue()&&this.setValue(this.getValue()); },this); }, initEvents: function() { Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments); this.keyNav.tab = false }, 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(this.getCheckedDisplay() + '[ ' + this.separator + ']*'), '') }, 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) } this.setValue(this.getCheckedValue()); 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() || v; this.setRawValue(this.store.getCount()>0 ? this.getCheckedDisplay() : this.value); 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) } if(this.selectall){ if(this.getCheckedValue().split(",").length == this.store.getCount()){ this.selectall.replaceClass("ux-combo-selectall-icon-unchecked","ux-combo-selectall-icon-checked"); }else{ this.selectall.replaceClass("ux-combo-selectall-icon-checked","ux-combo-selectall-icon-unchecked") } } } else { this.clearValue() } }, initList : function(){ if(!this.list){ var cls = 'x-combo-list'; this.list = new Ext.Layer({ parentEl: this.getListParent(), shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false }); var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth); this.list.setSize(lw, 0); this.list.swallowEvent('mousewheel'); this.assetHeight = 0; if(this.syncFont !== false){ this.list.setStyle('font-size', this.el.getStyle('font-size')); } if(this.title){ this.header = this.list.createChild({cls:cls+'-hd', html: this.title}); this.assetHeight += this.header.getHeight(); } if(this.showSelectAll){ this.selectall = this.list.createChild({ cls:cls + 'item ux-combo-selectall-icon-unchecked ux-combo-selectall-icon', html: "选择全部" }); this.selectall.on("click",function(el){ if(this.selectall.hasClass("ux-combo-selectall-icon-checked")){ this.selectall.replaceClass("ux-combo-selectall-icon-checked","ux-combo-selectall-icon-unchecked"); this.deselectAll(); }else{ this.selectall.replaceClass("ux-combo-selectall-icon-unchecked","ux-combo-selectall-icon-checked") this.selectAll(); } },this); } this.innerList = this.list.createChild({cls:cls+'-inner'}); this.mon(this.innerList, 'mouseover', this.onViewOver, this); this.mon(this.innerList, 'mousemove', this.onViewMove, this); this.innerList.setWidth(lw - this.list.getFrameWidth('lr')); if(this.pageSize){ this.footer = this.list.createChild({cls:cls+'-ft'}); this.pageTb = new Ext.PagingToolbar({ store: this.store, pageSize: this.pageSize, renderTo:this.footer }); this.assetHeight += this.footer.getHeight(); } if(!this.tpl){ this.tpl = '<tpl for="."><div class="'+cls+'-item">{' + this.displayField + '}</div></tpl>'; } this.view = new Ext.DataView({ applyTo: this.innerList, tpl: this.tpl, singleSelect: true, selectedClass: this.selectedClass, itemSelector: this.itemSelector || '.' + cls + '-item', emptyText: this.listEmptyText }); this.mon(this.view, 'click', this.onViewClick, this); this.bindStore(this.store, true); if(this.resizable){ this.resizer = new Ext.Resizable(this.list, { pinned:true, handles:'se' }); this.mon(this.resizer, 'resize', function(r, w, h){ this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight; this.listWidth = w; this.innerList.setWidth(w - this.list.getFrameWidth('lr')); this.restrictHeight(); }, this); this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px'); } } }, expand : function(){ if(this.isExpanded() || !this.hasFocus){ //return; } this.list.alignTo(this.wrap, this.listAlign); this.list.show(); if(Ext.isGecko2){ this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac } Ext.getDoc().on({ scope: this, mousewheel: this.collapseIf, mousedown: this.collapseIf }); this.fireEvent('expand', this); }, selectAll: function() { this.store.each(function(record) { record.set(this.checkField, true); },this); this.setValue(this.getCheckedValue()); this.doQuery(this.allQuery); }, deselectAll: function() { this.clearValue() }, assertValue: Ext.emptyFn, beforeBlur: Ext.emptyFn }); Ext.reg('lovcombo', Ext.ux.form.LovCombo); /* 用于创建模型类;Ext.reg(模型的类的名称,想要创建模型的配置对象)*/
css文件
.ux-combo-selectall{ padding:3px; } .ux-combo-selectall-icon-checked{ background: transparent url(../ext-3.4.1/resources/images/default/menu/checked.gif); } .ux-combo-selectall-icon-unchecked { background: transparent url(../ext-3.4.1/resources/images/default/menu/unchecked.gif); } .ux-lovcombo-iconux-lovcombo-icon-checked{ background: transparent url(../ext-3.4.1/resources/images/default/menu/checked.gif); text-indent:1.8em; } .ux-lovcombo-iconux-lovcombo-icon-unchecked { background: transparent url(../ext-3.4.1/resources/images/default/menu/unchecked.gif); text-indent:1.8em; } .ux-combo-selectall-icon { text-indent:1.8em; background-position: 3px 2px ! important; background-repeat:no-repeat ! important; height:22px; line-height:20px; font-size:12px; font-weight:bold; -moz-user-select:none; } .ux-lovcombo-selectall-icon{ text-indent:1.8em; background-position: 3px 2px ! important; background-repeat:no-repeat ! important; height:22px; line-height:20px; font-size:12px; -moz-user-select:none; }
引用
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="${contextPath }/static/ext-3.4.1/resources/css/ext-all.css" /> <%-- <link rel="stylesheet" type="text/css" href="${contextPath }/static/ext-3.4.1/resources/css/ext-patch.css" />--%> <link rel="stylesheet" type="text/css" href="${contextPath }/static/css/com.css"/> <script type="text/javascript" src="${contextPath }/static/ext-3.4.1/adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="${contextPath }/static/ext-3.4.1/ext-all-debug.js"></script> <script type="text/javascript" src="${contextPath }/static/js/LovCombo.js"></script> <title>无标题文档</title> </head><body> <div id="cbo"></div> <input type="button" onclick="getValues('cc');" value="获取值" /><br /><br /> </body> </html> <script language="javascript" type="text/javascript"> Ext.namespace("Ext.ux.form"); var ds=new Ext.data.JsonStore({ //results 表示结果数 //rows 表示从后台传过来的JSON数据 data:{ "results": 6, "rows":[ {"id":1, "text": "别奇科技", "value": "1001" }, {"id":2, "text": "四川兆益", "value": "1002" }, {"id":3, "text": "重庆赛格", "value": "1003" }, {"id":4, "text": "全球鹰", "value": "1004" }, {"id":5, "text": "宝石花", "value": "1005" }, {"id":6, "text": "重庆电信", "value": "1006" } ]}, autoLoad:true, totalProperty:"results", root:"rows", fields:['id','text','value'] }); Ext.ux.form.LovCombo = Ext.form.LovCombo || Ext.ux.form.LovCombo; var combox = new Ext.ux.form.LovCombo({ /* renderTo : Ext.getBody(),*///一种方式 renderTo: "cbo",/*第二种方式*/ store: ds, mode: "local", fieldLabel : "测试", displayField: "text", valueField : "value", hiddenName: "ces", name: "ces", triggerAction: "all", id: "cc", width: 520, autoSelect: true, showSelectAll: true, resizable: true }); function getValues(v){ var data = Ext.getCmp(v).getValue(); alert(data); } </script>
