Ext. 用XTemplate实现多列的ComboBox
原文出处http://blog.csdn.net/wanghuicai_123/article/details/6325669
1.dhcc.icare.ComboBox.js
/**------------------------------------------------------------
*@Copyright (c) 2011 DHC Software Co.,Ltd. ALL RIGHTS RESERVED
*@ComponentName dhcc.icare.ComboBox
*@extendFrom Ext.form.ComboBox
*@xType icombobox
*@forModel MComboBox
*@Author wanghc
*@Date 2011-03-28
*@Resume 重写Ext.form.ComboBox
*------------------------------------------------------------*/
/**----------------------------------------------------------
*@class dhcc.icare.ComboBox
*@extends Ext.form.ComboBox
*@constructor wanghc
*@xtype icombobox
*@param {Object} config The config object
*@cfg {String} displayFields
*@cfg {boolean} queryInFields
*@cfg {String} queryFields
*------------------------------------------------------------*/
Ext.ns("dhcc.icare");
dhcc.icare.ComboBox = Ext.extend(Ext.form.ComboBox, {
/**
*@desc 通过displayFields属性确定生成多列的combobox
*通过customData属性生成store
*生成queryFields属性值
*/
initComponent : function(){
dhcc.icare.ComboBox.superclass.initComponent(this);
},
onRender : function(ct,position){
dhcc.icare.ComboBox.superclass.onRender.call(this,ct,position);
if(this.customData){ // 自动生成store
var cd = this.customData ;
this.mode = 'local' ;
var cdField = [] ;
if(Ext.isArray(cd)){
if(Ext.isArray(cd[0])){ //[[],[]] 二维数组
this.valueField = this.valueField || 'field0' ;
for (var i = 0,len = cd[0].length ; i<len; i++){
cdField.push('field'+i) ;
}
this.store = new Ext.data.ArrayStore({ fields: cdField, data: cd});
}else if(Ext.isObject(cd[0])){ //[{},{}] json数组
for (var i in cd[0] ){
cdField.push(i) ;
}
this.store = new Ext.data.JsonStore({ fields: cdField, data: cd});
}
this.displayField = this.displayField || (cdField.length>1? cdField[1]:cdField[0]) ;
}
}
if((this.queryInFields===true)&&(this.mode=='local')){ //默认在全部列中查询
if(this.queryFields.length==0){
this.store.fields.each(function(f){this.queryFields.push(f.name);},this);
}
}
},
initList : function(){
if((!this.tpl)&&(this.displayFields)){ // 展示多列
var tplString = "" ;
var cls = 'x-combo-list';
var cbW = this.width || 150 ;
var dfLen = this.displayFields.length ;
var w = (cbW/dfLen).toFixed(2) ;
var f = this.store.fields ;
Ext.each(this.displayFields , function(name){
name = f.containsKey(name) ? name : f.keys[name] ; //列名或列号
tplString += '<td width='+w+'>{'+name+'}</td>' ;
},this);
this.tpl = new Ext.XTemplate(
'<table><tpl for="."><tr class="'+cls+'-item" height="20px" >',
tplString,
'</tr></tpl></table>'
);
}
dhcc.icare.ComboBox.superclass.initList.call(this);
},
/**
* @param {String} query 查询参数的值q
* @param {Boolean} forceAll 如果forceAll为true 显示全部记录,为false时则通过query参数查询
*/
doQuery : function(q,forceAll){
dhcc.icare.ComboBox.superclass.doQuery.call(this,q,forceAll);
q = Ext.isEmpty(q) ? '' : q;
if(!forceAll && (q.length >= this.minChars)){
if((this.queryInFields===true)&&(this.mode=='local')){
var len = this.queryFields.length ;
this.selectedIndex = -1;
var f = this.store.fields ;
this.store.filterBy(function(r,id){
for(var i=0 ; i<len ; i++){
var name = this.queryFields[i] ;
name = f.containsKey(name) ? name : f.keys[name] ;
if(RegExp("^"+q).test(r.get(name))){return true;}
}
return false ;
},this);
this.onLoad();
};
}
},
/**
*@param String/Json 增加对json的支持
*/
setValue : function(obj){
if(Ext.isString(obj)){
dhcc.icare.ComboBox.superclass.setValue.call(this,obj);
}else if(Ext.isObject(obj)){
this.setValue(obj[this.valueField || this.displayField]);
}
},
/**
*@param Ext.data.Record 把record作为combobox的选中值
*/
setRecordValue : function(r){
this.setValue(r.data[this.valueField || this.displayField]);
this.recordValue = r ;
return this;
},
/**
*@return Ext.data.Record 拿到combobox当前选中的记录
*/
getRecordValue : function(){
return this.recordValue ;
},
/**
*@desc overwrite
*/
select : function(index, scrollIntoView){
dhcc.icare.ComboBox.superclass.select.call(this,index, scrollIntoView);
if(this.selectedIndex == -1) {
this.recordValue = '' ;
}else{
this.recordValue = this.store.getAt(this.selectedIndex) ;
}
},
/**
*调用store的load方法
*/
load : function(options){
this.store.load(options) ;
},
/**
*调用store的loadData方法
*/
loadData : function(data,append){
this.store.loadData(data,append) ;
},
/**
*@desc 显示多列时用到
*@property displayFields Array field的列名或列号(丛0开始)组成的数组 如: [0,name,age,3]
*/
displayFields : '' ,
/**
*@property queryInFields boolean
*@desc true时 在多字段中查询(doQuery).false则在displayField中查询, 数据是本地时才有效
*/
queryInFields : false ,
/**
*@property queryFields Array
*@desc 多列查询的字段名,在queryInFields为true下，默认在全部列中查询,数据是本地时才有效 如: [0,name,age,3]
*/
queryFields : [],
/**
*@property recordValue Ext.data.Recode
*/
recordValue : '' ,
/**
*@property customData Array[Array]/Array[json]
*@desc 如果参数是二维数组则自动生成store,store的fields是field0.field1..., data则是二维数组, valueField:'field0', displayField:'field1'||'field0'
*/
customData : []
});
Ext.reg('icombobox', dhcc.icare.ComboBox);
2.index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>测试多列</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="ext-3.4.0/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
<script type="text/javascript" src="dhcc.icare.ComboBox.js"></script>
<script >
Ext.onReady(function(){
var cbArr = [['4',"张麻子",'man'], ['6',"汤师爷",'man'], ['8',"黄四郎",'man'],['12',"夫人",'woman'], ['33',"小六子",'man']] ;
var cbJson = [{id:'4',name:'张麻子',sex:'man'},{id:'6',name:'汤师爷',sex:'man'},{id:'12',name:'夫人',sex:'woman'}];
var win=new Ext.Window({
title:"hello",
width:600,
height:400,
items: [{
title: '参保凭证',
height:450,
xtype:'form',
items: [{
xtype: "textfield",
itemId: "letterNumber",
name: "letterNumber",
tabIndex: 1,
enterIndex: '1',
fieldLabel: '编号<font color="#FF0000" >*</font>',
anchor: "50%",
maxLength : 50,
maxLengthText : '最大长度为50',
allowBlank: false
},{
xtype: "icombobox",
fieldLabel:'身份证号',
minChars:0,
triggerAction : 'all',
customData : cbArr, //cbJson ,
displayFields : [0,1,2],
displayFields : [0,1,2],
queryInFields : true,
anchor: "50%",
queryFields : [0,1,"field2"]
}],
}]
});
win.show();
});
</script>
</head>
<body>
</body>
</html>