"ExtJS" Simple layout app

After studying the various layouts of ExtJS a few days ago, the following is a variety of practices, from simple to start.

Purpose of implementation:

A Submission Form page, a display information page, a form for the personal basic information input, the display page is the basic information display.

Content:

The overall layout is border layout, the presentation page is West, and the submission form is center. The display page is collapsible and is collapsed by default.

　　　　1, display page with a panel display. Collapsible, which defaults to collapsed state. Click on submit to show, click Close to close.

1     var show = Ext.create (' Ext.panel.Panel ', {2region         : ' West ',3         Title: ' Show ',4         width:150,5         margin: ' 5 2 5 5 ',6          True,7         true,8     });

Collapsed default to collapsed state.

　　　2. Form page. Contents include: Name input, gender selection, date of birth, title, remark. 5 components are used respectively.

(1) Name Input: Component Selection TextField.

1     var form_name = ext.create (' Ext.form.TextField ', {2         ID: ' Form_name ',3          Name: ' Name ',4         fieldlabel: ' Name ',5         labelwidth: 6     });

(2) Gender selection: Component Selection Radiogroup.

1     varForm_sex = ext.create (' Ext.form.RadioGroup '),{2Name: ' Sex ',3Fieldlabel: ' Sex ',4Columns:2,5Verticaltrue,6Labelwidth:60,7 items: [8{boxlabel: ' man ', id: ' Man ', Name: ' Sex ', Inputvalue: ' 1 '},9{boxlabel: ' Woman ', id: ' Woman ', Name: ' Sex ', Inputvalue: ' 2 '}Ten         ]     One});

　　　(3) Date of birth: Component selection date.

1     var form_datetime = ext.create (' Ext.form.Date ', {2         ID: ' form_date ',3          Name: ' DateTime ',4         fieldlabel: ' DateTime ',5         Labelwidth:60,6         false,7          New  Date ()8     });    

　　　(4) Title: Component Selection ComboBox.

1     varForm_work = ext.create (' Ext.form.ComboBox '),{2ID: ' Form_work ',3Name: ' Work ',4Fieldlabel: ' Work ',5Labelwidth:60,6Editablefalse,7StoreNewExt.data.Store ({8Fields: [' position ', ' value '],9 data: [Ten{' position ': ' Engineer ', ' value ': ' 1 '}, One{' position ': ' Boss ', ' Value ': ' 2 '}, A{' position ': ' director ', ' Value ': ' 3 '} -             ] -         }), theQuerymode: ' Local ', -Displayfield: ' Position ', -Valuefield: ' Value ' -});

　　　(5) Remark: Component Selection textarea.

1     var form_remark = ext.create (' Ext.form.TextArea ', {2         ID: ' Form_remark ',  3         Name: ' Remark ',4         Fieldlabel: ' Remark ',5         Labelwidth:60,6         flex:17     });

form whose subassembly layout is selected as Vbox,vbox the width of the configuration control is the same as the parent component width.

Add 2 buttons below, the button position can be set buttonalign to locate, here the default settings on the right.

About the control values, get the control through the respective ID, and then get the value through GetValue (), where the Radiogroup control gets the control through its own ID, gets a value of true and false, and uses the trinocular operator to convert the output. The last ComboBox component gets the value Getrawvalue ().

In addition to the last memo control, the other control height is the default height, and textarea is added with an attribute flex:1, indicating that the remaining height is filled by textarea.

The display of information is updated using update ( string/object htmlordata, [Boolean loadscripts], [Function callback]) methods.

1     varform = ext.create (' Ext.form.Panel ',{2Title: ' Form ',3Region: ' Center ',4Bordertrue,5ID: ' FormId ',6Margin: ' 5 2 5 5 ',7 layout: {8Type: ' VBox ',9Align: ' stretch 'Ten         }, One items: [Form_name,form_sex,form_datetime,form_work,form_remark], A buttons: [{ -Text: ' Save ', -Handlerfunction(){ the                 varName = ext.getcmp (' Form_name '). GetValue (); -                 varSex = ext.getcmp (' man '). GetValue ()? ' Man ': ' Woman '; -                 varDateTime = ext.getcmp (' form_date '). GetValue (); -                 varWork = ext.getcmp (' form_work '). Getrawvalue (); +                 varRemark = ext.getcmp (' Form_remark ')). GetValue (); -                  +Show.update (' <p1>name: </p1> ' + name + ' <br/> ' + ' sex: ' + sex + ' <br/> ' + ' DateTime: ' + ext.da Te.format (dateTime, ' y-m-d ') + ' <br/> ' + ' work: ' + work + ' <br/> ' + ' remark: ' +remark); A             } at         },{ -Text: ' Cancel ', -Handlerfunction(){ - show.update (); -             } -         }] in});

Finally, combine the two together:

    var message = ext.create (' Ext.panel.Panel ', {        ' message Layout ',        ' center ',         ' border ',                and, Renderto                : Ext.getbody (),        items: [Show,form]    });

Effect:

"ExtJS" Simple layout app