请跟我来--使用Ext搞个原型
点击次数：22 次 发布日期：2008-11-26 22:36:38 作者：源代码网
|
源代码网推荐 Ext本身就带有比较专业和酷的示例，这也是Ext明显强过其他js框架的地方，所以大家最好少看那些简单翻译一下就发表的示例，实在是浪费时间。关于一些高级的用法，最佳方式就是看源码和其他比较好的扩展控件写法，当然园子里有几篇原创的Ext入门文章，看看也是有好处的。 源代码网推荐 为了运行下面的例子，请下载ext2.0,实际上我的例子也是从form-grid等例子修改而来的。 源代码网推荐 会员分组统计界面如下： 源代码网推荐 
源代码网推荐 数据维护界面如下： 源代码网推荐 
源代码网推荐 说明：做过C/S数据应用的程序员都明白，我们一般会定义数据源，然后再将其绑定到界面组件上。在EXT中，如果要测试界面组件是否正确，则用以下几行就能轻松搞定了： 源代码网推荐 var myData = [ 源代码网推荐 ["1","alex","lsj@21cn.com","13226612334",1995,"2007-10-20 10:00:00"], 源代码网推荐 ["2","tom","tom@21cn.com","13826782334",1996,"2007-10-20 10:00:00"], 源代码网推荐 ["3","cx8","cx@163.com", "139250802541",1999,"2008-11-12 08:00:00"] 源代码网推荐 ]; 源代码网推荐 var ds = new Ext.data.Store({ 源代码网推荐 reader: new Ext.data.ArrayReader({},[ 源代码网推荐 "id","Name","Email","Mobile",//通常的字符型可简单定义 源代码网推荐 {name: "GradYear", type: "int"}, 源代码网推荐 {name: "sCreatedDate", type: "date", dateFormat: "Y-m-d H:i:s"} 源代码网推荐 ]) 源代码网推荐 }); 源代码网推荐 ds.loadData(myData); 源代码网推荐 要同时绑定到数据列表组件和编辑组件则可以如下办理： 源代码网推荐 var gridForm = new Ext.FormPanel({ 源代码网推荐 id: "member-form",frame: true, labelAlign: "left", 源代码网推荐 layout: "column", // 以列方式布局 源代码网推荐 …… 源代码网推荐 items: [{ 源代码网推荐 columnWidth: 0.6,layout: "fit",//左边列放列表 源代码网推荐 items: { 源代码网推荐 xtype: "grid", ds: ds, cm: colModel, sm: rsm,id:"member-grid", 源代码网推荐 title:"会员列表", border: true, stripeRows: true, frame: true, height: 450, 源代码网推荐 …… 源代码网推荐 } 源代码网推荐 },{ 源代码网推荐 xtype: "fieldset",columnWidth: 0.4,//右边列放编辑板 源代码网推荐 ……, 源代码网推荐 items: [ 源代码网推荐 {fieldLabel:"姓名",name: "Name",allowBlank: false,minLength:3,maxLength:8,anchor:"90%"}, 源代码网推荐 {fieldLabel:"邮件",name: "Email",vtype:"email",anchor:"90%"}, 源代码网推荐 {fieldLabel:"手机",name: "Mobile",anchor:"90%"}, 源代码网推荐 {fieldLabel:"毕业年份",name: "GradYear",xtype:"numberfield",anchor:"90%",value: "2008"}, 源代码网推荐 {fieldLabel:"登记日期",name: "sCreatedDate", xtype:"datefield",format: "Y-m-d H:i:s", anchor:"90%"} 源代码网推荐 ], 源代码网推荐 …… 源代码网推荐 源代码网推荐 源代码网推荐 接下来我们要进行事件处理： 源代码网推荐 源代码网推荐 源代码网推荐 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; 源代码网推荐 } 源代码网推荐 源代码网推荐 var xg = Ext.grid; 源代码网推荐 var ds= createGroupingStore(); 源代码网推荐 var rsm = new xg.CheckboxSelectionModel(); 源代码网推荐 var summary = new Ext.grid.GroupSummary(); 源代码网推荐 var grid = new xg.GridPanel({ 源代码网推荐 ds: ds, 源代码网推荐 columns: [ rsm, 源代码网推荐 { 源代码网推荐 header: "姓名", width: 60, sortable: true, dataIndex: "Name",summaryType: "count", 源代码网推荐 summaryRenderer: function(v, params, data){ 源代码网推荐 return ((v === 0 || v > 1) ? "(" + v +" 人)" : "(1 人)"); 源代码网推荐 }//自定义汇总处理 源代码网推荐 }, 源代码网推荐 {header: "邮件", width: 175, sortable: true, dataIndex: "Email"}, 源代码网推荐 {header: "手机", width: 125, sortable: true, dataIndex: "Mobile"}, 源代码网推荐 {header: "毕业年份", width: 200, sortable: true, dataIndex: "GradYear"}, 源代码网推荐 {header: "登记日期", width: 85, sortable: true, summaryType: "max",renderer: Ext.util.Format.dateRenderer("Y/m/d"), dataIndex: "sCreatedDate"} 源代码网推荐 ], 源代码网推荐 sm:rsm, 源代码网推荐 view: new Ext.grid.GroupingView({ 源代码网推荐 forceFit:true, 源代码网推荐 showGroupName: true, 源代码网推荐 hideGroupedColumn: true 源代码网推荐 }), 源代码网推荐 plugins: summary, 源代码网推荐 frame:true,width: 800,height: 450,clicksToEdit: 0, 源代码网推荐 collapsible: true, animCollapse: false,trackMouseOver: false, 源代码网推荐 enableColumnMove: false,title: "分组列表", 源代码网推荐 iconCls: "icon-grid", 源代码网推荐 renderTo: document.body 源代码网推荐 }); 源代码网推荐 源代码网推荐 OK，有点感觉了吗？最好下载demo实际运行一下，请把例子解压到ext2.0/examples/demo目录,运行那form.html以及group.html即可 源代码网推荐 源代码网推荐 聪明的读者肯定就要问，那如何实际从数据库中加载数据并且提交修改数据回数据库呢？那就请听下回分解吧。 源代码网推荐 源代码网推荐 Alex 源代码网推荐 源代码网推荐 做人要厚道，请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
