Ext js simple common object creation and use

In your essay about ext JSArticleIs an API script library for ext JS version 3.4.0.

1. Create and use alert and prompt

 Function  Testmsg (){  //  You can compare the display effect.      //  Alert (confirm ("are you sure you want to exit? "));      //  Ext. MessageBox. Alert ("message", "extjs prompt box ");  Ext. msg. Alert ( "Information prompt", "is the processing successful? ", Function () {Alert ('tt! ' )});  // The input dialog box is displayed. Ext. msg. Prompt ("AA", "pspspsps ", Function  (BTN, text ){  If (BTN = "OK" ) {Alert (text );}  Else  {Alert ( "Not:" + Text );}});} 

2. Create and use Ext. MessageBox. Show

 Function  Ttmsgshow () {Ext. MessageBox. Show ({Title: 'Hup' , MSG: 'Display information Content', Width: 400 , Icon: Ext. MessageBox. Question,  //  Error \ info \ warning \ question Buttons: Ext. MessageBox. yesnocancel, //  Yesnocancel \ okcancel Animate: True , //  Animation effect? Multiline: True , //  Display input multi-row data          // Buttons: {"yes": "<H2> Yeah! <H2/> "," no ":" <H2> oh no! <H2/> "," cancel ":" <H2> x <H2/> "}, // custom buttons display FN: Function  (BTN ){  Switch  (BTN ){  Case 'OK': Ext. MessageBox. Alert ('info', 'click '+ Btn +' button '); Break  ;  Case 'Cancel': Ext. MessageBox. Alert '); Break  ; Case 'Yes': Ext. MessageBox. Alert ('info', 'click the Yes button '); Break  ;  Case 'No': Ext. MessageBox. Alert ('info', 'click No '); Break  ;  Default : Ext. MessageBox. Alert ('information hprompt ',' you clicked '+ Btn +' button '); Break  ;}}});} 

3. Create and use tooltip

 //  Simple tooltip performance Configuration  Function Tooltiptest (){  New  Ext. tooltip ({target: 'Divtest ', //  Point to Region Title: 'TT' , Closable:  True , //  Disable display? Autohide: False , //  Hide automatically Draggable: True ,//  Drag and Drop Showdelay: 10, //  Display delay. The default value is 500. Trackmouse: True , //  Move the mouse over HTML: ' }). Show ();}  //  Simple tooltip display position Configuration  Function  Tooltiptt (){  New  Ext. tooltip ({target: 'Divtest ', //  Point to Region Title: '<a href = "#"> tooltip title <\ A>' , Closable:  True , //  Disable display? Autohide: False , //  Hide automatically Anchor: 'top ', //  The location is top \ buttom \ right. Anchoroffset: 50, //  Location offset Contentel: 'tidcontent ', //  An existing HTML element or an ID of an existing HTML Element HTML: ' }). Show ();} 

4. Create and use Windows

 //  Simple window page  Function  Gettestwin (){  VaR Win = New  Ext. Window ({Title: "Extwindow" , Width: 300 , Height: 500, Renderto: Ext. getbody (), HTML: '<H1> <font> Hello extjs! </Font>  , Items :[  New Ext. Button ({text: "objects added through new button" }),  New Ext. Button ({text: "Add two new buttons Under items" }), {Xtype: "Button", text: "setting attribute new button through xtype" }, {Xtype: "Colorpalette", width: 150, height: 100 }]}); Win. Show ();} 

5. Create and use formpanel (some common objects in the form are also created)

//  Create form  Function  Createform (){  //  Initialize the Singleton. Any label-based quick tips to start working. Ext. quicktips. INIT (); //  Initialize all prompts for all quicktips      VaR Fromtest = New  Ext. formpanel ({layout: 'Form', autoheight: True , Frame: True , Renderto: Ext. getbody (), width: 300, height: 500,//  Whether the frame renders the form Title: '<center bgcolor = "yellow" onclick = "window. Location. Reload ()"> form exercise </center>' , Style: 'Margin-left: auto, margin-top: 50px, width: 500px, background-color: yellow' , Labelalign: 'Left', labelwidth: 80, buttonalign: 'center', defaults: {width: 180 }, //  Label alignment, label width, element alignment, default attribute  Items: [{xtype: 'Textfield', fieldlabel: 'text box control', ID: 'txtcontent', name: 'textbox' }, {Xtype: 'Textfield', fieldlabel: 'text', ID: 'txt ', readonly:True , Emptytext: 'Enter the content '}, //  Allowdecimals: decimals allowed; allownegative: negative numbers allowed {Xtype: 'numberfield', fieldlabel: 'input number', ID: 'txtnum', allowdecimals: False , Allownegative: False , Maxvalue: 1000, minvalue: 0 }, {Xtype: 'Combo ', fieldlabel: 'drop-down box control', ID: 'combtest', mode: 'local', displayfield: 'name', valuefield: 'id', Editable: False  , Typeahead:  True , Forceselection:False , Triggeraction: 'all', selectonfocus: True , //  Forceselection: required. triggeraction: matches all Store: New Ext. data. simplestore ({fields: ['id', 'name'], data: [['1', 'Li Bai '], ['2', 'Li du'], ['3', 'lily' ]}) },{ Xtype: 'Datefield', fieldlabel: 'calendar control', ID: 'datetest ', format: 'Y-m-d', Editable: False , Value: New Date (). Format ('Y-m-d ')}, // Default date {Xtype: 'radiogroup', fieldlabel: 'Single choice click', ID: 'rabs ', name: 'radio', width: 100 , Items: [{Name: 'Radios ', boxlabel: 'married', inputvalue: '1', checked: True  }, {Name: 'Radios ', boxlabel: 'married', inputvalue: '0' }]}, {Xtype: 'Checkboxgroup', fieldlabel: 'check control', columns: 2, //  Check box Group  Items: [{boxlabel: 'Banana ', inputvalue: 'A', ID: 'cheka'}, {Boxlabel: 'Apple', inputvalue: 'B', ID: 'checkb' }, {Boxlabel: 'Orange', inputvalue: 'C', ID: 'checkc' }, {Boxlabel: 'Peach ', inputvalue: 'D', ID: 'checkd' }]}, {Xtype: 'Timefield', fieldlabel: 'Time control', format: 'H: I ', increment: 60, value: New  Date (). tolocaletimestring ()}, {xtype: 'Fieldset', fieldlabel: 'tab ', autoheight: True , // Tab Items: [{xtype: 'panel ', Title: 'tag1', frame: True , Height: 50 },{ xtype: 'panel ', Title: 'tag2', frame: True , Height: 30 }]}, {Xtype: 'Htmleditor ', fieldlabel: 'Online editor', width: 200, height: 100} //  Online Editor  ], Buttons: [{text: 'Save', tooltip: 'Here is the Save button ', Handler: Function () {MSG ('saved successfully ')}}, //  Tooltip prompt information {Text: 'cancel', tooltip: 'This is the cancel button', Handler: Function  () {Form1.form. Reset () ;}}]});} 

6. Create and use a panel

 Function  Createpanel (){  VaR Objpro = {Title: "Hello pannel", width: 300, height: 300, HTML: ' };  VaR Panel = New  Ext. Panel (objpro); panel. Render ( "Hello pannel "); // Render the panel to the hello pannel, which is the ID of the div.      //  The parameter following the render method indicates the DIV element ID on the page. You can also replace the render method by using the property renderto parameter, or you can renderto: Ext. getbody ()      //  Example: New Ext. Panel ({renderto: "hello", title: "Hello panel", width: 300, height: 300, HTML: '      //  For a container control (component), the sub-control can be created in the delayed mode. The sub-control is constructed in the array mode by passing the items attribute of the parent control.      //  For example: var tabpanel = new Ext. tabpanel ({width: 200, height: 300; items :[      //  {Title: "Panel 1", height: 30 },{ title: "Panel 2", height: 30 },{ title: "Panel 3", height: 30}     //  ]});      //  Equivalent to: var tabpanel = new Ext. tabpanel ({width: 200, height: 300, items [      //  New Ext. panel ({Title: "Panel 1", height: 30}), new Ext. panel ({Title: "Panel 2", height: 30}, new Ext. panel ({Title: "Panel 3", height: 30 }))      //  ]});      //  In comparison, the former is better, the former is created at initialization; the latter is created at the beginning, and the former implements delayed loading. }

7. Introduction to "xtype" in API documentation

Below are all 'xtype' And class ing xtype class -------------------------------Box Ext. boxcomponentbutton Ext. buttonbuttongroup Ext. buttongroupcolorpalette Ext. colorpalettecomponent Ext. componentcontainer Ext. containercycle Ext. cyclebuttondataview Ext. dataviewdatepicker Ext. datepickereditor Ext. editoreditorgrid Ext. grid. editorgridpanelflash Ext. flashcomponentgrid Ext. grid. gridpanellistview Ext. listviewpanel Ext. panelprogress Ext. progressbarpropertygrid Ext. grid. propertygridslider Ext. sliderspacer Ext. spacersplitbutton Ext. splitbuttontabpanel Ext. tabpaneltreepanel Ext. tree. treepanelviewport Ext. viewportwindow Ext. windowtoolbar Components ---------------------------------------Paging Ext. pagingtoolbartoolbar Ext. toolbartbbutton Ext. toolbar. button (obsolete; Use button) tbfill Ext. toolbar. filltbitem Ext. toolbar. itemtbseparator Ext. toolbar. separatortbspacer Ext. toolbar. spacertbsplit Ext. toolbar. splitbutton (obsolete; Use splitbutton) tbtext Ext. toolbar. textitemmenu Components --------------------------------------- Menu Ext. menu. menucolormenu Ext. menu. colormenudatemenu Ext. menu. datemenumenubaseitem Ext. menu. baseitemmenucheckitem Ext. menu. checkitemmenuitem Ext. menu. itemmenuseparator Ext. menu. separatormenutextitem Ext. menu. textitemform Components ---------------------------------------Form Ext. form. formpanelcheckbox Ext. form. checkboxcheckboxgroup Ext. form. checkboxgroupcombo Ext. form. comboboxdatefield Ext. form. datefielddisplayfield Ext. form. displayfieldfield Ext. form. fieldfieldset Ext. form. fieldsethidden Ext. form. hiddenhtmleditor Ext. form. htmleditorlabel Ext. form. labelnumberfield Ext. form. numberfieldradio Ext. form. radioradiogroup Ext. form. radiogrouptextarea Ext. form. textareatextfield Ext. form. textfieldtimefield Ext. form. timefieldtrigger Ext. form. triggerfieldchart Components ---------------------------------------Chart Ext. Chart. chartbarchart Ext. Chart. barchartcartesianchart Ext. Chart. cartesianchartcolumnchart Ext. Chart. columnchartlinechart Ext. Chart. linechartpiechart Ext. Chart. piechartstore xtypes --------------------------------------- Arraystore Ext. data. arraystoredirectstore Ext. data. directstoregroupingstore Ext. data. groupingstorejsonstore Ext. data. jsonstoresimplestore Ext. data. simplestore (outdated; Use arraystore) store Ext. data. storexmlstore Ext. data. xmlstore 

Should I add some results? I do not like writing long articles as much as possible, because if it is too long, everyone will not be patient. Although this is not very good, we will also consider some of your feelings. Think about howCodeAnnotations are detailed enough to make it easier to understand. Only results, but no code comments are available. Such code is equivalent to not being written and is not readable. Others do not understand what you are writing, and good comments are necessary.