`

EXT学习日志(一)

EXTjsonServletHTML搜索引擎 
阅读更多
基础的Ext的小例子,基本上按照一些资料上手动敲了一遍.有些自己加了一点注释.
所用的版本是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>

分享到：
| Struts2学习日志(一)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ext4.0学习总结及使用说明

    ext4.0大大扩充了ext3.0的功能，Ext4是一种针对ext3系统的扩展日志式文件系统,是专门为 Linux 开发的原始的扩展文件系统（ext 或 extfs）的第四版。 Linux kernel 自 2.6.28 开始正式支持新的文件系统 Ext4。 Ext4 ...

    Ext 开发指南 学习资料

    8.12. 回头谈一谈Ext里的ajax 9. 沉寂吧！我们要自己的控件。 9.1. 下拉树形选择框TreeField 9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. ...

    基于ext3的内核日志模块分析

    基于ext3的内核日志模块分析，源码分析，里面内容丰富，比较系统，供大家学习！

    Extjs4.0+java的一个后台管理项目

    一个用Extjs4.0实现的后台管理项目，java后台，sqlserver数据库。涉及日志管理功能。这是一个很好的学习Ext4.0的项目。

    flex 4 学习资料

    用flex开发过程中积累下来的资料，供flex初学者学习！ 以下为部分资料标题： /***************************************/ 在tomcat中部署安装Flex Data Services (LiveCycle DS) [转]_baidu_百度空间 基于flex4技术...

    log4Net详解(共2讲)

    5、易于扩展是Ext的最大特色之一，如何才能将它的这一功能发挥到极致？ 6、在应用Web化的大潮中，单页面应用越来越受到追捧，如何使用Ext快速而简单地开发单页面应用？ 7、Web开发中最让人头疼的是脚本调试 .如何...

    使用‘fsck’修复Linux中文件系统错误的方法

    主要给大家介绍了关于如何使用'fsck'修复Linux中文件系统错误的相关资料，文中通过示例代码以及图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

    oracle9i oracle11g oracle10g 性能调优 基础学习 视频地址

    1z0-033-13 关于自动段空间管理 ext 与oracle 空间使用 percent oracle块参数 行迁移问题 什么时间进行索引重组 优化性能 13 1z0-033-15 讨论不同类型索引 索引组织表（簇化表） OLTP 有什么性质要求 13 1z0-033-18-...

    canphp框架(php框架) v1.5.zip

    CanPHP框架 v1.5 升级日志： 1、增加xml类，用于xml数据转换成php数组 2、增强分页类，优化生成的分页网址，增加长文章内容分页功能 3、增强图片类，增加图片水印功能 4、增强系统错误处理类，可以显示出错的...

    canphp框架(php框架) v1.5

    CanPHP框架(简称CP)，是一个简单、自由、实用、高效的php框架。... CanPHP框架(CP) 特点： 只要您会输出'...如if，for，foreach标签等6、增加自定义网址解析接口url_parse_ext()7、修正权限认证类和cpModel模型类缓存bug

    边干边学Linux__第二版_doc格式

    目 录 第一部分 Linux 操作环境 第1章 Linux基础 1.1 登录Linux系统 1.2 Linx的shell 1.3 shell的一些基本命令 第2章 文本编辑 2.1 vi文本编辑器 2.2 emacs文本编辑器 ...18.9 附录：优秀的日志文件系统——ext3

    setuptools-changelog:Setuptools插件，用于以SemVer样式生成和管理变更日志

    {name}.{type}.{ext} 在哪里： name ：片段名称。 如果以数字开头并且您已指定问题跟踪器，则此数字将自动变为问题参考。 否则，可能只有一些助记符名称可以简化导航。 type ：片段类型。 默认情况下，以下类型...

    自学mybatis系列

    power designer win7 win8 解析 excel 解析 xml 图表 工具 ...spring 小工具 日志 定时器 中国地图 能点 mysql 验证码 easyUI 了解 EXT 了解 spring 用户权限 验证框架了解 HttpClient 爬虫 反射

    SpringMVC基础上的web框架

    这个框架是在学习Spring的时候，为了积累学习成果，自己搭建的，一般的系统开发也可以直接使用，包括一个系统开发的基础功能。 以下是当时自己开发时的日志，大致可以说明框架里已有功能 1.0.5 从web项目迁移成maven...

    第七章-《大数据导论》大数据处理平台.pdf

    算模型和框架，负责计算 HDFS HDFS: Hadoop Distributed File System 构建于本地文件系统之上，例如：ext3, xfs等 特点：多备份、一次写入（不允许修改） MapReduce 基本思想： 分而治之: 数据被切分成许多独立分片...

    JFinal v3.2

    JFinal 是基于 Java 语言的极速 WEB + ORM 框架，其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful。 在拥有Java语言所有优势的同时再拥有ruby、python、php等动态语言的开发效率...

    xmljava系统源码-iyeeku:企业后台管理系统（个人学习，代码实战，知识积累储备）

    该项目编写目的：用于个人工作之余实战学习互联网开发一些常用技术：搜索、缓存、微服务等,解决方案,系统设计,知识储备积累等。 演示地址 特性 基于Spring + SpringMVC + MyBatis 开发 ，Maven管理项目，JDK1.8，...

    searchio:用Python实现的Wikipedia文章搜索引擎

    每个模块都需要连接到日志系统这可以通过以下方式完成： Log.appendToLog(ctx=discord.ext.commands.Context, command=str, args=str OR list) 必需的实例属性是： bot=discord.ext.commands.Bot ctx=discord....

    Simpleflow V2009 工作流套件(Domino)

    6.Log.nsf 流程运行日志库(CS/BS) 7.Names_Ext.nsf 辅助目录库(CS/BS) 注:所有Profile设置,均在CS进行. 3.关于自带样例 1.非生产采购申请 一个简单实现的采购申请,业务流程不一定具有代表性.仅供参考 实现...

    基于pytorch框架+Bert的指代消解python源码(课程大作业)+训练好的模型+项目说明+数据.zip

    使用的预训练模型可以去hugging face上下载：hfl/chinese-roberta-wwm-ext。已经训练好的模型： 阿里云盘链接：https://www.aliyundrive.com/s/YhRYjA8zD16 目录结构 --checkpoints：模型保存位置 --logs：日志...

Magicbox
Global site tag (gtag.js) - Google Analytics