Ext 的代码演示

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




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:[]}); //用于分页的信息以及其他信息都可以在这儿设置参数。