EXT 4.2 combo运用TPL 下拉表格


@CHARSET "UTF-8";
.mytable a {
color: #c75f3e;
}
.mytable {
width: 100%;
border-left: 1px solid #c1dad7;
border-top: 1px solid #c1dad7;
padding: 0;
}
.mytable th {
font: bold 11px "trebuchet ms", verdana, arial, helvetica, sans-serif;
color: #4f6b72;
text-align:center;
border-bottom: 1px solid #c1dad7;
border-right: 1px solid #c1dad7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #cae8ea;
font-size:13px;
text-align: center;
}
.mytable td {
border-bottom: 1px solid #c1dad7;
border-right: 1px solid #c1dad7;
background: #fff;
font-size:13px;
text-align:center;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
.mytable td.alt {
background: #f5fafa;
text-align:center;
color: #797268;
}
/* 鼠标移上TR,改变背景色 */
.x-boundlist-item:hover td {
background: #d6e8f6;
border-color: #d6e8f6;
}

EXT code


            xtype: ‘combo‘,
store: new Ext.data.JsonStore({
pageSize:20,
fields:[
{name:‘id‘},//id
{name:‘userName‘},//姓名
{name:‘card‘}//身份证号
],
proxy: {
type: ‘ajax‘,
actionMethods:‘post‘,
url: ‘${ctx}/hr/getUserListByUnitId.do?unitId=${unit.id}‘,
reader: {
type: ‘json‘,
root: ‘list‘
}
}
}),
displayField: ‘userName‘,
valueField:‘id‘,
minChars:1,
anchor: ‘100%‘,
fieldLabel: ‘负责人‘,
name:‘safeRectifyInfo.rectifyPersonId‘,
forceSelection: true,
typeAhead: false,
hideTrigger:true,
pageSize: 20,
listConfig: {
loadingText: ‘查找中.....‘,
emptyText: ‘没有找到相关的人员‘,
tpl:‘<div style="width:100%;"><table class="mytable" cellspacing="0" width="100%" ><tr><th width=\‘30%\‘ >姓名</th><th width=\‘70%\‘ >身份证</th></tr><tpl for="."><tr class="x-boundlist-item" ><td >{userName}</td><td>{card}</td></tr></tpl></table></div>‘
}

EXT 4.2 combo运用TPL 下拉表格,布布扣,bubuko.com

时间: 2024-08-06 00:34:12

EXT 4.2 combo运用TPL 下拉表格的相关文章

EXTJS的combo组件的下拉选项框的高度和垂直滚动条如何设置

var testCombo = Ext.create('Ext.form.field.ComboBox', {         displayField : 'name',         valueField : 'code',         editable : false,         store : testStore,         emptyText : 'hello',         listConfig : {             maxHeight : 100,

[Ext JS 4] 实战之多选下拉单 (带checkbox) 续 - 带ALL 选项

前言 在 [Ext JS 4] 实战之多选下拉单 (带checkbox) 这一篇中有介绍如何开发带有checkbox 的多选菜单. 但是实际项目开发过程中, 用户的需求也是不断精进的. 使用淘宝或是其他网站购物车功能的用户对全选就特别习惯, 所以他们也希望在下拉单中也能有  "ALL" 这样的选项. 但是Extjs 本身提供的多选下拉单,功能比较有限. 之前有扩充过带 checkbox, 现在又要多扩充一个 "ALL" 选项了. 要求是: 1. 选中"AL

Ext js 下拉框下拉的同时输入模糊查询

var joincmpcombo = new Ext.form.ComboBox({//设计师                    id: 'joincmp_name',                    name: 'joincmp_name',                   hiddenName: 'joincmp', //后台获取的是id的值                    fieldLabel: '联盟商',                    valueField:

jquery Combo Select 下拉框可选可输入插件

Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行检索过滤,同时支持键盘控制. 支持浏览器: Safari, Chrome, Firefox, Opera iOS, Android, IE Mobile Internet Explorer IE 8 and above 开源地址:http://www.oschina.net/p/combo-sele

EXT学习之——Ext下拉框绑定以及级联写法

/*******步骤有四个,缺一不可*********/ function () {xxxxxx = Ext.extend(construct, {InitControl: function () { var _this = this; /*****************步骤一:建数据store ******************/ //一级下拉框数据(此处注意,一定要把store写在combobox控件定义的前面,否则无法加载数据) var moduleStore = new Ext.da

extjs Combo下拉文本的tooptip

xtype: "combo", fieldLabel: "插入", readOnly: true, mode: "local", store: (globel.Store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: "Module/Sms/SmsHandler.ashx" }), reader: new Ext.data.JsonReader({ ro

Extjs下拉树代码测试总结

http://blog.csdn.net/kunoy/article/details/8067801 首先主要代码源自网络,对那些无私的奉献者表示感谢! 笔者对这些代码做了二次修改,并总结如下: Extjs3.x版本下拉树代码: [javascript] view plaincopy Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, { constructor : function(cfg) { cfg = cfg || {}; Ext.ux.Tr

ExtJs5.1多选下拉框CheckComb

ExtJs这么多个版本了,可就是不提供多选下拉框,老外不用这个玩意吗? 5都出来这么久了,新写的项目就用5吧,把以前Extjs4.2的时搜到前人的CheckComb改巴改巴,能用了就赶紧贴上来,没有仔细测试各种情况. Ext.define('Ext.ux.CheckCombo', { extend : 'Ext.form.field.ComboBox', alias : 'widget.checkcombo', multiSelect : true, allSelector : false, n

EXTJS下拉树ComboBoxTree参数提交及回显方法

http://blog.csdn.net/wjlht/article/details/6085245 使用extjs可以构造出下拉数,但是不方便向form提交参数,在此,笔者想到一个办法,很方便ComboBoxTree向form提交. 原理: 在form中增加一个隐藏的字段,当在comboBoxTree中选定值后自动在隐藏字段中赋值. 为实现此方法,需要重载comboBoxTree中collapse事件方法. Ext.ux.ComboBoxTree = function(){    this.t