from : http://www.javaeye.com/topic/154369
前台是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中间声明：
Java代码

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

       var Footer = new Ext.Panel({        border:false,        autoLoad: {url: 'template/Footer.html', callback: function(){}, scope: this}    });    Footer.render('Footer');[/pre]
autoLoad的三个参数的意思很明显，url表示需要装载的路径，callback表示在装载完毕之后干些什么，scope表示有效范围。
２， 在表单的提交过程当中，我们可以设置的地方。如下面的代码：
Java代码

1. /*  创建登录是需要使用的表单  */ 
2.     var form = new Ext.form.FormPanel({ 
3.         defaultType: 'textfield', 
4.         labelAlign: 'right', 
5.         title: '用户登陆', 
6.         labelWidth: 120, 
7.         frame: true, 
8.         width: 500, 
9.         autoHeight: true, 
10.         waitMsgTarget: true, /*  true的意思是说表单提交时的等待信息在这个表单之内显示，而不是弹出框 */ 
11.         items: [{ 
12.             fieldLabel: '用户名', 
13.             name:"userAccount", 
14.             id:"userAccount", 
15.             allowBlank:false 
16.         },{ 
17.             fieldLabel: '密码', 
18.             inputType :'password', 
19.             id:"passwd", 
20.             name:"passwd" 
21.         }], 
22.         buttons: [{ 
23.             text: '登陆', 
24.             handler: function(){ 
25.                 form.getForm().submit({ 
26.                     url:'../servlet/login', /* 表示表单提交的时候的路径。 */ 
27.                     waitMsg:'正在验证用户...', /* 表示提交过程中间的等待信息。 */ 
28.                     success: onLoginSuccess, /* 服务器返回正确的信息之后我们调用的方法。 */ 
29.                     failure: onFailure /* 服务器返回错误的信息之后我们调用的方法。 */ 
30.                 }); 
31.             } 
32.         },{ 
33.             text: '取消', 
34.             handler: function(){ 
35.                 win.hide(); 
36.             } 
37.         }] 
38.     }); 
39. /*  在用户校验失败的时候判断是否是服务器连接失败  */ 
40.     var onFailure = function(form,action){ 
41.         if(action.failureType=="connect"){   
42. /*  在服务器返回了错误的信息或者是没有返回的时候，我们可以根据action.failureType来判断发生错误的大概原因， 
43. 如果值为•connect•，那么表示是连接请求失败，•server•表示服务器端检查出了提交数据的错误，•client•表示客户端的数据异常 */ 
44.           Ext.Msg.alert('服务器异常', '服务器异常，请与管理员联系！'); 
45.         } 
46.     } 
47. /*  用户校验成功之后的动作  */ 
48.     var gotoUrl = function(){ 
49.         window.location.href="ProjectManage.jsp"; 
50.     } 
51.     var onLoginSuccess = function(form,action){ 
52.         win.hide(); 
53.     }.createSequence(gotoUrl,this) 
54. /*  createSequence这个方法还有一个姊妹方法，createInterceptor。 
55. 她们分别表示在某某方法之后和某某方法之前执行某一个方法。其实就是js里面的aop。保证一个函数的调用顺序 */ 

/*  创建登录是需要使用的表单  */    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。保证一个函数的调用顺序 */[/pre]

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

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

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


Java代码

1.             // raw events 
2.             /** 
3.             * @event click 
4.             * The raw click event for the entire grid.  ------简单的事件描述，相信大家都看得懂，就不解释了。 
5.             * @param {Ext.EventObject} e      ---------------这个是框架会自动传入的参数，下面的一样。 
6.             */ 
7.             "click",                              //------------- 这个是事件名称，下面的一样 
8.             /** 
9.             * @event dblclick 
10.             * The raw dblclick event for the entire grid. 
11.             * @param {Ext.EventObject} e 
12.             */ 
13.             "dblclick", 
14.             /** 
15.             * @event contextmenu 
16.             * The raw contextmenu event for the entire grid. 
17.             * @param {Ext.EventObject} e 
18.             */ 
19.             "contextmenu", 
20.             /** 
21.             * @event mousedown 
22.             * The raw mousedown event for the entire grid. 
23.             * @param {Ext.EventObject} e 
24.             */ 
25.             "mousedown", 
26.             /** 
27.             * @event mouseup 
28.             * The raw mouseup event for the entire grid. 
29.             * @param {Ext.EventObject} e 
30.             */ 
31.             "mouseup", 
32.             /** 
33.             * @event mouseover 
34.             * The raw mouseover event for the entire grid. 
35.             * @param {Ext.EventObject} e 
36.             */ 
37.             "mouseover", 
38.             /** 
39.             * @event mouseout 
40.             * The raw mouseout event for the entire grid. 
41.             * @param {Ext.EventObject} e 
42.             */ 
43.             "mouseout", 
44.             /** 
45.             * @event keypress 
46.             * The raw keypress event for the entire grid. 
47.             * @param {Ext.EventObject} e 
48.             */ 
49.             "keypress", 
50.             /** 
51.             * @event keydown 
52.             * The raw keydown event for the entire grid. 
53.             * @param {Ext.EventObject} e 
54.             */ 
55.             "keydown", 
56.  
57.             // custom events 
58.             /** 
59.             * @event cellmousedown 
60.             * Fires before a cell is clicked 
61.             * @param {Grid} this 
62.             * @param {Number} rowIndex 
63.             * @param {Number} columnIndex 
64.             * @param {Ext.EventObject} e 
65.             */ 
66.             "cellmousedown", 
67.             /** 
68.             * @event rowmousedown 
69.             * Fires before a row is clicked 
70.             * @param {Grid} this 
71.             * @param {Number} rowIndex 
72.             * @param {Ext.EventObject} e 
73.             */ 
74.             "rowmousedown", 
75.             /** 
76.             * @event headermousedown 
77.             * Fires before a header is clicked 
78.             * @param {Grid} this 
79.             * @param {Number} columnIndex 
80.             * @param {Ext.EventObject} e 
81.             */ 
82.             "headermousedown", 
83.  
84.             /** 
85.             * @event cellclick 
86.             * Fires when a cell is clicked. 
87.             * The data for the cell is drawn from the {@link Ext.data.Record Record} 
88.             * for this row. To access the data in the listener function use the 
89.             * following technique: 
90.             * <pre> 
91. <code> 
92.     function(grid, rowIndex, columnIndex, e) { 
93.         var record = grid.getStore().getAt(rowIndex);  // Get the Record 
94.         var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name 
95.         var data = record.get(fieldName); 
96.     } 
97. </code> 
98. </pre> 
99.             * @param {Grid} this 
100.             * @param {Number} rowIndex 
101.             * @param {Number} columnIndex 
102.             * @param {Ext.EventObject} e 
103.             */ 
104.             "cellclick", 
105.             /** 
106.             * @event celldblclick 
107.             * Fires when a cell is double clicked 
108.             * @param {Grid} this 
109.             * @param {Number} rowIndex 
110.             * @param {Number} columnIndex 
111.             * @param {Ext.EventObject} e 
112.             */ 
113.             "celldblclick", 
114.             /** 
115.             * @event rowclick 
116.             * Fires when a row is clicked 
117.             * @param {Grid} this 
118.             * @param {Number} rowIndex 
119.             * @param {Ext.EventObject} e 
120.             */ 
121.             "rowclick", 
122.             /** 
123.             * @event rowdblclick 
124.             * Fires when a row is double clicked 
125.             * @param {Grid} this 
126.             * @param {Number} rowIndex 
127.             * @param {Ext.EventObject} e 
128.             */ 
129.             "rowdblclick", 
130.             /** 
131.             * @event headerclick 
132.             * Fires when a header is clicked 
133.             * @param {Grid} this 
134.             * @param {Number} columnIndex 
135.             * @param {Ext.EventObject} e 
136.             */ 
137.             "headerclick", 
138.             /** 
139.             * @event headerdblclick 
140.             * Fires when a header cell is double clicked 
141.             * @param {Grid} this 
142.             * @param {Number} columnIndex 
143.             * @param {Ext.EventObject} e 
144.             */ 
145.             "headerdblclick", 
146.             /** 
147.             * @event rowcontextmenu 
148.             * Fires when a row is right clicked 
149.             * @param {Grid} this 
150.             * @param {Number} rowIndex 
151.             * @param {Ext.EventObject} e 
152.             */ 
153.             "rowcontextmenu", 
154.             /** 
155.             * @event cellcontextmenu 
156.             * Fires when a cell is right clicked 
157.             * @param {Grid} this 
158.             * @param {Number} rowIndex 
159.             * @param {Number} cellIndex 
160.             * @param {Ext.EventObject} e 
161.             */ 
162.             "cellcontextmenu", 
163.             /** 
164.             * @event headercontextmenu 
165.             * Fires when a header is right clicked 
166.             * @param {Grid} this 
167.             * @param {Number} columnIndex 
168.             * @param {Ext.EventObject} e 
169.             */ 
170.             "headercontextmenu", 
171.             /** 
172.             * @event bodyscroll 
173.             * Fires when the body element is scrolled 
174.             * @param {Number} scrollLeft 
175.             * @param {Number} scrollTop 
176.             */ 
177.             "bodyscroll", 
178.             /** 
179.             * @event columnresize 
180.             * Fires when the user resizes a column 
181.             * @param {Number} columnIndex 
182.             * @param {Number} newSize 
183.             */ 
184.             "columnresize", 
185.             /** 
186.             * @event columnmove 
187.             * Fires when the user moves a column 
188.             * @param {Number} oldIndex 
189.             * @param {Number} newIndex 
190.             */ 
191.             "columnmove", 
192.             /** 
193.             * @event sortchange 
194.             * Fires when the grid's store sort changes 
195.             * @param {Grid} this 
196.             * @param {Object} sortInfo An object with the keys field and direction 
197.             */ 
198.             "sortchange" 

            // 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"[/pre]
然后是我们怎么样来设置这些事件。


Java代码

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

5，由DWRProxy来使用dwr的数据

Java代码

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

/*  由ｄｗｒ提供的数据创建适合ｇｒｉｄ使用的数据  */    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:[]});  //用于分页的信息以及其他信息都可以在这儿设置参数。[/pre]