// 这个例子要使用到之前的 DwrStore CustomGridPanel CustomUtil

// 配置
<script type="text/javascript" src="/webtest/dwr/engine.js" ></script>
 <script type="text/javascript" src="/webtest/dwr/util.js" ></script>
 <script type="text/javascript" src="/webtest/dwr/interface/DwrTest.js" ></script>
 <script type="text/javascript" src="/webtest/ext/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="/webtest/ext/ext-all.js"></script>
 <script type="text/javascript" src="/webtest/js/custom_ext/DwrExt.js" ></script>
 <script type="text/javascript" src="/webtest/js/custom_ext/CustomGridPanel.js" ></script>
 <script type="text/javascript" src="/webtest/js/custom_ext/CustomUtil.js" ></script>
    
 <link rel="stylesheet" type="text/css" href="/webtest/ext/resources/css/ext-all.css">

// Ext 代码

function getFormWindow(sureFn,cancelFn){
     var record = Ext.getCmp('grid').getSelectionModel().getSelected();
      if(record){
          var form = new Ext.form.FormPanel({
                id: 'form',
             layout: 'fit',
             record: record,
             closable: 'true',
             labelAlign: 'right',
             buttonAlign: 'center',
             height: 150,
             defaultType: 'textfield',
          onSubmit: Ext.emptyFn,
             submit: function() {
                this.getForm().getEl().dom.submit();
             },
             items: [
                 {xtype: 'fieldset', title: 'add',
                   items: [
                     {xtype: 'textfield',fieldLabel: '姓名', name: 'name', allowBlank: false, blankText: '不能为空!', msgTarget: 'side'},
                  {xtype: 'textfield',fieldLabel: '年龄', name: 'age'},
                  {xtype: 'textfield',fieldLabel: '描述', name: 'desc'}
                   ]
                 }
               ],
             buttons: [
                {text: '保存', handler: sureFn},
                {text: '取消', handler: cancelFn}
             ]
          });
    var formWindow = Ext.getCmp('formWindow');
    if(!formWindow){
     formWindow = new Ext.Window({
            id: 'formWindow',
            width: 500,
            height: 300,
            layout: 'fit',
         title: 'add',
         id: 'window',
         items: form,
         model: true
       })
    }
       formWindow.show();
      
       form.getForm().loadRecord(record);
      }
   }
  
   function cancel() {
     Ext.getCmp('window').close();
   };
  
   function addItem(){
     var form = Ext.getCmp('form').getForm();
     if(form.isValid()){
       var values = form.getValues();
       var record = new Ext.data.Record(values);
//         var record = form.record.copy('');
//          record.data = values;
       var f = Ext.getCmp('grid').addSorted(record,DwrTest.save);
       if(f){
         var win = Ext.getCmp('form').findParentByType('window');
         win.close();
       }
     }else{
       setError('请输入有效记录再提交!');
     }
   };
  
   function updateItem(){
     var form = Ext.getCmp('form').getForm();
     if(form.isValid()){
       var values = form.getValues();
       DwrTest.update(values);
       var win = Ext.getCmp('form').findParentByType('window');
       win.close();
       form.updateRecord(form.record);
     }else{
       setError('请输入有效记录再提交!');
     }
   }
  
   function add(btn,evt) {
      getFormWindow(addItem, cancel);
   };
  
   function update(btn,evt) {
     getFormWindow(updateItem, cancel);
   };
  
   function del(btn, evt) {
     var grid = Ext.getCmp('grid');
     var sel = grid.getSelected();
     if(sel){
      grid.removeRecord(sel,DwrTest.del,{});
     }
   };

Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    var cfg = {dwr: DwrTest.getBean, autoLoad: 'true',
     fields:[
     {name: 'row'},
     {name: 'age', type: 'int', mapping: 'age'},
     {name: 'name', type: 'string', mapping: 'name'},
     {name: 'desc', type: 'string', mapping: 'desc'}
     ]
    };
    var store = new Ext.data.DWRStore(cfg);
   
    var cmcfg = [new Ext.grid.RowNumberer(),
    {header: '姓名', dataIndex: 'name', sortable: 'true'},
    {header: '年龄',dataIndex: 'age', menuDisabled: 'true'},
    {header: '描述',dataIndex: 'desc', menuDisabled: 'true'}
    ];
    var cm = new Ext.grid.ColumnModel(cmcfg);
   
    var grid = new Ext.grid.CustomGridPanel({
     id: 'grid',
     cm: cm,
     viewConfig: {sortDescText: '降序',sortAscText: '升序',columnsText: '显示列'},
     sm: new Ext.grid.RowSelectionModel({
      singleSelect:true
     }),
     store: store,
     listeners: {rowdblclick: add },
     height: 500,
     renderTo: Ext.getBody(),
     layout: 'fit',
     loadMask: 'loading......',
     bbar: [
      {text: 'add',id: 'add', handler: add},
      {text: 'update', handler: update},{text: 'delete', handler: del}
     ]
    });

// JAVA类

package dwr;
import java.util.ArrayList;
import java.util.List;

public class DwrTest {

 public static List<TestBean> results = new ArrayList<TestBean>();
 
 static {
  TestBean bean = new TestBean();
  bean.setName("li");
  bean.setAge(25);
  bean.setDesc("li");
  results.add(bean);
  bean = new TestBean();
  bean.setName("zhang");
  bean.setAge(25);
  bean.setDesc("zhang");
  results.add(bean);
  bean = new TestBean();
  bean.setName("wang");
  bean.setAge(25);
  bean.setDesc("wang");
  results.add(bean);
  bean = new TestBean();
  bean.setName("liu");
  bean.setAge(25);
  bean.setDesc("liu");
  results.add(bean);
 }
 
 public List<TestBean> getBean() {
  return DwrTest.results;
 }
 
 public void update(TestBean bean) {
  save(bean);
  System.out.println("剩余" + DwrTest.results.size() + ",修改一个BEAN:" + bean);
 }
 
 public void save(TestBean bean) {
  DwrTest.results.remove(bean);
  DwrTest.results.add(bean);
  System.out.println("剩余" + DwrTest.results.size() + ",添加一个BEAN:" + bean);
 }
 
 public void del(TestBean bean) {
  DwrTest.results.remove(bean);
  System.out.println("剩余" + DwrTest.results.size() + ",删除一个BEAN:" + bean);
 }
}