- 浏览: 465843 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (190)
- ExtJS (40)
- JavaScript (16)
- Java设计模式 (13)
- Html (10)
- Tomcat (9)
- myeclipse (5)
- JSP (5)
- CSS (10)
- JS/CSS (1)
- windows (12)
- Navicat For MySQL (1)
- struts2 (6)
- Spring2.0 (1)
- Java反射机制 (5)
- hibernate (9)
- java (17)
- B/SWeb完美打印方案 (1)
- 数据库相关 (4)
- java web报表 (1)
- 报表打印 (2)
- java泛型 (1)
- Servlet (2)
- SVN (7)
- Log4j (0)
- android (3)
最新评论
-
kation733:
斯蒂芬斯蒂芬多萨法阿凡达是否阿萨德
同时开启两个Tomcat -
BlueBing:
一路的夏天 写道楼主的代码会报错吧!在前面的时候String ...
使用Java反射机制遍历实体类的属性和类型 -
ying890:
非常感谢!
Ext JS中文乱码解决方案 -
zhylandroid:
谢谢了,对我很有帮助
DatabaseMetaData开发实务(上) -
wendy.wujing:
maxHttpHeaderSize="8192&qu ...
查看Tomcat配置的端口
Ext.onReady(function(){
//数据源
var data={
name:"博客园",
read:[{
book:'<<道不远人>>',
date:'2007-7-7'
},{
book:"<<大话设计模式>>",
date:"2006-6-6"
}]
}
//呈现组件
var mypanel=new Ext.Panel({
width:400,
id:"mypanel",
title:"XtemplateData简单示例",
renderTo:Ext.getBody()
});
//创建模板
var tpl=new Ext.XTemplate(
'<table><tr><th>名称:{name}</th></tr>',
'<tr><td>',
'<tpl for="read">',
'<p>编号:{#},书:{book},日期:{date}</p>',
'</tpl></td></tr></table>'
);
//重写绑定模板
tpl.overwrite(mypanel.body,data);
})
简要说明:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->/*
var tpl=new Ext.XTemplate(
'<table><tr><th>名称:{name}</th></tr>',
'<tr><td>',
'<tpl for="read">',
'<p>编号:{#},书:{book},日期:{date}</p>',
'</tpl></td></tr></table>'
);
tpl.compile();
tpl.overwrite(mypanel.body,data);
*/
1.tpl.compile();//可以在创建模板后,添加tpl.compile();编译代码,速度快点.
2. tpl.overwrite(mypanel.body,data);//把数据填充到模板中去,并呈现到目标组件
3.名称:{name}//对于一维单数据对象,直接用{名称}输出,
4.,<tpl for="read">//对于多维对象(如拥有多条数据的表),使用tpl和for配合使用,会使用tpl的格式把数据一条一条输出,read为上级节点
5.{.}//对于一维对数据的对象,如color: ['Red', 'Blue', 'Black'],可以用{.}按照tpl模板逐一输出,如:
'<tpl for="color">',
'<div> {.}</div>',
'</tpl>'
6.{#}//表示循环的索引
7.parent.***//在子对象中访问父对象元素,使用parent,如:{parent.name}
8.if//'<tpl if="age > 1">',
'<p>{name}</p>',
'</tpl>',
//if实现有条件的逻辑判断,很容易使用
9.其他几个常用的参数:
xindex//循环模板的当前索引index(从1开始),用[]。
xcount//循环模板循环的次数。 用[]
举例:
'<tpl for="read">',
'<p>编号:{#},书:{book},日期:{date},奇偶:{[xindex%2==0?"偶数":"奇数"]},次数:{[xcount]}</p>',
'</tpl>
10.模板成员函数(借用api下):
var tpl = new Ext.XTemplate(
'<tpl for="kids">',
'<tpl if="this.isGirl(name)">',
'<p>Girl: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isGirl(name) == false">',
'<p>Boy: {name} - {age}</p>',
'</tpl>',
'</tpl></p>', {
isGirl: function(name){
return name == 'Sara Grace';
},
isBaby: function(age){
return age < 1;
}
});
var tpl=new Ext.XTemplate(
'<table><tr><th>名称:{name}</th></tr>',
'<tr><td>',
'<tpl for="read">',
'<p>编号:{#},书:{book},日期:{date}</p>',
'</tpl></td></tr></table>'
);
tpl.compile();
tpl.overwrite(mypanel.body,data);
*/
1.tpl.compile();//可以在创建模板后,添加tpl.compile();编译代码,速度快点.
2. tpl.overwrite(mypanel.body,data);//把数据填充到模板中去,并呈现到目标组件
3.名称:{name}//对于一维单数据对象,直接用{名称}输出,
4.,<tpl for="read">//对于多维对象(如拥有多条数据的表),使用tpl和for配合使用,会使用tpl的格式把数据一条一条输出,read为上级节点
5.{.}//对于一维对数据的对象,如color: ['Red', 'Blue', 'Black'],可以用{.}按照tpl模板逐一输出,如:
'<tpl for="color">',
'<div> {.}</div>',
'</tpl>'
6.{#}//表示循环的索引
7.parent.***//在子对象中访问父对象元素,使用parent,如:{parent.name}
8.if//'<tpl if="age > 1">',
'<p>{name}</p>',
'</tpl>',
//if实现有条件的逻辑判断,很容易使用
9.其他几个常用的参数:
xindex//循环模板的当前索引index(从1开始),用[]。
xcount//循环模板循环的次数。 用[]
举例:
'<tpl for="read">',
'<p>编号:{#},书:{book},日期:{date},奇偶:{[xindex%2==0?"偶数":"奇数"]},次数:{[xcount]}</p>',
'</tpl>
10.模板成员函数(借用api下):
var tpl = new Ext.XTemplate(
'<tpl for="kids">',
'<tpl if="this.isGirl(name)">',
'<p>Girl: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isGirl(name) == false">',
'<p>Boy: {name} - {age}</p>',
'</tpl>',
'</tpl></p>', {
isGirl: function(name){
return name == 'Sara Grace';
},
isBaby: function(age){
return age < 1;
}
});
接下来,我们做个服务器的例子(好像很多朋友对这个要求很强烈啊)
实例演示:用模板呈现服务器数据
效果图:
html代码:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><div id="container">
</div>
</div>
css代码:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> <style type="text/css">
body
{
font-size:12px
}
#container
{
border:1px solid black;
width:330px;
}
td,th
{
border-bottom:1px dashed black;
}
th
{
text-align:center;
}
.namewidth
{
width:120px;
}
.urlwidth
{
width:150px;
}
</style>
body
{
font-size:12px
}
#container
{
border:1px solid black;
width:330px;
}
td,th
{
border-bottom:1px dashed black;
}
th
{
text-align:center;
}
.namewidth
{
width:120px;
}
.urlwidth
{
width:150px;
}
</style>
js代码:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->Ext.onReady(function(){
var mydata;
Ext.Ajax.request({
url:"getXtemplateData.ashx",//服务器端地址
success:function(request){
mydata=request.responseText;//服务器端文本数据
mydata=eval('('+mydata+')');//使用eval把文本数据转换为json对象
//或者用extjs自带的方法:mydata=Ext.util.JSON.decode(mydata),效果相同
var tpl2=new Ext.XTemplate(
'<table><thead><tr><th> 编号</th><th class="namewidth">名称</th>< th class="urlwidth">地址</th><th>位置</th></tr>& lt;/thead><tbody>',
'<tpl for="results">',
'<tr><td>{#}</td><td>{linkname}</td><td>{linkurl}</td><td>{linkpos}</td><tr>',
'</tpl></tbody></table>'
);
tpl2.compile();
tpl2.overwrite(Ext.get("container"),mydata);
},
failure:function()
{
alert("failure!");
}
});
})
/***简单说明***
1.Ext.Ajax.request(),这里暂且对ajax不多谈论,后面会详细叙述
2.eval用"()"可以把规范文本转换为json对象,很重要!mydata=eval('('+mydata+')');
3.如果我们把模板创建和绑定放到ajax外面,会出错,因为ajax为异步调用,记住哦~
4.关于success函数的request参数,我截个图看看,就明白了
*/
var mydata;
Ext.Ajax.request({
url:"getXtemplateData.ashx",//服务器端地址
success:function(request){
mydata=request.responseText;//服务器端文本数据
mydata=eval('('+mydata+')');//使用eval把文本数据转换为json对象
//或者用extjs自带的方法:mydata=Ext.util.JSON.decode(mydata),效果相同
var tpl2=new Ext.XTemplate(
'<table><thead><tr><th> 编号</th><th class="namewidth">名称</th>< th class="urlwidth">地址</th><th>位置</th></tr>& lt;/thead><tbody>',
'<tpl for="results">',
'<tr><td>{#}</td><td>{linkname}</td><td>{linkurl}</td><td>{linkpos}</td><tr>',
'</tpl></tbody></table>'
);
tpl2.compile();
tpl2.overwrite(Ext.get("container"),mydata);
},
failure:function()
{
alert("failure!");
}
});
})
/***简单说明***
1.Ext.Ajax.request(),这里暂且对ajax不多谈论,后面会详细叙述
2.eval用"()"可以把规范文本转换为json对象,很重要!mydata=eval('('+mydata+')');
3.如果我们把模板创建和绑定放到ajax外面,会出错,因为ajax为异步调用,记住哦~
4.关于success函数的request参数,我截个图看看,就明白了
*/
先看看数据库数据:
发表评论
-
功能: 用户点击grid的表头菜单显示/隐藏列,拉动列、重新刷新页面后保留。
2011-01-05 11:56 2331var grid = new Ext.grid.GridPa ... -
fieldSet组件的基本用法 将fieldSet上的边框去掉或者改变内边距
2010-05-29 09:58 10442先把fieldSet简单的回忆下: fieldset:对表单进 ... -
ext grid 没有数据时不显示横向滚动条的解决办法
2010-05-28 14:18 2631EXT Grid 没有数据时不显示横向滚动条的解决办法: t ... -
ExtJS中动态设置TextField的readOnly属性
2010-04-28 14:49 2387假设 textField, 它的 id = 'textFiel ... -
Ext监控回车按键
2010-03-06 11:25 2363listeners : {specialkey : funct ... -
Ext.Ajax类
2010-03-05 10:35 1896Ext.Ajax类Ext.Ajax类是一个简单而清晰的XHR封 ... -
Ext JS 键映射:键盘作为第一类操作对象
2010-02-26 15:07 2261Ext.KeyMap Ext提供几个不同的组件,支持键盘导航, ... -
如何在服务器端 读取Ext.ux.UploadDialog上传的文件?
2009-12-10 17:09 2196问题已经解决。 1。要导入 commons.io.jar包 ... -
ext 多文件上传控件 Ext.ux.UploadDialog 使用中的问题
2009-12-10 17:03 3296Ext.ux.UploadDialog 像ext一 ... -
Ext.data专题五:常用proxy之MemoryProxy
2009-08-26 14:44 3921MemoryProxy只能从JavaScript对象获得数据, ... -
Ext.data专题四:Ext.data.Store
2009-08-26 14:42 2800Ext.data.Store是EXT中用来进行数据交换和数据交 ... -
Ext.data专题三:Ext.data.Record
2009-08-26 14:40 5314Ext.data.Record就是一个设 ... -
Ext.data专题二:Ext.data.Connection
2009-08-26 14:38 1409Ext.data.Connection是对Ext.li ... -
Ext.data专题一:Ext.data简介
2009-08-26 14:36 1240Ext.data在命名空间中定义了一系列store、reade ... -
深入浅出Ext JS:数据存储与传输
2009-07-11 15:40 244610.4 Ext.data.Store Ex ... -
EXT核心API详解(十一)_Ext.data.Store/GroupingStore/JsonStore/SimpleStore
2009-07-03 17:17 5627Ext.data.Storestore是一个为 ... -
《Ext实战》节选:自定义单元格的显示格式
2009-07-02 14:49 1306有时候,需要在Grid中显示一个链接,或根据数字的大小显示不同 ... -
ext afteredit详解
2009-07-02 09:48 2380grid.on("afteredit",a ... -
Ext.form.ComboBox 属性详解及使用方法介绍和级联使用
2009-06-27 16:18 2423Ext.form.ComboBox 属性详解(见注释)及使用方 ... -
ext_comboBox二级级联下拉框
2009-06-27 16:11 1784Ext.onReady(function(){ ...
相关推荐
把省份与城市以树的形式输出的Ext.XTemplate的实例代码,需要的朋友可以参考下
23、Ext.XTemplate类 ………………… 21 24、Ext.data.Connection类 ……………… 22 25、Ext.Ajax类 ………………………… 22 26、Ext.data.Record类 ………………… 23 27、Ext.data.DataProxy类 …………… 24 28...
11. ExtJs2.0学习系列(11)--Ext.XTemplate 12. ExtJs2.0学习系列(12)--Ext.TreePanel之第一式 13. ExtJs2.0学习系列(13)--Ext.TreePanel之第二式 14. ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树) 15...
本人觉得Ext.Template和Ext.XTemplate模板类非常类似.Net的母板页,或者非常类似于JSP技术中jstl标准标签和EL表达式功能;但是它是一个客户端的技术。 阅读目标:需要使用模板方式来开发web应用的人员。 前置条件:...
23、Ext.XTemplate类 ………………… 21 24、Ext.data.Connection类 ……………… 22 25、Ext.Ajax类 ………………………… 22 26、Ext.data.Record类 ………………… 23 27、Ext.data.DataProxy类 …………… 24 28...
第四章 Ext.XTemplate 模板 31 一、使用标签tpl和操作符for 33 二、在子模板的范围内访问父元素对象 34 三、数组元素索引和简单运算支持 34 四、自动渲染单根数组 35 五、条件逻辑判断 36 六、即时执行任意的代码 36...
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 布局类的...
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...
1. Renamed Coolite.Ext.Web project to Ext.Net 2. Renamed Coolite.Examples project to Ext.Net.Examples 3. Renamed Coolite.Ext.UX project to Ext.Net.UX 4. Renamed Coolite.EmbeddedResourceBuilder ...
三、Ext.XTemplate 38 四、小结 39 第七章:格式化 40 一、用户需要优秀体验的内容 40 二、Ext.util.Format类 40 三、再谈XTemplete 44 四、如果连Format都不能满足XTemplete的需要呢? 45 五、小结 45 第八章:...
利用模板(xtemplate)表格合并行 简单实现表格分组,单元格行的合并。
11.2.5 复杂模板XTemplate..........279 11.3 用Ext.Utils.CSS切换主题..............281 11.4 悬停提示.................................................282 11.4.1 初始化........................................
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....
该资源通过一个代码实例授予对Ext处理图片的居中、排版问题陌生的开发人员。适用于初学者和有一定开发基础的人群,文件下载下来就可以用。
XTemplate 83 DataView 84 其它新组件 84 EXT2简介 85 下载Ext 85 开始! 85 Element:Ext的核心 86 获取多个DOM的节点 87 响应事件 87 使用Widgets 88 編輯 使用Ajax 91 TabPanel基础 94 Step 1: 创建 HTML 骨架 94...
最近公司举行15周年司庆晚会,公司首改以往丑旧的抽奖模式。领导要求我开发一套抽奖程序。 简单需求如下: 1.... 2.... 3.... 4.... 5.... 6.... 7....不过多亏ExtJS给我解决了各种难题,让我很快开发出来这套抽奖程序,现在程序圆满...
有时候我们需要在combo中渲染grid,这时候我们可以通过ext的模板xtemplate来实现此功能。
组件模型 Component Model 74 容器模型Container Model 78 布局 Layouts 80 Grid 82 XTemplate 83 DataView 84 其它新组件 84 EXT2简介 85 下载Ext 85 开始! 85 Element:Ext的...