原文出处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>
发表评论
-
修改extjs4默认字体
2014-10-13 16:02 356.x-btn-default-small .x-btn ... -
ExtJs默认的字体大小改变的几种方法
2014-10-13 10:11 5581、 只需把ext-all.css样式文件中的所有11px换 ... -
Eclipse环境下配置spket中ExtJS提示
2014-08-20 14:57 440使用eclipse编写extjs时,一定会用到spket这个 ... -
extjs继承,先调用父类方法
2014-07-17 14:27 943Ext.define('Xap.core.ui.extjs. ... -
extjs4.0 Ext.Array 函数方法大全
2014-07-17 10:38 470Ext.onReady(function(){ ... -
JSDuck安装及使用
2014-07-15 10:40 1265Javascript:前端利器 之 JSDuck 目 ... -
ext 获取radiogroup的值
2013-03-07 11:46 810在grid工具栏中 this.tbar = [{ ... -
ext 上传
2013-01-28 22:23 583今天发现ext 上传带有如下特殊字符 \/:*?“< ... -
ext grid 隐藏列
2013-01-22 17:49 609如果是动态隐藏的话:grid.getColumnModel() ... -
comboboxGrid多列
2013-01-21 17:16 783未完善版,后期将贴出完善版,完善版主要是封装了grid ... -
解决Ext2.0中ComboBox执行Filter第一次无效的问题
2013-01-16 16:45 751解决Ext2.0中ComboBox执行Filter第一次无效 ... -
decode encode
2013-01-07 15:49 527Ext中有两个很重要的方法, 一个是decode,一 ... -
ExtJS之Ext.Ajax.request用法
2013-01-07 13:04 1002原文出处http://javacrazyer.iteye ... -
Ext.form各类控件的配置及方法
2012-12-19 14:30 679Ext.form各类控件的配置及方法 1、Ext.fo ... -
ExtJs中decode与encode
2012-12-10 18:03 576出自:http://blog.163.c ...
相关推荐
把省份与城市以树的形式输出的Ext.XTemplate的实例代码,需要的朋友可以参考下
53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext....
8.1.4 超级模板:ext.xtemplate(包括ext.xtemplateparser和ext.xtemplatecompiler) / 393 8.1.5 模板的方法 / 396 8.2 组件的基础知识 / 396 8.2.1 概述 / 396 8.2.2 组件类的整体架构 / 397 8.2.3 布局类的...
53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext....
11.9 使用Ext.util.CSS管理CSS样式..... 290 11.10 使用Ext.util.ClickRepeater 处理点击事件...................................... 291 11.11 使用Ext.util.DelayedTask 延时执行函数..............................
6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇) 8. ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇) 9. ExtJs2.0学习系列(9)--...
第四章 Ext.XTemplate 模板 31 一、使用标签tpl和操作符for 33 二、在子模板的范围内访问父元素对象 34 三、数组元素索引和简单运算支持 34 四、自动渲染单根数组 35 五、条件逻辑判断 36 六、即时执行任意的代码 36...
66. Renamed ComboBox and DropDownField .Icon property to .TriggerIcon. Example (Old) <ext:DropDownField runat="server" Icon="Search" /> Example (New) <ext:DropDownField runat=...
本人觉得Ext.Template和Ext.XTemplate模板类非常类似.Net的母板页,或者非常类似于JSP技术中jstl标准标签和EL表达式功能;但是它是一个客户端的技术。 阅读目标:需要使用模板方式来开发web应用的人员。 前置条件:...
6.5.2 Ext.XTemplate 第7章 设计表单类布局 7.1 Form表单简介 7.1.1 Form表单的基本配置 7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 7.2.1 文本输入控件Ext.form.TextField 7.2.2 多行文本输入控件Ext...
6.5.2 Ext.XTemplate 第7章 设计表单类布局 7.1 Form表单简介 7.1.1 Form表单的基本配置 7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 7.2.1 文本输入控件Ext.form.TextField 7.2.2 多行文本输入控件Ext...
8.3.3. 醍醐灌顶,功能强劲的模板引擎XTemplate。 8.4. Ext.data命名空间 8.4.1. proxy系列 8.4.1.1. 人畜无害MemoryProxy 8.4.1.2. 常规武器HttpProxy 8.4.1.3. 洲际导弹ScriptTagProxy 8.4.2. reader系列 8.4.2.1....
利用模板(xtemplate)表格合并行 简单实现表格分组,单元格行的合并。
三、Ext.XTemplate 38 四、小结 39 第七章:格式化 40 一、用户需要优秀体验的内容 40 二、Ext.util.Format类 40 三、再谈XTemplete 44 四、如果连Format都不能满足XTemplete的需要呢? 45 五、小结 45 第八章:...
在安富莱STM32H750网络例程的基础上,参考网上其他资料,整理学习增加了LWIP 服务器端多客户连接的功能示例,供学习参考..
有时候我们需要在combo中渲染grid,这时候我们可以通过ext的模板xtemplate来实现此功能。
Back2Front 基于Express和XTemplate的模块化开发框架
该资源通过一个代码实例授予对Ext处理图片的居中、排版问题陌生的开发人员。适用于初学者和有一定开发基础的人群,文件下载下来就可以用。
工程下安装XTemplate并使用它的方法实例说明: 1.安装xtpl 复制代码 代码如下: npm install xtpl xtemplate –save 2.在views目录添加test.xtpl文件,其内容为 this is {{title}}! 4.集成到Express中,只需要...