ExtJS Adding an Employee instance----anchor Layout anchor Auto-scaling

The code is as follows:

<script type= "Text/javascript" >Ext.onready (function () {            //create a record line with the job Displayfield name            varJob = Ext.data.Record.create ([{Name: "Job"}]); NewExt.window ({title:"Add people", Width:500, Height:350, layout:"Form", Labelwidth:55, Plain:true, Bodystyle:"Padding:5px", DefaultType:"TextField", defaults: {anchor:"95%"}, items: [{xtype:"Panel", Frame:true, Basecls:"X-plain", layout:"Column", items: [{columnWidth:0.5, layout:"Form", Labelwidth:55, DefaultType:"TextField", Basecls:"X-plain", defaults: {width:160}, items: [{fieldlabel:Name}, {ID:"Age", Fieldlabel:Age, Value:20}, {xtype:"Datefield", Format:"Y-m-d", Value:NewDate (), ReadOnly:true, Fieldlabel:"Date of birth", listeners: {"Blur":function () {                                    varAge =NewDate (). getFullYear ()- This. GetValue (). getFullYear () + 1; EXT.GETCMP ("Age"). SetValue (age); }}}, {fieldlabel:"Contact Phone"}, {fieldlabel:"Mobile phone Number"}, {fieldlabel:Email}, {xtype:"Combo", TriggerAction:"All", ReadOnly:true, Value:Male, store: [' Male ', ' woman '], Fieldlabel:Gender}]}, {columnWidth:0.5, layout:"Form", Labelwidth:55, Basecls:"X-plain", items: {ID:"Imgtest", Xtype:"TextField", Fieldlabel:"Personal Photos", Width:163, Height:177, InputType:"Image"} }]}, {fieldlabel:"Social Security Number", Width:400}, {fieldlabel:"Specific Address", Width:400}, {xtype:"Panel", layout:"Column", Basecls:"X-plain", Bodystyle:"Padding:5px", defaults: {basecls:"X-plain"}, items: [{columnWidth:0.4, layout:"Form", Labelwidth:50, items: {ID:"Jobs", Xtype:"Combo", Mode:"Local", Anchor:"98%", TriggerAction:"All", Displayfield:"Job", ReadOnly:true, Store:NewExt.data.SimpleStore ({fields: ["Job"], data: [[' Network engineering ', [' Software engineering '], [' Civil engineering ']]}), Fieldlabel:Position, listeners: {"Select":function(_combo, _record, _index) {_combo.selectitem=_record; }}}, {columnWidth:0.2, items: {xtype:"Button", Text:"Add Position", Handler:function () {                                var_job = ext.getcmp ("Jobs"); Ext.MessageBox.prompt ("Add position", "Job name",function(_BTN, _text) {if(_text = =NULL|| _text = = "") {Ext.MessageBox.alert ("Action tip", "position name cannot be empty!" "); return; }                                    if(_btn = = "OK") {                                        //drop-down list inserts a single piece of data                                         This. Store.insert (0,NewJob ({job: _text}); //set the currently selected data                                         This. SetValue (_text); //set the first data to a custom selection                                         This. SelectItem = This. Store.getat (0);                            }}, _job); }}}, {columnWidth:0.2, items: {xtype:"Button", Text:"Modify Position", Handler:function () {                                var_job = ext.getcmp ("Jobs"); if(_job.selectitem! =NULL) {Ext.MessageBox.prompt ("Modify position", "Job name",function(_BTN, _text) {if(_text = =NULL|| _text = = "") {Ext.MessageBox.alert ("Action tip", "position name cannot be empty!" "); return; }                                        if(_btn = = "OK") {                                             This. Selectitem.set ("Job", _text);  This. SetValue (_text); }}, _job,false, _job.getvalue ()); } Else{Ext.MessageBox.alert (' Operation Tips ', ' no modifiable data! ‘); }}}, {columnWidth:0.2, items: {xtype:"Button", Text:"Delete Position", Handler:function () {                                var_job = ext.getcmp ("Jobs"); if(_job.selectitem! =NULL) {Ext.MessageBox.confirm ("Action Tip", "Are you sure to delete the current position?" ",function(_btn) {if(_btn = = "Yes") {                                             This. Store.remove ( This. SelectItem); if( This. Store.getcount ()! = 0) {                                                 This. SetValue ( This. Store.getat (0). Get ("Job"));  This. SelectItem = This. Store.getat (0); } Else {                                                 This. SetValue ("");  This. SelectItem =NULL;                                }}}, _job); } Else{Ext.MessageBox.alert (' Operation Tips ', ' no data to delete! ‘); }}}], Showlock: false, listeners: {"Show":function(_window) {if(!_window.showlock) {                            //get an object based on the type name and index, Getel is getting HTML elements                            //_window.findbytype ("TextField") [6].getel (). dom.src = "Img/default_pic.gif";                            //get ext object by IDEXT.GETCMP (' Imgtest '). Getel (). dom.src = "Img/default_pic.gif"; _window.showlock=true; }                        //set the default value for the position to be the first item                        var_job = ext.getcmp ("Jobs"); var_store =_job.store; //gets the first item, the value of the field job                        varJobvalue = _store.getat (0). Get ("job"));                        _job.setvalue (Jobvalue); _job.selectitem= _store.getat (0); }}, buttons: [{text:Determine, Handler:function () {                        //Gets the Ext object based on the index of the buttons collectionAlert This. ownerct.buttons[1].text); }}, {text:Cancel}]}). Show ();           }); </script>

ExtJS Adding an Employee instance----anchor Layout anchor Auto-scaling