请跟我来--使用Ext搞个原型

来源：pcdog 作者：佚名出处：巧巧读书 2008-01-03 进入讨论组

关键词：
update
delphi
html
.net
ddn

接下来我们要进行事件处理：

   1) 列表当前选择记录和编辑框同步：
   var rsm=new Ext.grid.RowSelectionModel({
   singleSelect: true,
   listeners: {

   rowselect: function(sm, row, rec) {
   Ext.getCmp("member-form").getForm().loadRecord(rec);
   }
   }
   });
……
buttons: [
   {text: '修改',handler:function(){
   var frm=Ext.getCmp("member-form").getForm();
   if(frm.isValid()) frm.updateRecord(rsm.getSelected()); //把右边编辑过的数据更新到左边的列表
   }
   },
   {text: '清空',handler:function(){
   var frm=Ext.getCmp("member-form").getForm();
   frm.reset();
   }
   }
   ]

2) 新增记录到缓存：
function addNew() {
   var r=rsm.getSelected().copy();
   r.data['id']='';r.data['Name']='???';
   var grid=Ext.getCmp("member-grid");
   grid.stopEditing();
   ds.insert(0, r);
   ds.commitChanges();
   grid.getView().refresh();
   }
3) 从缓存中删除一条记录：
   function deleteRec() {
   if(rsm.getCount()<1) return;
   var r=rsm.getSelected();
   var grid=Ext.getCmp("member-grid");
   grid.stopEditing();
   ds.remove(r);
   ds.commitChanges();
   grid.getView().refresh();
   }
要个性化显示也很简单，比如我们把1998年前毕业的用红色，否则用绿色标记：
   function myRenderer(val){
   if(val > 1998)
   return '<span style="color:green;">' + val + '</span>';
   return '<span style="color:red;">' + val + '</span>';
   }var colModel = new Ext.grid.ColumnModel([
   ……,
   {header: "毕业年份", width: 65, sortable: true, renderer: myRenderer, dataIndex: 'GradYear'},
   ……
   ]);

   我们从使用中看出Ext设计十分灵活，让我有当初使用Delphi的那种爽的感觉！Ext的数据模型还是比较简单易懂的，基本可以应付常见的应用，我们也看到对于新增加的记录，它还缺乏一些状态，就不如.NET框架中DataSet中那么强有力。可能是要考虑不能太过于复杂，否则js框架就太大了,毕竟是要下载到客户端去的。但是我们仍然可以想一些办法区分，比如：r.data['id']=''；这样我们在后台就可以知道这是新增加的记录。
   再看看统计则要用扩展的分组统计组件。定义数据源稍微有些变化，多了几点：
function createGroupingStore(){
   var myData = [
   ['1','alex','lsj@21cn.com','13226612334',1995,'2007-10-20 10:00:00'],
   ['2','tom','tom@21cn.com','13826782334',1995,'2007-10-20 10:00:00'],
   ['3','cx8','cx@163.com', '139250802541',1999,'2008-11-12 08:00:00']
   ];
   var ds = new Ext.data.GroupingStore({
   reader: new Ext.data.ArrayReader({},[
   'id','Name','Email','Mobile',
   {name: 'GradYear', type: 'int'},
   {name: 'sCreatedDate', type: 'date', dateFormat: 'Y-m-d H:i:s'}
   ]),
   groupField: 'GradYear',
   remoteSort: false
   });
   ds.setDefaultSort('sCreatedDate','DESC');
   ds.loadData(myData);
   return ds;
}