Gwt-Ext学习笔记之基础篇

一、 安装 Cypal Studio工具

a.       下载 Cypal Studio http://code.google.com/p/cypal-studio/ ，解压后 Copy到 Eclipse目录下。

b.      配置 GWT Home目录，打开 Eclipse的 Window—Preferences—Cypal Studio 选择 Gwt的目录。

二、 建立一个名为 gwtext的 GWT项目

a.       新建一个动态 web项目， File—New—Other—Web—Dynamic Web Project，在 Configurations中选择 Cypal Studio GWT Project，其他的默认即可。

三、 创建 Module模型

a.       gwtext项目上点击右键 New—Other—Cypal Studio—Module，输入包名 org.gwtext.julycn,类名 Register。

b.      在 org.gwtext.julycn包下面生产 client包、 server包、 public目录和 Register.gwt.xml、 Register.html；

c.       在 Register.java的 onModuleLoad() 方法中加入 Window.alert("This is my first Gwt Demo!");

/**
 * @author 七月天
 *
 */

public class Register implements EntryPoint {
	public void onModuleLoad() {
			Window.alert("This is my first Gwt Demo!");
		}
}

d.      选择 Run—Open Run Dialog—Gwt Hosted Mode Application,选择 New,新建一个运行实例 gwtext,在 Project中选择 gwtext， Module会自动选择所要运行的模型类。

e.      点击运行，会弹出 Google Web Toolkit运行窗口。

四、 配置 GWT-Ext环境

a.       下载 gwt-ext 和 ext 资源

b.      加入 gwtext的 gwtext.jar和 ext资源

                                                               i.      把 gwtext-2.0.3目录下的 gwtext.jar加入到项目中。

                                                             ii.      在项目的 public目录中新建 js文件夹，然后把 ext-2.1目录下的 adapter目录、 resources目录和 ext-all.js、 ext-core.js导入到 js文件夹下。

c.       修改 HTML宿主页面 Register.html和模块配置文件 Register.gwt.xml

                                                               i.      在 Register.html文件中加入

<link href="js/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="js/ext-all.js"></script>

                                                             ii.      在 Register.gwt.xml文件中加入

<inherits name="com.gwtext.GwtExt"/>

五、 运行 GWT-Ext实例

a.       修改 Register.java模型文件 ,内容如下：

/**
 * @author 七月天
 *
 */
public class Register implements EntryPoint{
	public void onModuleLoad() {
		createComponents();
	}

	private void createComponents() {
		final FormPanel frm = new FormPanel();
		frm.setDraggable(true);
		frm.setWidth(300);
		frm.setTitle("用户注册");
		frm.setPaddings(25);

		TextField txtUsername = new TextField("用户名", "username");
		TextField txtPassword = new TextField("密码", "password");
		TextField txtEmail = new TextField("邮箱", "email");
		TextField txtPhone = new TextField("电话", "phone");

		txtUsername.setRegex("^[a-zA-Z]*$");
		txtUsername.setRegexText("用户名必须为字母！");
		txtUsername.setAllowBlank(false);

		txtPassword.setPassword(true);
		txtPassword.setRegex("^[a-zA-Z]*$");
		txtPassword.setRegexText("密码必须为字母！");
		txtPassword.setAllowBlank(false);

		txtEmail.setVtype(VType.EMAIL);
		txtEmail.setVtypeText("请输入合法的邮箱地址！");
		txtEmail.setAllowBlank(false);

		txtPhone.setRegex("^\\d*$");
		txtPhone.setRegexText("电话必须为数字！");
		txtPhone.setAllowBlank(false);

		frm.add(txtUsername);
		frm.add(txtPassword);
		frm.add(txtEmail);
		frm.add(txtPhone);

		Panel buttonPanel = new Panel();
		buttonPanel.setLayout(new HorizontalLayout(10));

		
		Button btnSave = new Button("保存");
		btnSave.addListener(new ButtonListenerAdapter() {
			public void onClick(Button button, EventObject e) {
				if (frm.getForm().isValid()) {
					MessageBox.alert("成功","信息提交成功！");
				} else {
					MessageBox.alert("错误","请验证输入的信息是否正确！");
				}
			}
		});

		Button btnClear = new Button("取消");
		btnClear.addListener(new ButtonListenerAdapter() {
			public void onClick(Button button, EventObject e) {
				MessageBox.alert("取消", "注册信息保存失败！");
			}
		});

		buttonPanel.add(btnSave);
		buttonPanel.add(btnClear);

		frm.add(buttonPanel);

		RootPanel.get().add(frm);
	}
}

b.      运行效果；点击如下按钮，查看效果

备注：本文只是一个简单的 Demo ，如果有问题，请跟帖。想要更多的人帮助你，请先帮助更多的人

• 第二届网络工程师侠客行大会5月24日杭州举行
• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

• 搜狐网站诚聘Java、PHP和C++工程师
• 第二届网络工程师侠客行大会5月24日杭州举行
• 北京: 千橡集团暨校内网诚聘软件研发工程师

最近从书店买了本struts2的书在看，顺便试验了一下书中的AJAX部分。

由于本人是初学编程，而且又是第一次发贴，所以如果有什么不对的地方还请大家批评指正。

Struts2 Ajax的输入校验不是客户端校验,而是服务器端校验,Struts 2中集成的是时下Java EE平台中比较流行的ajax框架——Dojo和DWR。

在开始前先导入struts2的JAR包到WEB-INF/lib目录下。

要使用DWR，则要在WEB-INF下生成一个dwr.xml文件内容如下：

dwr.xml:

<!DOCTYPE dwr PUBLIC 
	"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" 
	"http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
    <allow>
        <create creator="new" javascript="validator">
            <param name="class" value="org.apache.struts2.validators.DWRValidator"/>
        </create>
        <convert converter="bean" match="com.opensymphony.xwork2.ValidationAwareSupport"/>
    </allow>

    <signatures>
        <![CDATA[
        import java.util.Map;
        import org.apache.struts2.validators.DWRValidator;

        DWRValidator.doPost(String, String, Map<String, String>);
        ]]>
    </signatures>
</dwr>

    这个文件是不用修改的直接COPY过来即可。在上面配置文件中，将org.apache.struts2.validators.DWRValidator类创建成一个JavaScript对象，这个对象名为validator。当然，这里所说的创建是假创建，因为Java类是无法创建JavaScript对象，但DWR提供一种方式，允许当我们在客户端调用validator的方法时，转换成调用DWRValidator实例的方法。值得指出的是，为了让Web应用增加DWR支持，显然还需要将DWR的二进制包复制到Web应用中。即使对于Struts2.0.6正式版，依然不支持DWR的的最新版本（DWR的最新版本是2.0.1），因此只能使用DWR的前一个正式版1.1.3，将dwr-1.1.3.jar文件复制到Web应用中的lib目录下即可。

然后修改web.xml文件：

web.xml:

<?xml version="1.0" encoding="GBK"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

	<servlet>

		<servlet-name>dwr</servlet-name>
		<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
	</servlet>

	<servlet-mapping>
		<servlet-name>dwr</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>



	<!-- 定义Struts2的FilterDispathcer的Filter -->
	<filter>
		<filter-name>struts2</filter-name>
		<filter-class>
			org.apache.struts2.dispatcher.FilterDispatcher
		</filter-class>
	</filter>

	<!-- FilterDispatcher用来初始化struts2并且处理所有的WEB请求。 -->
	<filter-mapping>
		<filter-name>struts2</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

</web-app>

 接下来写一个JSP页面：

register.jsp:

<%@ page contentType="text/html;charset=GBK" language="java"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
	<head>
		<title>远程ajax表单</title>
		<s:head theme="ajax" />
	</head>
	<body>
		<s:div id="mydiv"></s:div>
		<s:div>
			<s:form id="theForm2" action="AjaxTest" method="post" theme="ajax"
				validate="true">
				<s:textfield name="name" label="请输入你的用户名" />
				<s:password name="pass" label="请输入你的密码" />
				<s:submit value="登录" targets="mydiv" loadingText="请稍后..." />
			</s:form>
		</s:div>
	</body>
</html>

 其中一定在在<head></head>之间加入<s:head theme="ajax" />这句话，然后在后面的form中也要将theme设置成ajax，validate设为true,这样struts2就会自动地将form表单内的各个域设成validate为true.validate=true即表明要进行ajax检验。

 下面再写一个AJAX响应JSP页面片断：

AjaxResult.jsp:

<%@ page contentType="text/html;charset=GBK" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
    request.setAttribute("decorator", "none");
    response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
    response.setHeader("Pragma","no-cache"); //HTTP 1.0
    response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
你的姓名是:<s:property value="name"/><br>
你的密码是:<s:property value="pass"/>

下一步要做的就是编写Action类：

AjaxTestAction.java:

package test;

import com.opensymphony.xwork2.Action;
import com.opensymphony.xwork2.ActionSupport;

import java.io.Serializable;

@SuppressWarnings("serial")
public class AjaxTestAction  implements Action, Serializable
{
	private String name;
	private String pass;

	public String getPass()
	{
		return pass;
	}

	public void setPass(String pass)
	{
		this.pass = pass;
	}

	public String getName()
	{
		return name;
	}

	public void setName(String name)
	{
		this.name = name;
	}

	public String execute() throws Exception
	{
		return SUCCESS;
	}

}

 接下来是编写验证文件，在进行struts2 ajax验证是推荐使用校验规则文件来进行，尽量不要使用“重写Action类的validate方法，重写该方法来完成ajax校验可能会出现一些未知的异常！校验规则文件如下： 

AjaxTestAction-validation.xml:

<?xml version="1.0" encoding="GBK"?>
<!DOCTYPE validators PUBLIC "-//OpenSymphony Group//XWork Validator 1.0.2//EN"
	"http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">

<validators>
	<field name="name">
		<field-validator type="requiredstring">
			<param name="trim">true</param>
			<message>必须输入名字</message>
		</field-validator>
		<field-validator type="regex">
			<param name="expression"><![CDATA[(\w{4,25})]]></param>
			<message>您输入的用户名只能是长度在4到25之间的字母或数字</message>
		</field-validator>
	</field>
	<field name="pass">
		<field-validator type="requiredstring">
			<param name="trim">true</param>
			<message>必须输入密码</message>
		</field-validator>
		<field-validator type="regex">
			<param name="expression"><![CDATA[(\w{4,25})]]></param>
			<message>您输入的密码只能是长度在4到25之间的字母或数字</message>
		</field-validator>
	</field>
</validators>

最后一步啦！修改struts2 Action配置文件：

struts.xml: 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	<package name="ajax" extends="struts-default">
		<action name="AjaxTest" class="test.AjaxTestAction">
			<result name="success">/AjaxResult.jsp</result>
			<result name="input">/register.jsp</result>
		</action>
	</package>
</struts>

 一切准备就绪，启动服务器，在地址栏中输入以下地址：http://localhost:8080/Test/register.jsp就可以看到登录界面，在用户名和密码框中如果你输入的信息不正确，那么在该组件失去焦点后，ajax组件就会将用户名和密码框的值传到服务器进行校验，然后将校验结果返回客户端从而达到很好的用户体验。

最后想要说明一点是：在struts2以前版本中对DWR有一些BUG，不过好像在最新的struts 2.0.11.1中已经解决，建议大家将struts2升级至最新版本。

还有一个我在练习中犯的一个错误，就是当我想用AjaxResult.jsp返回内容填充我原来的theForm2时，theForm2的内容会被刷掉，也就是不能引用原来theForm2内容的组件。这时如果在AjaxResult.jsp中使用<s:property value="name"/>时会出现问题。不知道我分析的对不对！如有错误还请批评指正。文件内容如下：

register.jsp: 

<%@ page contentType="text/html;charset=GBK" language="java"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
	<head>
		<title>远程ajax表单</title>
		<s:head theme="ajax" />
	</head>
	<body>
		<s:div id="mydiv"></s:div>
		<s:div>
			<s:form id="theForm2" action="AjaxTest" method="post" theme="ajax"
				validate="true">
				<s:textfield name="name" label="请输入你的用户名" />
				<s:password name="pass" label="请输入你的密码" />
				<s:submit value="登录" targets="theForm2" loadingText="请稍后..." />
			</s:form>
		</s:div>
	</body>
</html>

 AjaxResult.jsp:

<%@ page contentType="text/html;charset=GBK" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
    request.setAttribute("decorator", "none");
    response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
    response.setHeader("Pragma","no-cache"); //HTTP 1.0
    response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
你的姓名是:<s:property value="name"/><br>
你的密码是:<s:property value="pass"/>

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师
• 第二届网络工程师侠客行大会5月24日杭州举行

• Flex
• Applet
• Silverlight

• 第二届网络工程师侠客行大会5月24日杭州举行
• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

http://www.91mh.net/index.html

这是我们小组3个人前台:使用javascript 模板,后台输出JSON的第二个站,

第一个站的方案紧紧是实验品,所以不提了.

这个可以称之为尝试了.

采用前台模板后的结果就是后台超级的简单.由于javascript语法的强大方便,前台处理表现效率更高.

下面就是您看到的内容的全部后台数据输出代码,当然入口程序,数据库操作的封装类,JSON输出类等属于库级别的就不发了.

代码是php写的,可惜JE不支持php的高亮语法.

补充:关于搜索引擎支持的问题,见后面的帖子,91mh已经实施了我提出的方案.效果如何等等看吧!

$json=array();//输出JSON变量
switch ($Q['Q']){//$Q就是前台传递过来的所有参数合并
case 'loadbody':
	$gif='/style/imgs/logo.gif';//这个是logo的替换,是我们的业务逻辑要求的
	$json['URL']=$SITE['webroot'].'/index.html';//告诉前台取哪一个模板,$SITE是全局的站点目录对应变量
	$json['uinfo']=false;
	$json['logo']=$gif;
	$json['gonggao']='内部测试中.......FireFox下将获得最佳浏览效果.';
	//下面是取一些热点信息
	$sql="SELECT id,n_name,fenlei FROM flash ORDER BY mouse DESC limit 5";
	$DB->query($sql,$json['gx']);
	$sql="SELECT id,n_name,fenlei FROM news ORDER BY mouse DESC limit 5";
	$DB->query($sql,$json['gx']);
	//用户信息,从SESSION中取
	$json['uinfo']=$SESSION['uinfo'];
	$json['rd']=$json['gx'];
	$json['tb']=$json['gx'];
	$json['gg'][0]=array('title'=>'44','url'=>'#','image'=>'/style/imgs/loading.gif');
	$json['yq'][0]=array('title'=>'44','url'=>'#','image'=>'/style/imgs/loading.gif');
	break;
case 'xwnr'://新闻具体内容,根据变量的不同取不同的表里的数据,其实新闻这个词不合适,因为我们合并了新闻,文章,帖子等
	$fenlei=$F['fenlei'];
	$table=array(1=>'news',14=>'data_is',32=>'flash');
	$fields=array(
		'1'=>'id,n_name,laiyuan,nicheng,n_time,neirong',
		'14'=>'id,d_id,file,z_num,z_name,fenlei',
		'32'=>'id,n_name,fenlei,nicheng,uptime,u_id,jieshao,fileurl'
	);
	if($FENLEI[$fenlei]['toup'])
		$toup=$FENLEI[$fenlei]['toup'];
	else
		$toup=$fenlei;
	$table=$table[$toup];
	$fields=$fields[$toup];
	$id=$Q['id']+0;
	$where="WHERE id=$id";
	$sql="SELECT $fields FROM $table $where limit 1";
	if($DB->query($sql,$json,true)){
		$DB->click($table,$where);//计数器
		if ($table=='news'){//新闻分页,有些新闻是由分页信息的,好多站都有这个功能,可惜JE没有这个功能
			$json['page']=$DB->count('news_data',"WHERE news_id=$id");
		}
	}
	break;
case 'newspage'://提取分页新闻分页
	$news_id=$Q['id']+0;
	$page=$Q['PAGE']+0;
	$sql="SELECT neirong FROM news_data WHERE news_id=$news_id order by id limit $page,1";
	$DB->query($sql,$json,true);
	break;
case 'ftfs'://漫画浏览,由于我们的漫画是打过包(ftfs包,自己定义的格式,所以要特殊处理)
	$id=$F['id'];
	$sql="SELECT id,d_id,z_name,z_num,fenlei,file FROM data_is WHERE id=$id";
	$DB->query($sql,$json,true);
	break;
case 'mhxx'://漫画信息
	$id=$F['id']+0;
	$json['d_id']=$id;
	$json['fenlei']=$F['fenlei']+0;
	$sql="SELECT id,n_name,fenlei,uptime,gengxin,zuozhe,dir,jieshao,zt FROM data WHERE id=$id limit 1";
	$DB->query($sql,$json['data'],true);
	$sql="SELECT id,d_id,z_name,fenlei,file FROM data_is WHERE d_id=$id order by id desc";
	if($DB->query($sql,$json['liebiao']))
		$DB->click('data',"WHERE id=$id");
	break;
case 'dmxw'://新闻列表,根据变量的不同取不同的表里的数据,其实新闻这个词不合适,因为我们合并了新闻,文章,帖子等
	$Q['Page']=$Q['Page']+0;
	$fenlei=$F['fenlei']+0;
	if($FENLEI[$fenlei]['toup'])
		$toup=$FENLEI[$fenlei]['toup'];
	else
		$toup=$fenlei;
	$table=array(1=>'news',14=>'data',32=>'flash');
	$fields=array(
		1=>'id,n_name,fenlei,nicheng,n_time,u_id',
		14=>'id,n_name,fenlei,uptime,gengxin,dir,zt',
		32=>'id,n_name,fenlei,nicheng,uptime,u_id,fileurl'
	);
	$table=$table[$toup];
	$fields=$fields[$toup];
	if($FENLEI[$fenlei]['toup'])
		$where="WHERE fenlei=$fenlei";
	else
		$where='';
	if ($table=='data' and $F['abc']){//漫画字母索引搜索的特殊处理
		$abc=$DB->escape($F['abc']);
		if($where)
			$where+=" and abc=$abc";
		else
			$where="WHERE abc=$abc";
	}
	if (!$Q['CNT']) {
		$Q['CNT']=$DB->count($table,$where);
	}
	$json['lbpage']=array();//列表分页信息处理
	$json['lbpage']['rows']=10;
	$json['lbpage']['urlpar']="Q=$Q[Q]&fenlei=$fenlei";
	$json['lbpage']['cnt']=$Q['CNT'];
	$json['lbpage']['pages']=9;
	$json['lbpage']['no'] = $Q['Page'];
	$limit = pagelimit($json['lbpage']['rows'],$Q['CNT'],$Q['Page']);
	$sql="SELECT $fields FROM $table $where ORDER BY id DESC $limit";
	$json['title']=$FENLEI[$fenlei]['f_name'];
	$DB->query($sql,$json['liebiao']);
	break;
}
$E->pushJSON($json);//用共用库输出JSON数据

 后话.

这个站我们是从零开始建设的,3个人用了30个工作日.分工是:

1个策划:规划站点的业务逻辑和内容,建立数据库,小偷

1个页面:css,html.还有这个同事不是全职的,这1个月她工作的时间满算也就只有10天

我:负责其他工作,因为是我们原发的技术方案,所以很多东西要重头写,

可笑的是我有10天都完全被所见即所得的问题缠绕,

其中2天的选型,选择了wymeditor,化了4天改造他符合我们的技术逻辑.

就发现了nicEditor,发现nE更适合,就有化了4天学习扩充(这个谈不上改造,因为她的技术和我们的可以完美结合)符合我们的技术逻辑.到现在基本完成.

• 第二届网络工程师侠客行大会5月24日杭州举行
• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

<%@ page contentType="text/html; charset=GBK"%>
<%@ include file="/common/include/taglib.jsp"%>
<%@ include file="/common/include/cssjs.jsp"%>
<%@ include file="/common/include/extcssjs.jsp"%>
<html>
<head>
<title>Red门户网站通用平台 V 0.1</title>
<script type="text/javascript">
function doAction(url){
  parent.mainFrame.location.href = url;
 }
 
Ext.onReady(function(){
      new Ext.Viewport({
             layout:'border',
             items:[
                    new Ext.BoxComponent({
                         region:'north',
                         el: 'north',//填充指定id的区域内容到north区域，若不设该属性，请通过html:'内容'，设置区域内容
                         height:35
                   }),new Ext.BoxComponent({
                         region:'south',
                         el: 'south',
                         height:0
                   }),{
                        region:'center',
                        title:'业务办理',
                        contentEl:'center'
                   },{
                       region:'west',
                       width: 200,
                       collapsible: true,
                       minSize: 100,
                       maxSize: 300,
                       split: true,
                       title: 'eRed门户网站通用平台 V 0.1',
                       contentEl: 'tree'
                   }]
            });
       });
</script>
<body>
<html:form action="/security.go" method="post">
<div id="north">
顶部
</div>
<div id="south"> 

</div>
<div id="center"> 
业务区域
</div>
${treeScript}
</html:form>
</body>
</html>

• 第二届网络工程师侠客行大会5月24日杭州举行
• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

     我们的网站是一个基于prototype.js ,scriptaculous.开发的社交型网站。

     里面大量使用scriptaculous 的很酷的效果。 我们的网站在首次打开之后，会再调用ajax访问服务器读一些东西下来，再对这些信息进行初始化（相信这种做法在现在web2.0网站里很常用）。 由于初始化要处理的javascript动作很多， 所以网页真正加载完是需要的时间比较长， 这在用户体验上肯定是不好的。 我想请问，我应该如何做才能把js的性能瓶颈找出来呢？ 感谢每一个回答者！

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师
• 第二届网络工程师侠客行大会5月24日杭州举行

• 搜狐网站诚聘Java、PHP和C++工程师
• 第二届网络工程师侠客行大会5月24日杭州举行
• 北京: 千橡集团暨校内网诚聘软件研发工程师

有两页面：

页面一：WebForm1.aspx

有一个提交按钮和几个表单元素

当点击提交按钮时将页面转发至 WebForm2.aspx：

private void Button1_Click(object sender, System.EventArgs e)
  {
   Server.Transfer("WebForm2.aspx");
  }

页面二：WebForm2.aspx

页面加载时,遍历WebForm1.aspx提交过来的Form里的元素

重新生成<input>元素appendChild至document.body

以下是WebForm2.aspx的代码：

private void Page_Load(object sender, System.EventArgs e)
  {
   string forms="";
   for(int i=0; i<Request.Form.Count; i++)
   {
    forms+=Request.Form.Keys[i]+"|";
   }
   forms=forms.TrimEnd('|');
   string script=" var supforms='{0}'; ";
   script=string.Format(script,forms);

   string scr=@"
    var fnames=supforms.split('|');
    for(var i=0; i<fnames.length; i++){
     var f=document.forms[0];
     //if(f[fnames[i]!=undefined){
      var el=document.createElement('<input>');
      el.type='text';
      el.value=fnames[i];
      document.body.appendChild(el);      
     //}
    }
    alert(document.body.innerHTML);

   ";
   scr=script+scr;

   Page.RegisterStartupScript("k","<script>"+scr+"</script>");

  }

但是当追加完元素,在alter显示body的innerHTML后又弹出：

Internet Explorer 无法打开 Internet 站点 http://localhost/t/WebForm1.aspx  已终止操作。

的警告。然后就整个页面就是

无法显示网页

的状态。但是当追加完元素后点击alter弹出框确定按钮前界面上已经显示出了刚追加的元素，点击确定按钮之后才出现以上问题。
这究竟是什么原因？难道是appendChild保存了原始文档的引用，方法执行后还会去重新请求原来的WebForm1.aspx页面文档
而此时服务器已将页面转发至WebForm2.aspx导致引用不到原来文档吗？
appendChild方法到底做了些什么，还是我分析错了？请大家发表下高见！

• 第二届网络工程师侠客行大会5月24日杭州举行
• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

具体实现一个Ext表格流程如下
1) 确定数据源，数据可以从服务器获取，也可以从本地获取，但是一般来说从本地获取意义不大。实现如下。

var jsonhttp=new Ext.data.HttpProxy({url:'aabbcc.do'});
var ds = new Ext.data.Store({ proxy: jsonhttp,
 reader:new Ext.data.JsonReader( {root:’table’},
 [{name:'id'},{name:'name'},{name:'sex'}])});

 这段代码从aabbcc.do中获取数据，然后按照
{‘table’:[{id:’x’,name:’y’,sex:’z’}]}格式简析,当然，返回数据也可以多条
{‘table’:[{id:’x’,name:’y’,sex:’z’},{id:’x1’,name:’y1’,sex:’z1’},……]}。
加上ds.load(); 加载数据。

2) 定义表格列模型，如下

var cm = new Ext.grid.ColumnModel([
{id:'0',header:'编号',dataIndex:'id'}, 
{id:'1',header:'姓名',dataIndex:'name'},
{id:'2',header:'性别',dataIndex:'sex'}]);

3) 定义表格

var grid = new Ext.grid.GridPanel({
renderTo:"xdiv",
height:260,
width:790, 
cm:cm,
store:ds});

 
renderTo：指定组建渲染的对象
cm：表格的列模型，

store：表格的数据源。以上属性是配置一个表格的必须属性，当然，根据需要还可以增加一些属性如：
sm:表格的选择模型，
loadMask：是否需要在表格加载时显示遮罩效果。

stripeRows：是否为表格加上分隔线。
tbar,bbar:分别用于指定表格上下的工具栏。
title:表格标题，加上这个属性后表格标题栏也会随之显示。

4) 加上grid.render(),表格就可以显示了。

如果在编号字段上加上sortable：true则效果如下

加上collapsible:true,显示效果如下。

为表格加上复选框。首先，定义一个选择模式，如下
         var sm = new Ext.grid.CheckboxSelectionModel();

然后在grid的属性和ColumnModel的属性中加上sm属性即可的如下显示。

为表格加上分页。首先定义一个分页面板如下。如下：

var bb = new Ext.PagingToolbar({pageSize: 10, store: ds, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2}条',emptyMsg: "没有记录"});

然而此时并不具备分页功能。需要给服务器提交几个参数，然后服务器根据这几个参数取出相应值，返回给客户端。与传统分页不同的是，服务器端不需要记录当前是第几页，分页参数在ds.load()中传递给服务器，如下。

ds.load({params:{start:0,limit:10}}); 

此时服务器传回来的数据格式如下

{'countrow':'17','table':[{'id':'1','name':'张一','sex':'男'},
{'id':'2','name':'李二','sex':'女'},
{'id':'3','name':'张三','sex':'男'},
{'id':'4','name':'赵八','sex':'女'},
{'id':'5','name':'黄武','sex':'男'},
{'id':'6','name':'赵千里','sex':'男'},
{'id':'7','name':'杨总一','sex':'男'},
{'id':'8','name':'刘月','sex':'女'},
{'id':'9','name':'姚远','sex':'男'},
{'id':'10','name':'黄大于','sex':'女'}
]}

而json的解析格式改为如下

({totalProperty: 'countrow',root:'table'},[{name:'id'},
  {name:'name'},{name:'sex'}])

totalProperty就是获得的记录总数

全部代码如下

Ext.onReady(function(){
 var jsonhttp=new Ext.data.HttpProxy({url:'griddemo.do?method=extgrid'});
 var ds = new Ext.data.Store({ proxy: jsonhttp,
  reader:new Ext.data.JsonReader({totalProperty: 'countrow',root:'table'},[{name:'id'},{name:'name'},{name:'sex'}])});
 ds.load({params:{start:0,limit:10}});
 var sm = new Ext.grid.CheckboxSelectionModel();
 var bb = new Ext.PagingToolbar({
   pageSize: 10, store: ds, displayInfo: true,displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
   emptyMsg: "没有记录"});
 var cm = new Ext.grid.ColumnModel([sm,
  {id:'0',header:'编号',dataIndex:'id',sortable:true}, 
  {id:'1',header:'姓名',dataIndex:'name'},
  {id:'2',header:'性别',dataIndex:'sex'}]);
  var grid = new Ext.grid.GridPanel({
  renderTo:"tablediv",
  height:260,
  width:450, 
  cm:cm,
  sm:sm,
  title:'我的表格',
  collapsible:true,
  store:ds,
  bbar:bb,
  });
 grid.render();
});

每次分页的时候服务器端接收两个参数，几start和limit，只需要处理这两个参数就可以了，不必理会当前是第几页，ext会自动处理。

start：从第几条记录开始

limit：每页显示几条记录

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师
• 第二届网络工程师侠客行大会5月24日杭州举行

• 搜狐网站诚聘Java、PHP和C++工程师
• 第二届网络工程师侠客行大会5月24日杭州举行
• 北京: 千橡集团暨校内网诚聘软件研发工程师

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 第二届网络工程师侠客行大会5月24日杭州举行

• 搜狐网站诚聘Java、PHP和C++工程师
• 第二届网络工程师侠客行大会5月24日杭州举行
• 北京: 千橡集团暨校内网诚聘软件研发工程师

1） 表格数据选择

行选择模式：

var rowcount = grid.getSelectionNode().getSelections();

 
可以获取全部选中的记录，得到的rowcount将是一个Array，比如想获取sex列的数据，语句如下

var strsex = rowcount[i].get(‘sex’);

 
单元格选择模式

如果在GridPanel的配置属性增加sm属性如下

sm:new Ext.grid.CellSelectionModel();

 则表格的选择模式为单元格选择模式。当单击时将选中对应的某一个单元格，而不是默认的选择某一行。选择方式如下

var cell = grid.getSelectionNode().getSelectedCell();

 
得到的cell记录了当前选择的行(cell[0])以及列(cell[1]).可以通过一下语句得到该单元格数据

var colname = grid.getColumnModel().getDataIndex(cell[1]);  //获取列名
var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据

 
getStore():获取表格的数据集
getAt():获取该数据集cell[0]行
get():获取该行colname的数据

2） 为表格增加链接

有时我们需要为表格中的某一列添加一个链接。可以利用renderer配置属性为该列添加html
如下：{id:'3',header:'名称',dataIndex:'name',renderer:DomUrl},
定义DomUrl方法

function DomUrl(value){
return "<a href=>"+value+"</a>";
}

 
如果表格内的数据是一个链接如：www.sina.com这样写法自然没有问题，但是大多数时候我们在表格中不会直接写一个链接，如果又需要根据单元格内容动态为链接添加几个参数。那这种写法就几乎没有什么用了。因为这个属性是在表格初始化的时候定义好的，而且表格初始化之后这个属性无法改变，也就是只读属性。

处理方法如下：
定义一个全局变量，初始值为0；DomUrl函数如下

function DomUrl(value){
var row = grid.getSelectionModel().selectRow(startrow);//选中当前行
var rownum = grid.getSelectionModel().getSelected();//获取当前行
startrow ++;
var strurl = "abc.jsp?id=" + rownum.get('id');//获取当前选中行的值，并组织链接字符串
return "<a href='"+strurl+"'>"+value+"</a>";
}

 
不过不要忘记在下次提交的时候将startrow赋值为0。

3） 表格的属性

        表格的属性分为配置属性（在操作表格时无法修改），以及其他可读写属性，方法，以及事件。如下：

 配置属性

a) activeItem：渲染布局时激活的子元素。
b) applyTo：指定渲染对象。
c) autoDestroy：当容器的子元素从容器中移除时是否自动销毁。
d) autoExpandColumn：指定自动填充表格剩余区域的列id
e) autoExpandMax：可自动扩张的最大宽度。
f) autoExpandMin：可自动扩张的最小宽度
g) autoHeight:自动扩充高度
h) autoShow：是否自动显示
i) autoWidth：自动扩充宽度
j) bbar/tbar：底部/顶部状态栏
k) bufferResize：容器再布局的缓冲频率
l) colModel/cm:列模式
m) cls：组件的额外css格式。
n) collapsible:是否显示快捷隐藏按钮
o) defaults：指定默认配置。
p) disableSelection：是否禁止选择表格行或列
q) enableDragDrop：是否允许表格列的拖放操作。
r) enableHdMenu：是否显示表格列的菜单。
s) frame：边框是否显示
t) loadMask: 是否显示加载动画
u) selModel/sm：表格选择模式
v) store:表格数据集
w) stripeRows：是否显示分隔线。
x) title：表格标题

方法

a) getColumnModel()：得到表格列模型
b) getGridEl():得到表格下的元素
c) getPosition():得到组件的当前位置，返回一个数组
d) getSelectionModel():得到选中模型
e) getSize():得到组件大小
f) getStore():得到组件的数据集
g) getView():得到表格的GridView对象。
h) hide():隐藏当前组件
i) isVisible():判断当前组件是否显示
j) setDisabled( Boolean):设置组件的可用性
k) un():解除组件的监听
l) on()：为组件添加监听
on ( String eventName, Function handler, [Object scope] )
eventName:添加监听的名称
handler:事件处理函数
scope:事件响应的作用域,包括scope,delay,single,buffer。
  


  

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师
• 第二届网络工程师侠客行大会5月24日杭州举行

$('myButton').onmousedown = function () {
  var input = document.createElement('input');
  input.type = 'text';
  $('myDiv').appendChild(input);
  input.focus();
}

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 第二届网络工程师侠客行大会5月24日杭州举行
• 搜狐网站诚聘Java、PHP和C++工程师

function mouseCoords(ev){
    if (ev.pageX || ev.pageY) {
        return {
            x: ev.pageX,
            y: ev.pageY
        };
    }
    return {
        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y: ev.clientY + document.body.scrollTop - document.body.clientTop
    };
}

document.onmousemove = mouseMove;
function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
} // mousePos.x就是横坐标，mousePos.y就是纵坐标

//定义监听函数
document.onmousemove = mouseMove;
document.onmouseup   = mouseUp;
//存放我们想要拖动的DOM对象
var dragObject  = null;
var mouseOffset = null;
function mouseMove(ev){
	ev           = ev || window.event;
	//这里用到了上面第一点写的函数（mouseCoords）
	var mousePos = mouseCoords(ev);

	if(dragObject){
		dragObject.style.position = 'absolute';
		dragObject.style.top      = mousePos.y;
		dragObject.style.left     = mousePos.x;

		return false;
	}
}
function mouseUp(){
	dragObject = null;
}

function makeDraggable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		dragObject  = this;
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}

var dropTargets = [];

function addDropTarget(dropTarget){
	dropTargets.push(dropTarget);
}

function mouseUp(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);

	for(var i=0; i<dropTargets.length; i++){
		var curTarget  = dropTargets[i];
		var targPos    = getPosition(curTarget);
		var targWidth  = parseInt(curTarget.offsetWidth);
		var targHeight = parseInt(curTarget.offsetHeight);
		
		if(
			(mousePos.x > targPos.x)                &&
			(mousePos.x < (targPos.x + targWidth))  &&
			(mousePos.y > targPos.y)                &&
			(mousePos.y < (targPos.y + targHeight))){
				// dragObject was dropped onto curTarget!
		}
	}
	dragObject   = null;
}

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 第二届网络工程师侠客行大会5月24日杭州举行
• 搜狐网站诚聘Java、PHP和C++工程师

function copy_onclick(){
	$("#list1 option:selected").each(function () {
                $(document.createElement("option"))
		.attr("value",$(this).val())
		.text($(this).val())
		.appendTo('#list2:not(:has(option[value=\''+$(this).val()+'\']))');
		});
	}

• 第二届网络工程师侠客行大会5月24日杭州举行
• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

Gwt-Ext学习笔记之进级篇

一、 定义服务

GWT过程调用大部分在两个类进行。在服务器端，定义一个 RemoteServiceServlet子类 RegisterActionImpl.java（远程服务实现类）。在这个类中，将操作数据库并将值返回给客户机。在客户端，定义一个实现 AsyncCallback接口的类 Register.java（客户端实现类），在这个类中，定义服务器操作完成时客户机页面如何处理数据（或异常）。除了这两个类之外，必须编写一些绑定代码使 GWT-Ext 可以将客户端类和服务器端类绑定在一起 , 绑定代码包含 RegisterAction.java（远程接口）和 RegisterActionAsync.java（远程异步接口）两个不同的接口外加一些客户端代码以及一两个设置。

a.       在 gwtext项目上点击右键，选择 New—Other—Remote Service,创建名为 RegisterAction的远程服务接口。

b.      把 PostgreSQL数据库的 JDBC包 postgresql-8.2-505.jdbc3.jar加入到项目中（其他数据库，加入相应的 JDBC包）。

c.       远程服务的实现类，在 RegisterActionImpl.java中加入如下代码：

/**
 * @author 七月天
 *
 */
public class RegisterActionImpl extends RemoteServiceServlet implements RegisterAction {

	private static final long serialVersionUID = 1L;

	public void saveData(Map formData) {
		Connection conn=null;
		try {
			Class.forName("org.postgresql.Driver");
			String connString="jdbc:postgresql://127.0.0.1:5432/gwtext";
			conn=DriverManager.getConnection(connString,"julycn","julycn");
			StringBuffer sqlQuery=new StringBuffer("insert into person (username,password,email,phone) ");
			sqlQuery.append("values(?,?,?,?)");
			PreparedStatement stmt=conn.prepareStatement(sqlQuery.toString());
			stmt.setString(1, URLDecoder.decode(formData.get("username").toString(),"UTF-8"));
			stmt.setString(2, URLDecoder.decode(formData.get("password").toString(),"UTF-8"));
			stmt.setString(3, URLDecoder.decode(formData.get("email").toString(),"UTF-8"));
			stmt.setString(4, URLDecoder.decode(formData.get("phone").toString(),"UTF-8"));
			stmt.execute();
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			if(conn!=null){
				try {
					conn.close();
				} catch (SQLException e) {
					e.printStackTrace();
				}
			}
		}
		
	}
}

d.      GWT-Ext远程服务的要求很简单，它必须扩展 RemoteServiceServlet并实现一个接口。

二、 绑定代码

a.       要使新程序可用于客户端应用程序，必须定义两个接口。

b.      定义一个远程接口类 RegisterAction.java，代码如下

/**
 * @author 七月天
 *
 */
public interface RegisterAction extends RemoteService {

	public static final String SERVICE_URI = "/RegisterAction";

	public static class Util {

		public static RegisterActionAsync getInstance() {

			RegisterActionAsync instance = (RegisterActionAsync) GWT
					.create(RegisterAction.class);
			ServiceDefTarget target = (ServiceDefTarget) instance;
			target.setServiceEntryPoint(GWT.getModuleBaseURL() + SERVICE_URI);
			return instance;
		}
	}

	public void saveData(Map formData);
}

c.       在这里完成的所有操作是获得用于实际的具体类中方法的同一个签名。这里的主要限制是接口必须扩展 com.google.gwt.user.client.rpc.RemoteService;。此外，参数和返回值必须属于 GWT 可以序列化的类型 (见备注 )。

d.      定义远程异步接口 RegisterActionAsync.java ，代码如下：

/**
 * @author 七月天
 *
 */
public interface RegisterActionAsync {

	public void saveData(Map formData, AsyncCallback callback);
}

e.      远程异步类的服务接口是从上面描述的远程服务类中派生出来的。两个类必须位于同一个包中，并且该包必须对 GWT-EXT 客户机代码可见。远程异步类中的类名必须是远程服务接口的名称且末尾附加字符串 Async。对于远程服务接口中的每个方法，远程异步类必须有一个返回类型更改为 void 的匹配方法和一个 AsyncCallback 类型的附加参数。客户端代码将使用 AsyncCallback 作用于服务器响应上。

f.        注册服务器代码，将下面的一行加入到 Register.gwt.xml中

<servlet class="com.gwtext.julycn.server.RegisterActionImpl" path="/RegisterAction" />

三、 执行客户端调用

a.       完成服务器端操作以后，现在应该让客户机执行过程调用了。在这里基本的想法是慎重地告诉 GWT 系统正在调用的是哪个远程服务。然后将 AsyncCallback 对象发送出去；最后， GWT 将其送回，您可对结果进行操作。修改模型文件 Register.java，代码如下：

/**
 * @author 七月天
 *
 */
public class Register implements EntryPoint,AsyncCallback {
	public void onModuleLoad() {
		createComponents();
	}

	private void createComponents() {
		final FormPanel frm = new FormPanel();
		frm.setDraggable(true);
		frm.setWidth(300);
		frm.setTitle("用户注册");
		frm.setPaddings(25);

		TextField txtUsername = new TextField("用户名", "username");
		TextField txtPassword = new TextField("密码", "password");
		TextField txtEmail = new TextField("邮箱", "email");
		TextField txtPhone = new TextField("电话", "phone");

		txtUsername.setRegex("^[a-zA-Z]*$");
		txtUsername.setRegexText("用户名必须为字母！");
		txtUsername.setAllowBlank(false);

		txtPassword.setPassword(true);
		txtPassword.setRegex("^[a-zA-Z]*$");
		txtPassword.setRegexText("密码必须为字母！");
		txtPassword.setAllowBlank(false);

		txtEmail.setVtype(VType.EMAIL);
		txtEmail.setVtypeText("请输入合法的邮箱地址！");
		txtEmail.setAllowBlank(false);

		txtPhone.setRegex("^\\d*$");
		txtPhone.setRegexText("电话必须为数字！");
		txtPhone.setAllowBlank(false);