相关的源代码如下:
1.beginformpanel.js(作用:外层html文件中表单的展现)
<script> var beginformpanel = ext.extend(ext.form.formpanel,{ constructor:function() { beginformpanel.superclass.constructor.call ( this, { title:"myform(绝不裸奔)", width:418, height:180, frame:true, labelwidth:45, style:"margin-left:250px", defaulttype:"textfield", defaults:{anchor:"95%"}, items: [ { fieldlabel:"姓名", name:"name" }, { fieldlabel:"年龄", name:"age" }, { fieldlabel:"性别", name:"sex" }, { fieldlabel:"住址", name:"addr" } ], buttons: [ { text:"添加" }, { text:"修改" }, { text:"删除" } ], renderto:ext.getbody() } ) ; } }) ; </script>
2.beginpanel.js(作用:gridpanel与窗口以及窗口中formpanel的实现)
<script> /**************************** formpanel *****************************************************/ var mywindowform = ext.extend(ext.form.formpanel,{ constructor:function() { mywindowform.superclass.constructor.call ( this, { labelwidth:45, defaulttype:"textfield", defaults:{anchor:"93%"}, style:"padding:5px", basecls:"x-plain", items: [ { fieldlabel:"姓名", name:"name", allowblank:false, blanktext:"姓名不能够为空!" }, { fieldlabel:"年龄", name:"age", allowblank:false, vtype:"age", blanktext:"年龄不能够为空!" }, { fieldlabel:"性别", name:"sex", allowblank:false, blanktext:"性别不能够为空!" }, { fieldlabel:"住址", name:"addr", allowblank:false, blanktext:"住址不能够为空!" } ] } ) ; }, getvalues:function() { if(this.getform().isvalid()) { return new ext.data.record(this.getform().getvalues()) ; } else { throw error("表单验证没通过哦!") ; } }, setvalues:function(record) { this.getform().loadrecord(record) ; }, reset:function() { this.getform().reset() ; } }) ; /******************************** window ***********************************/ var mywindow = ext.extend(ext.window,{ form:new mywindowform(), constructor:function() { mywindow.superclass.constructor.call ( this, { title:"mywindow(绝不裸奔)", width:300, height:185, frame:true, plain:true, modal:true, items:this.form, closable:false,//禁止关闭 collapsible:true,//可折叠 buttons: [ { text:"确定", handler:this.onsubmitclick, scope:this }, { text:"取消", handler:this.oncancelclick, scope:this } ] } ) ; this.addevents("submit") ; }, close:function() { this.hide() ; }, onsubmitclick:function() { /* try { this.fireevent("submit",this,this.form.getvalues()) ; } catch (error) { ext.msg.alert("警告","请将需要填写的信息填写完整!") ; } */ this.fireevent("submit",this,this.form.getvalues()) ; this.close() ; }, oncancelclick:function() { //上面不加scope属性则提示this.form为空 this.form.reset() ; this.close() ; } }) ; /************************** gridpanel **************************************/ var beginmypanel = ext.extend(ext.grid.gridpanel,{ insertwin:new mywindow(), constructor:function() { //this.insertwin = new mywindow() ; var mydata = [ ["th","91","非女","地球"], ["thtwin","92","男","地球"], ["thtwinj2ee","93","非女","地球"], ["thj2ee","94","男","地球"], ["thtwin","95","非女","地球"] ] ; var myrecord = ext.data.record.create ( ["name","age","sex","addr"] ) ; var mycolumn = new ext.grid.columnmodel ( [ {header:"姓名",dataindex:"name"}, {header:"年龄",dataindex:"age"}, {header:"性别",dataindex:"sex"}, {header:"住址",dataindex:"addr"} ] ) ; var mystore = new ext.data.store ( { proxy:new ext.data.memoryproxy(mydata), reader:new ext.data.arrayreader ( {}, myrecord ) } ) ; beginmypanel.superclass.constructor.call ( this, { title:"mygridpanel(thtwinj2ee)", frame:true, width:418, height:250, cm:mycolumn, ds:mystore, style:"margin:20,0,10,250", tbar: [ { text:"添加人员", handler:function() { this.insertwin.show() ; }, scope:this }, "-",//得到的结果为:| {text:"修改人员"}, "-", {text:"删除人员"} ], selmodel:new ext.grid.rowselectionmodel ( { listeners: { "rowselect": { fn:function(row,index,record) { this.settitle("修改之后的gridpanel的名字!") ; //注意下面的这句 ***** 1 ****** this.fireevent("rowselect",record) ; }, scope:this } } } ), renderto:ext.getbody() } ) ; mystore.load() ; //注意下面这句 ***** 2 ****** this.addevents("rowselect") ; this.insertwin.on("submit",this.oninsertwinsubmit,this) ; }, insert:function(myrecord) { this.getstore().add(myrecord) ; }, oninsertwinsubmit:function(insertwin,myrecord) { this.insert(myrecord) ; } }) ; </script>
3.静态html页面的表现
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="../allres/resources/css/ext-all.css"/> <script type="text/javascript" src="../allres/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../allres/ext-all.js"></script> <script type="text/javascript" src="beginpanel.js"></script> <script type="text/javascript" src="beginformpanel.js"></script> <script> ext.onready(function(){ ext.quicktips.init() ; ext.form.field.prototype.msgtarget="side" ; ext.apply(ext.form.vtypes,{ "age":function(value) { //此处用正则表达式要使 if(/^\d+$/.test(value)) { return true ; } return false ; }, "agetext":"请输入正确的年龄!" } ) ; /* var newnewmywindowform = new mywindowform() ; newmywindowform.render(ext.getbody()) ; */ // var newnewmywindow = new mywindow() ; // newmywindow.show() ; var mygridpanel = new beginmypanel() ; var myform = new beginformpanel() ; //注意下面这句与***** 1 ****** 和 ***** 2 ******的关系 mygridpanel.on ( "rowselect", function(selectedrow) { this.getform().loadrecord(selectedrow) ; }, myform ) ; }) ; </script> </head> <body> </body> </html>