ExtJs实现EditGrid中的增删改查操作（2）
2.本例是在ExtJs官方提供的examples里面的基础上改进的，使用的是SSH框架的方式，当窗口启动时发送查询请求并返回json格式的数据，然后更新到窗口中区。当对其进行操作时，也是利用异步请求的方式发送数据，并在操作成功后更新窗口数据。

3。首先，要导入ExtJs官方例子中的js文件。 。

4.在jsp页面上新建一个快捷方式的dt,如下

<dt id="tool-memo-shortcut">
<a href="#">
<img src="<%=path%>/image/desktop/s.gif"/>
<div>便利贴</div>
</a>
</dt>

5.然后在css文件中做如下配置，使其显示一个图标。

/*桌面天气预报的快捷方式*/
#tool-clock-shortcut img{
width : 48px;
height : 48px;
background-image: url(/ipurse/image/desktop/add/weather48x48.png);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/ipurse/image/desktop/add/weather48x48.png', sizingMethod='scale');
}

6.此时，部署网站后就可以在桌面上看到我们的图标了。

 

7.下面写窗口的点击初始化函数。首先声明一个窗口函数，如下



8.下面具体实现其功能

 

/*
* by:rush date:2011年3月28日 22:28:40
* 功能：用于显示便签的窗口
* */
var memoEditor = null;//声明一个行编辑控件的实例

var memoGrid = null;
var memoStore = null;
MyDesktop.MemoWindow = Ext.extend(Ext.app.Module,{
id : 'tool-memo',
init : function(){
this.launcher = {
text: '便签',
iconCls:'icon-grid',
handler : this.createWindow,//这句表明其创建窗口的句柄
scope: this,
windowId:'tool-memo' //窗口的id
}
},
createWindow : function(src){
var desktop = this.app.getDesktop();//取得桌面句柄
var win = desktop.getWindow('tool-memo');//取得桌面快捷方式对应的窗口句柄
////////////////
//////////////////////////////////////////
Ext.QuickTips.init(); //初始化快速提示功能
//建立一个数据记录的对象
var Memo = new Ext.data.Record.create([
       { name : 'title' , type : 'string'},
      {name : 'saveDate', type : 'date',dateFormat:'Y-m-d'},
      {name : 'lateDate' , type : 'date',dateFormat:'Y-m-d'},
     {name : 'detail', type : 'string'}
]);
//声明一个行编辑控件的实例
memoEditor = new Ext.ux.grid.RowEditor({
saveText: '更新',
cancelText : '取消',
deleteText : '删除'
});
////声明一个writer,来将信息写入到后台
var memoWriter = new Ext.data.JsonWriter({
encode: true,
writeAllFields: false // 写入所有字段，而不仅仅是那些发生变化的字段
});
//声明一个数据存储仓库,使用json的方式获取远程数据
memoStore = new Ext.data.GroupingStore({
autoSave : false,//设置不自动保存
writer : memoWriter,
reader: new Ext.data.JsonReader({
id : 'id',
totalProperty : 'totalProperty',
root : 'memoList'},
[
{name : 'id' , type: 'int'},
{name: 'title', type:'string'},
{name: 'saveDate', type: 'date',dateFormat:'Y-m-d'},
{name: 'lateDate', type: 'date',dateFormat:'Y-m-d'},
{name: 'detail', type: 'string'}
]),
proxy: new Ext.data.HttpProxy({
url : '/ipurse/easyMemo.do?method=loadMemo',
method:"post"
}),
sortInfo: {field: 'title', direction: 'DESC'}
});
/////////////
//////////
if(!win){
win = desktop.createWindow({
id : 'tool-memo',
title : '便签(双击编辑信息)',
shim:false,
animCollapse:false,
constrainHeader:true,
width : 800,
height : 600,
layout : 'fit',
labelWidth : 80,
labelAlign : 'right',
buttonAlign : 'center',
items :
memoGrid = new Ext.grid.GridPanel({
store : memoStore,
width : 800,
region:'center',
margins: '0 5 5 5',
loadMask: {msg:'正在加载数据，请稍侯……'},
plugins: [memoEditor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
columns: [
new Ext.grid.RowNumberer() ,//显示行号
{
id : 'title',
header: "事情提要",
align : 'center' ,
width: 200,
sortable: true,
dataIndex: 'title',
editor: { ////这句话是关键，有了这句话就可以实现编辑功能
xtype: 'textfield',
allowBlank: false
}
},
{
xtype : 'datecolumn', //此处为日期类型