JS small exercise code 2 _

JS exercise code

The source code is as follows:
1. beginFormPanel. js (Role: Display forms in outer html files)

Script var beginFormPanel = Ext. extend (Ext. form. formPanel, {constructor: function () {beginFormPanel. superclass. constructor. call (this, {title: "myForm (never streaking)", width: 418, height: 180, frame: true, labelWidth: 45, style: "margin-left: 250px ", defaultType:" textfield ", defaults: {anchor:" 95% "}, items: [{fieldLabel:" name ", name:" name "},{ fieldLabel: "age", name: "age" },{ fieldLabel: "gender", name: "sex" },{ fieldLabel: "Address", name: "addr"}], buttons: [{text: "add" },{ text: "modify" },{ text: "delete"}], renderTo: Ext. getBody ()}) ;}}); script

2. beginPanel. js (function: Implementation of GridPanel and window and FormPanel in window)

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: "name", allowBlank: false, blkt Ext: "The name cannot be blank! "},{ FieldLabel:" age ", name:" age ", allowBlank: false, vtype:" age ", blankText:" age cannot be blank! "},{ FieldLabel:" gender ", name:" sex ", allowBlank: false, blktext:" gender cannot be blank! "},{ FieldLabel:" Address ", name:" addr ", allowBlank: false, blktext:" The address cannot be blank! "}]}) ;}, GetValues: function () {if (this. getForm (). isValid () {return new Ext. data. record (this. getForm (). getValues ();} else {throw error ("Form Verification Failed! ") ;}}, 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 (never streaking)", width: 300, height: 185, frame: true, Plain: true, modal: true, items: this. form, closable: false, // disable collapsible: true, // foldable buttons: [{text: "OK", handler: this. onSubmitClick, scope: this}, {text: "cancel", 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. ale Rt ("warning", "Please complete the information you need! ");} */This. fireEvent ("submit", this, this. form. getValues (); this. close () ;}, onCancelClick: function () {// if the scope attribute is not added, this is displayed. form is empty this. form. reset (); this. close ();}}); /************************** GridPanel ************ * ************************/var beginMyPanel = Ext. extend (Ext. grid. gridPanel, {insertWin: new myWindow (), constructor: function () {// this. insertWin = new myWindow (); var my Data = [["th", "91", "non-female", "Earth"], ["thtwin", "92", "male", "Earth"], ["thtwinj2ee", "93", "non-female", "Earth"], ["thj2ee", "94", "male", "Earth"], ["thtwin", "95", "non-female", "Earth"]; var myRecord = Ext. data. record. create (["name", "age", "sex", "addr"]); var myColumn = new Ext. grid. columnModel ([{header: "name", dataIndex: "name" },{ header: "age", dataIndex: "age" },{ header: "gender", dataIndex: "sex" },{ header: "Address", dataIndex: "addr"}]); var mySt Ore = 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:" add personnel ", handler: function () {this. insertWin. show () ;}, scope: this}, "-", // The result is: | {tex T: "modifier"}, "-", {text: ""}], selModel: new Ext. grid. rowSelectionModel ({listeners: {"rowselect": {fn: function (row, index, record) {this. setTitle ("the name of the modified GridPanel! "); // Pay attention to the following *** 1 ******** this. fireEvent ("rowselect", record) ;}, scope: this }}), renderTo: Ext. getBody ()}); myStore. load (); // pay attention to the following ****** 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. Static html page performance