ozzzo
- 浏览: 65456 次
- 性别:
- 来自: 广州
-
文章分类
最新评论
-
ww20042005：
不太明白！
javascript中如何得到选中的checkbox的值 -
feibaby：
问题解决了，学习了~
JasperException: Failed to load or instantiate TagExtraInfo class:org.Apache.str -
hyint：
看来经过2年的时间，你已经进步不少啊
XX行网上贵金属交易项目
基础的Ext的小例子,基本上按照一些资料上手动敲了一遍.有些自己加了一点注释.
所用的版本是Ext2.2
test.js如下:
调用的话,修改Ext.onReady中调用的方法名称即可.
前后台交互的简单例子.
jsp如下:
所用的版本是Ext2.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-2.2/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../ext-2.2/resources/css/ext-all.css" />
</head>
<body>
<div id="hello"> </div>
<input type="button" id="myButton" value="按钮" name="Button"></button>
<select id="sexList">
<option>男</option>
<option>女</option>
</select>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
test.js如下:
Ext.onReady(
function (){
msg();
}
);
function winTest(){ // 简单窗口练习
var win = new Ext.Window(
{title:"hello", //title内容
width:300,height:200, //参数大小
html:'<h1>窗口测试练习<h1>'} //内容
);
win.show();
}
// 最基本的Panel例子
function PanelTest(){
var pal = new Ext.Panel(
{renderTo:"hello",
title:"面板的头部",
width:900,
height:600,
html:'<h1>面板的主区域</h1>',
tbar:[{text:'顶部工具栏'}],
bbar:[{text:'底部工具栏'}],
buttons:[{text:'底部按钮'}]
}
);
}
//比较完整的Panel例子
function PanelTest2(){
var pal = new Ext.Panel(
{renderTo:"hello",
title:"面板的头部",
width:900,
height:600,
html:'<h1>面板的主区域</h1>',
tbar:[
new Ext.Toolbar.TextItem("工具栏"),
{xtype:"tbfill"},
{pressed:true,text:'添加'},
{xtype:'tbseparator'},
{pressed:true,text:'刷新'}
],
bbar:[{text:'底部工具栏'}],
tools:[
{id:'save',handler:function (){alert("保存");}},
{id:'help'},
{id:'close'}
],
buttons:[{text:'底部按钮'}]
}
);
}
//VeiwPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，
// 一个页面中只能有一个ViewPort实例
//简单的ViewPoint例子
function viewPointTest(){
new Ext.Viewport({
enableTabScroll:true,
layour:"fit",
items:[{
title:'面板',
html:'viewPoint测试例子',
bbar:[
{text:'按钮1'},
{text:'按钮2'}
]
}]
});
}
//viewPoint 比较完整例子
function vpTest2(){
new Ext.Viewport({
enableTabScroll:true,
layout:'border',
items:[
{title:'面板',
region:'north',
heigth:50,
collapsible:true,
html:'网站管理系统'
},
{
title:'菜单',
region:'west',
width:200,
collapsible:true, //可以展开伸缩
html:'菜单栏'
},
{
xtype:'tabpanel',
region:'center',
items:[
{title:'面板1'},
{title:'面板2'}
]
}
]
});
}
//Ext中的Window window是一种特殊的Panel
function winTest2(){
var i=0;
Ext.get("myButton").on("click",function(){
var win = new Ext.Window({
title:'窗口'+i++,
height:400,
width:600,
maximizable:true,
layout:'fit',
items:[
{title:'面板1',html:'面板1',collapsible:true},
{title:'面板2',html:'面板2'}
]
})
win.show();
}
)
}
//Ext中的对话框
function msg(){
Ext.get("myButton").on("click",function(){
Ext.Msg.show({
title:'保存数据',
msg:'已做修改,是否保存?',
buttons:Ext.Msg.YESNOCANCEL,
fn:function(button){
if(button=='yes'){
alert('保存成功');
}else if(button=='no'){
alert('不做保存');
}else if(button=='cancel'){
alert('取消');
}
},
icon:Ext.MessageBox.QUESTION
});
})
}
//Ext中的表格GridPanel
function gridTest(){ //最简单的表格
var data=[
[1,'百度','搜索引擎','www.baidu.com'],
[2,'谷歌','搜索引擎','www.google.cn'],
[3,'网易','门户网站','www.163.com'],
[4,'新浪','门户网站','www.sina.com.cn']
];
var store = new Ext.data.SimpleStore({data:data,fields:['id','name','description','URL']});
var grid = new Ext.grid.GridPanel({
renderTo:'hello',
title:'知名网站',
height:200,
width:500,
columns:[
{header:'名称',dataIndex:'name',sortable:true}, //sortable 是否可以排序
{header:'描述',dataIndex:'description'},
{header:'网站地址',dataIndex:'URL'}
],
store:store,
autoExpandColumn:2
});
}
function gridTest2(){ //可编辑的表格
var data =[
{id:1,name:'老雷',sex:'男',bornDate:'1984-10-3',email:'a@163.com'},
{id:2,name:'老熊',sex:'男',bornDate:'1984-12-2',email:'b@163.com'},
{id:3,name:'老朱',sex:'男',bornDate:'1985-03-12',email:'c@163.com'},
{id:4,name:'晓杰',sex:'男',bornDate:'1981-11-15',email:'d@163.com'}
];
var store = new Ext.data.JsonStore(
{
data:data,
fields:['id','name','sex',{name:'bornDate',type:'date',dateFormat:'Y-n-j'},'email']
}
);
var colM = new Ext.grid.ColumnModel(
[
{header:'姓名',dataIndex:'name',sortable:true,editor:new Ext.form.TextField()}, //文本编辑选项
{header:'性别',dataIndex:'sex',editor:new Ext.form.ComboBox({transform:"sexList",
triggerAction: 'all',lazyRender:true})}, //下拉编辑选项, sexList对应html中的id="sexList"
{header:'出生日期',dataIndex:'bornDate',width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
editor:new Ext.form.DateField({format:'Y年m月d日'})}, //日期编辑选项
{header:'邮箱',dataIndex:'email',editor:new Ext.form.TextField()}
]
);
var grid = new Ext.grid.EditorGridPanel(
{
renderTo:'hello',
title:'小组成员',
height:300,
width:500,
cm:colM,
store:store,
autoExpandColumn:3
}
);
grid.on("afteredit",function(obj){ //编辑后触发事件
var r = obj.record;
var id = r.get('id');
var name = r.get('name');
var sex = r.get('sex');
var bornDate = r.get('bornDate').format('Y年m月d日');
var email = r.get('email');
Ext.Msg.alert("修改后的信息",id+"---"+name+"--"+sex+"--"+bornDate);
},this);
}
function accTest(){ //panel中的accordion(风琴)布局
var panel=new Ext.Panel(
{
renderTo:'hello',
title:'容器组件',
layout:'accordion',
width:300,
height:200,
layoutConfig:{animate:false},
items:[
{title:'元素1',html:''},
{title:'元素2',html:''},
{title:'元素3',html:''},
{title:'元素4',html:''}
]
}
);
}
function treeTest(){
var root=new Ext.tree.TreeNode({
id:"root",
text:"树的根"});
root.appendChild(new Ext.tree.TreeNode({
id:"c1",
text:"子节点"
}));
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
width:100
});
}
调用的话,修改Ext.onReady中调用的方法名称即可.
前后台交互的简单例子.
package com.test;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* @author YL 2009-8-5
* 前台Ext与后台交互的例子.
*/
public class TestServlet extends HttpServlet {
public TestServlet() {
super();
}
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=GBK");
PrintWriter out = response.getWriter();
String json =
"{results:[{id:1,name:'小王',email:'xiaowang@easyjf.com',sex:'男',bornDate:'1991-4-4'},"+
"{id:2,name:'小李',email:'xiaoli@easyjf.com',sex:'男',bornDate:'1992-5-6'},"+
"{id:3,name:'小兰',email:'xiaoxiao@easyjf.com',sex:'女',bornDate:'1993-3-7'}]}";
out.write(json);
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String json =
"{results:[{id:1,name:'小王',email:'xiaowang@easyjf.com',sex:'男',bornDate:'1991-4-4'},"+
"{id:1,name:'小李',email:'xiaoli@easyjf.com',sex:'男',bornDate:'1992-5-6'},"+
"{id:1,name:'小兰',email:'xiaoxiao@easyjf.com',sex:'女',bornDate:'1993-3-7'}]}";
out.println(json);
out.flush();
out.close();
}
public void init() throws ServletException {
// Put your code here
}
}
jsp如下:
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="<%=path %>/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=path %>/ext-2.2/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="<%=path %>/ext-2.2/resources/css/ext-all.css" />
</head>
<body>
<div id="hello"></div>
</body>
<script>
// Ext 与后台交互的例子. 后台代码为TestServlet 后台Servlet中发送的Json对象的字符串显示在该页面
Ext.onReady(function (){
var store = new Ext.data.Store({
url:'<%=path%>/servlet/TestServlet',
reader:new Ext.data.JsonReader(
{root:"results",
fields:['id','name','email','sex',{name:'bornDate',type:'date',dateFormat:'Y-n-j'}]}
)
});
store.load();
var grid = new Ext.grid.GridPanel({
renderTo:'hello',
title:'与后台交互例子',
height:300,
width:650,
columns:[
{header:'ID',dataIndex:'id'},
{header:'名字',dataIndex:'name',sortable:true},
{header:'邮箱',dataIndex:'email',width:150},
{header:'性别',dataIndex:'sex'},
{header:'邮箱',dataIndex:'bornDate',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
],
store:store
});
});
</script>
</html>
分享到：
发表评论
-
websphere5.1 MyEclipse控制台日志输出
2010-11-15 12:34 1014如果你用的IDE工具是MyEclipse，集成was5时，下面 ... -
数据库设计中的14个技巧[转载]
2010-04-17 22:31 780出处不知是哪里了,呵呵 ... -
Struts2学习日志(一)
2009-08-06 17:37 1123Struts2的学习,所需jar包如附件所示,放到项目的Web ... -
项目管理中的PFA(功能点)的相关术语
2009-07-24 09:54 1340序号 术语名 术语含义 ... -
Struts 1.X的标签
2009-07-06 16:20 722struts中的标签与ActionForm结合的比较紧 在j ... -
Oracle数据导出和导入imp/exp命令
2009-07-06 16:19 845Oracle数据导入导出imp/exp就相当于oracle数据 ... -
Hibernate中的HQL杂谈
2009-07-06 16:19 688关于ＨＱＬ语句 中的 group by hql 是不 ... -
jxt解析上传的xls文件
2009-07-06 16:18 1003Hashtable fileh = form.getMul ... -
oracle 建立用户到用户建表的步骤
2009-07-06 16:17 941建立用户到用户建表的步骤：Server建立：create u ... -
APACHE 2.2.8+TOMCAT6.0.14配置负载均衡
2009-07-06 16:17 749APACHE 2.2.8+TOMCAT6.0.14配置负载均衡 ... -
log4j学习
2009-07-06 16:16 679log4j是一个非常强大的lo ...
相关推荐
EXT3.3学习文档主要涉及的是Linux操作系统中的EXT3文件系统的一个特定版本——EXT3.3。EXT3，全称为“Third Extended File System”，是Linux系统中广泛使用的日志文件系统之一，尤其在早期的发行版中非常常见。EXT...
- **数据一致性**：“' + 8 G' ,1 N”这一段可能介绍了ext2文件系统如何通过日志记录等机制来确保数据的一致性，避免在系统崩溃时丢失数据。 - **文件权限与安全**：“' - BGSVi|:;...
1. **EXT3**：全称为"Third Extended File System"，是Linux下的一种日志文件系统。它在1990年代中期由Reed设计，以解决EXT2文件系统缺乏日志记录功能的问题。EXT3支持事务处理，可以在系统崩溃后快速恢复文件系统的...
EXT3，全称为“Extended File System 3”，是Linux操作系统中的一个日志文件系统，它在1998年由Stephen Tweedie开发并引入Linux内核。EXT3是EXT2的扩展，增加了日志功能，提高了系统的可靠性和数据一致性。在Linux...
它是第一个被广泛应用的日志式Linux文件系统，旨在解决Ext2在数据安全性和恢复性上的不足。 1. **日志式特性**: Ext3引入了日志机制，可以快速恢复文件系统到一致状态，减少了系统崩溃后的检查和修复时间，提高了...
EXT3，全称为“Third Extended File System”，是Linux操作系统中广泛使用的一种日志式文件系统。它是EXT2的升级版，引入了日志记录功能，增强了数据一致性与系统的稳定性。EXT3.4和EXT3.1.0是EXT3文件系统在不同...
8.12. 回头谈一谈Ext里的ajax 9. 沉寂吧！我们要自己的控件。 9.1. 下拉树形选择框TreeField 9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. ...
EXT2.0是Linux操作系统下的一种文件系统，它是EXT（第二扩展文件系统）的第一个稳定版本。EXT2在20世纪90年代初由Rene Rebeau开发，作为当时默认的ext文件系统的替代品。EXT2.0主要改进了EXT1的缺陷，如提高了速度、...
EXT是Linux系统中广泛使用的文件系统之一，EXT3（Extended File System 3）是它的第三个主要版本，由 Rémy Card 开发并在1998年引入。EXT3是EXT2的扩展，它增加了日志功能，提高了系统的稳定性和数据安全性。在本...
【标题】: "ext3.0ext3.0ext3.0" 指的是Linux文件系统中的EXT3（Third Extended File System），这是一个稳定且广泛使用的日志文件系统，最初由Rik Faith开发，用于替代早期的EXT2系统。EXT3在1990年代末期推出，它...
EXT3.0是一款广泛应用于Linux系统的日志文件系统，它在EXT2的基础上进行了改进，引入了日志记录功能，提高了系统的稳定性和数据安全性。EXT3是Linux社区在20世纪90年代末期开发的，作为EXT2的升级版本，主要用于解决...
EXT2.0是一种古老的Linux文件系统，它是EXT（第二扩展文件系统）的第二个主要版本，由Remy Card在1993年开发。EXT2.0的出现是为了解决当时广泛使用的VFAT和FAT文件系统在Linux环境中的局限性，尤其是在大容量硬盘上...
基于ext3的内核日志模块分析，源码分析，里面内容丰富，比较系统，供大家学习！
EXT4（Fourth Extended File System）是Linux操作系统中广泛使用的日志式文件系统，它是EXT3的扩展和优化版本。EXT4的设计目标是提高性能、增加大文件支持，并改进EXT3的一些限制。这个API文档是学习EXT4内部工作...
**EXT4.0中文文档详解** EXT4，全称Fourth Extended File System，是Linux系统中广泛使用的文件系统之一。EXT4.0作为其一个版本，引入...通过深入学习和实践，可以充分利用EXT4的特性，提升Linux系统的性能和可靠性。
1. **日志结构**：EXT2.0虽然没有引入日志式文件系统，但它是非日志式的，这意味着在系统崩溃或不正常关机后，可能需要进行检查和修复。这与后来的EXT3和EXT4文件系统形成了对比，后者支持日志记录，提高了系统的...
这个Demo对于学习EXT3.0的使用、管理和维护，以及理解日志式文件系统的工作原理都非常有价值。它可以帮助用户深入理解Linux文件系统的核心概念，以及在实际环境中如何确保数据安全和系统稳定。如果你是Linux管理员或...
EXT是Linux操作系统中广泛使用的文件系统家族，包括EXT2、EXT3和EXT4等多个版本。这些文件系统在Linux世界中扮演着至...这个"非常好的EXT初级学习教程"将帮助你踏上这一旅程，通过实践和理论结合，提升你的Linux技能。