EXT学习日志(一)

最新推荐文章于 2021-05-11 01:55:17 发布

iteye_15037

最新推荐文章于 2021-05-11 01:55:17 发布

阅读量179

点赞数

分类专栏：其他学习日志文章标签： EXT json Servlet HTML 搜索引擎

其他学习日志专栏收录该内容

12 篇文章 0 订阅

订阅专栏

基础的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>