[ 置顶] [加锁] [修改] [删除] [精华] [转移] [锁定用户] [修改]　 [关闭问题]　 收藏   [引用回复]

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

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

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

实例的源代码中没有包括jar包，如果需要运行，请根据jar.jpg所显示的jar包添加。
数据库部分请根据create.sql来生成。
转载自:http://www.javaeye.com/topic/154369
相关附件:
ExtTest.rar

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

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

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:
            *  

   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);
   }


            * @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"              // 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:
            *
   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);
   }
            * @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"
然后是我们怎么样来设置这些事件。
Java代码
[url=http://www.javaeye.com/topic/154369#]

[/url]
/*  设置ｇｒｉｄ的双击事件  */  
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:[]});  //用于分页的信息以及其他信息都可以在这儿设置参数。

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

谢谢共享，能否多给一些ext与dwr交互的实例。如果可以请发到我的邮箱zsls27@126.com