Ext 的实例演示。

做了一个基于ext的ajax小例子，包括从前台到后台的完整调用。

前台是jsp加上ext的框架。
后台是hibernate-annotations和spring以及dwr的组合。
顺便演示了一下用servlet来返回json数据给ext框架的方式。

在grid的演示部分，包括了分页的数据调用和如何处理来自于dwr的数据(dwr的部分和官方网站公布的方法一样)
以及grid的事件处理。

实例的源代码中没有包括jar包，如果需要运行，请根据jar.jpg所显示的jar包添加。
数据库部分请根据create.sql来生成。

讲一下演示的代码的一些实现方式。

1 ， 在ext 框架中，可以利用Ext.Panel 的autoLoad 属性来加载你需要的公共画面。比如你的logo，还有你的版权声明等等。
     具体的使用方式是：
首先，在jsp或者html页面上给出一个位置来放置你准备放置的冬冬。
然后在js中间声明：

	    var Footer = new Ext.Panel({
        border:false,
        autoLoad: {url: 'template/Footer.html', callback: function(){}, scope: this}
    });
    Footer.render('Footer');

autoLoad的三个参数的意思很明显，url表示需要装载的路径，callback表示在装载完毕之后干些什么，scope表示有效范围。
２， 在表单的提交过程当中，我们可以设置的地方。如下面的代码：

/*  创建登录是需要使用的表单  */
    var form = new Ext.form.FormPanel({
        defaultType: 'textfield',
        labelAlign: 'right',
        title: '用户登陆',
        labelWidth: 120,
        frame: true,
        width: 500,
        autoHeight: true,
        waitMsgTarget: true, /*  true的意思是说表单提交时的等待信息在这个表单之内显示，而不是弹出框 */
        items: [{
            fieldLabel: '用户名',
            name:"userAccount",
            id:"userAccount",
            allowBlank:false
        },{
            fieldLabel: '密码',
            inputType :'password',
            id:"passwd",
            name:"passwd"
        }],
        buttons: [{
            text: '登陆',
            handler: function(){
                form.getForm().submit({
                    url:'../servlet/login', /* 表示表单提交的时候的路径。 */
                    waitMsg:'正在验证用户...', /* 表示提交过程中间的等待信息。 */
                    success: onLoginSuccess, /* 服务器返回正确的信息之后我们调用的方法。 */
                    failure: onFailure /* 服务器返回错误的信息之后我们调用的方法。 */
                });
            }
        },{
            text: '取消',
            handler: function(){
                win.hide();
            }
        }]
    });
/*  在用户校验失败的时候判断是否是服务器连接失败  */
    var onFailure = function(form,action){
	    if(action.failureType=="connect"){ 
/*  在服务器返回了错误的信息或者是没有返回的时候，我们可以根据action.failureType来判断发生错误的大概原因，
如果值为•connect•，那么表示是连接请求失败，•server•表示服务器端检查出了提交数据的错误，•client•表示客户端的数据异常 */
	       Ext.Msg.alert('服务器异常', '服务器异常，请与管理员联系！');
	    }
    }
/*  用户校验成功之后的动作  */
    var gotoUrl = function(){
        window.location.href="ProjectManage.jsp";
    }
	var onLoginSuccess = function(form,action){
	    win.hide();
	}.createSequence(gotoUrl,this)
/*  createSequence这个方法还有一个姊妹方法，createInterceptor。
她们分别表示在某某方法之后和某某方法之前执行某一个方法。其实就是js里面的aop。保证一个函数的调用顺序 */

３， 有了下面的设定，上面讲的表单的提交之后，如果有数据校验失败的信息，在页面上将表现出更好的错误提示信息。

/*  设置提示消息的显示方式  */
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';

４、讲一下gridPanel这个控件在创建之后都有哪些事件可以触发，以及我们如何来设置这样的触发事件。
察看以下gridPanel的源码，我们发现有如下的这么多的事件可以触发。

            // raw events
            /**
             * @event click
             * The raw click event for the entire grid.  ------简单的事件描述，相信大家都看得懂，就不解释了。
             * @param {Ext.EventObject} e       ---------------这个是框架会自动传入的参数，下面的一样。
             */
            "click",                               //------------- 这个是事件名称，下面的一样
            /**
             * @event dblclick
             * The raw dblclick event for the entire grid.
             * @param {Ext.EventObject} e
             */
            "dblclick",
            /**
             * @event contextmenu
             * The raw contextmenu event for the entire grid.
             * @param {Ext.EventObject} e
             */
            "contextmenu",
            /**
             * @event mousedown
             * The raw mousedown event for the entire grid.
             * @param {Ext.EventObject} e
             */
            "mousedown",
            /**
             * @event mouseup
             * The raw mouseup event for the entire grid.
             * @param {Ext.EventObject} e
             */
            "mouseup",
            /**
             * @event mouseover
             * The raw mouseover event for the entire grid.
             * @param {Ext.EventObject} e
             */
            "mouseover",
            /**
             * @event mouseout
             * The raw mouseout event for the entire grid.
             * @param {Ext.EventObject} e
             */
            "mouseout",
            /**
             * @event keypress
             * The raw keypress event for the entire grid.
             * @param {Ext.EventObject} e
             */
            "keypress",
            /**
             * @event keydown
             * The raw keydown event for the entire grid.
             * @param {Ext.EventObject} e
             */
            "keydown",

            // custom events
            /**
             * @event cellmousedown
             * Fires before a cell is clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            "cellmousedown",
            /**
             * @event rowmousedown
             * Fires before a row is clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Ext.EventObject} e
             */
            "rowmousedown",
            /**
             * @event headermousedown
             * Fires before a header is clicked
             * @param {Grid} this
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            "headermousedown",

            /**
             * @event cellclick
             * Fires when a cell is clicked.
             * The data for the cell is drawn from the {@link Ext.data.Record Record}
             * for this row. To access the data in the listener function use the
             * following technique:
             * <pre>
<code>
    function(grid, rowIndex, columnIndex, e) {
        var record = grid.getStore().getAt(rowIndex);  // Get the Record
        var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
        var data = record.get(fieldName);
    }
</code>
</pre>
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            "cellclick",
            /**
             * @event celldblclick
             * Fires when a cell is double clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            "celldblclick",
            /**
             * @event rowclick
             * Fires when a row is clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Ext.EventObject} e
             */
            "rowclick",
            /**
             * @event rowdblclick
             * Fires when a row is double clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Ext.EventObject} e
             */
            "rowdblclick",
            /**
             * @event headerclick
             * Fires when a header is clicked
             * @param {Grid} this
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            "headerclick",
            /**
             * @event headerdblclick
             * Fires when a header cell is double clicked
             * @param {Grid} this
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            "headerdblclick",
            /**
             * @event rowcontextmenu
             * Fires when a row is right clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Ext.EventObject} e
             */
            "rowcontextmenu",
            /**
             * @event cellcontextmenu
             * Fires when a cell is right clicked
             * @param {Grid} this
             * @param {Number} rowIndex
             * @param {Number} cellIndex
             * @param {Ext.EventObject} e
             */
            "cellcontextmenu",
            /**
             * @event headercontextmenu
             * Fires when a header is right clicked
             * @param {Grid} this
             * @param {Number} columnIndex
             * @param {Ext.EventObject} e
             */
            "headercontextmenu",
            /**
             * @event bodyscroll
             * Fires when the body element is scrolled
             * @param {Number} scrollLeft
             * @param {Number} scrollTop
             */
            "bodyscroll",
            /**
             * @event columnresize
             * Fires when the user resizes a column
             * @param {Number} columnIndex
             * @param {Number} newSize
             */
            "columnresize",
            /**
             * @event columnmove
             * Fires when the user moves a column
             * @param {Number} oldIndex
             * @param {Number} newIndex
             */
            "columnmove",
            /**
             * @event sortchange
             * Fires when the grid's store sort changes
             * @param {Grid} this
             * @param {Object} sortInfo An object with the keys field and direction
             */
            "sortchange"

然后是我们怎么样来设置这些事件。

    /*  设置ｇｒｉｄ的双击事件  */
    grid.on("rowdblclick" , function(grid){
       var row = grid.getSelectionModel().getSelected();
       alert(row.get("title"))
    });

5，由DWRProxy来使用dwr的数据

/*  由ｄｗｒ提供的数据创建适合ｇｒｉｄ使用的数据  */
    var recordType = Ext.data.Record.create([ //给出一个后台数据的结构
        {name: "id", type: "int"},
        {name: "title", type: "string"},
        {name: "content", type: "string"},
        {name: "name", mapping:"author.name", type: "string"},
        {name: "email", mapping:"author.email", type: "string"}
      ]);
    var ds = new Ext.data.Store({
        proxy: new Ext.data.DWRProxy(testdwr.getItems, true),
        reader: new Ext.data.ListRangeReader({id:"id",totalProperty:'totalSize'},recordType),
        remoteSort: true
      });
    ds.load({params:{start:0, limit:10}, arg:[]});  //用于分页的信息以及其他信息都可以在这儿设置参数。

很不错！！！
谢谢您的实例！
期待你的更多演示~

配置运行了楼主的程序，为什么在ProjectManage.jsp页面的那些panel上总有乱码，并且浏览器的编码总是指向西欧的ISO编码，请问这个问题怎么解决？

你的系统的默认字符编码设置的问题吧？
估计你的系统是英文系统。

然后『浏览器的编码总是指向西欧的ISO编码』是说不能选择到UTF-8去吗？
我在中文系统下面没有什么问题。

顺便提一下，我上传的文件的源码都是UTF-8编码的，如果改成了其他的编码或者用其他的编码格式保存了之后可能会有问题。

不知道这样的问题是不是很多人都遇到了，我对这个字符编码方面没有什么经验，一时半会儿也想不出什么解决办法。
不过如果你能给出一个你的环境的话，我可以试着看看是什么问题。还有就是我看见ext自带的文字也乱码了，可能和你的运行环境的关系比较大。

EXt确实功能很强大.
我也看了它自带的例子.
可惜公司后来不能上网了,我的计划夭折了.:(
到用它的时候在拾起来.:)

楼主说的是，我的OS确实是英文版的。但是我发现index.jsp没有乱码的问题，所以比较了一下，发现ProjectManage.jsp中没有加上<%@page pageEncoding="UTF-8"%>，所以试着添加了一下，问题就轻松解决了，呵呵。

这个是我的页面检查得不仔细了，检讨一下。