-Convert ext2.0 form to use an instance

Introduction: Zhu
In ext2.0, the form not only adds the time input control and hides the input control, but also modifies the creation method. The formpanel replaces the original form, and the column also updates the definition method according to the new layout definition. In general, it is easier to define a form. This article will introduce the creation of form 2.0 and the usage of most of its controls through an example. Due to the limited level, mistakes and omissions are inevitable, and you may not understand them!
Let's take a look at the situation of the form we will design:
　　
　　
　　
The form is a bit messy, but the fomr contains most ext2.0 controls. I will discuss the use of these controls with you.
Before creating a form, add the following statement:
　　
Ext. quicktips. INIT ();
Ext. Form. Field. Prototype. msgtarget = 'day ';
The purpose of the first sentence is to provide the prompt information function for the required components. The main prompt information of form is the error message verified by the client.
The purpose of the second sentence is to set the display position of the error message of the control. The main optional positions include:
Location value description
QTip: a prompt is displayed when you move the cursor over the control.
The title is displayed in the browser title, but the test result is the same as that of QTip.
Under displays an error message under the control
Side displays an error icon on the right of the Control. When you point to the icon, an error message is displayed.
[Element id] the error message is displayed in the HTML element of the specified ID.
This can be set according to your preferences. I am used to using "side". Here, we should pay attention to controlling the width of the control to avoid displaying incorrect icons with insufficient width. This will be discussed below.
Now, to create our form, the method of 2.0 is to directly create a formpanel:
　　
VaR simpleform = new Ext. formpanel ({
Labelalign: 'left ',
Title: 'form example ',
Buttonalign: 'right ',
Bodystyle: 'padding: 5px ',
Width: 600,
Frame: True,
Labelwidth: 80,
Items: [],
Buttons: []
});
Simpleform. Render (document. Body );
In formpanle, we define the title of the Form Control on the left (labelalign: 'left'); the title bar of the form displays the title "Example of the form "; its button position is in the right alignment (buttonalign: 'right'); the edge type is set to the inner patch 5px (bodystyle: 'padding: 5px '); the total width is 600px; if the corner of the Panel is set to an excessive arc (frame: True), the main purpose of this attribute is not the corner, but the background. If this attribute is not set, the background color will be white, if this parameter is set, the background image of the sea blue image is added for viewing. The title width of the Form Control is 80 PX (labelwidth: 80 ). There are some other setting options that I will not talk about here. You can refer to the 2.0 API.
Setting the items array is our focus. All the controls on form are set here.
From the structure diagram of form, we can see that form is divided into two columns (not actually, haha ). Use the columnlayout class because the columnlayout class is required. Before using the columnlayout class, we need to know the function of the float attribute in CSS. The main function of modifying the attribute is to set whether the object is floating and how the attribute values are none, left, and right. The column setting is left, meaning that the object is floating on the left. So what is the role of this? In fact, the text entered in the word is left aligned by default. When the width of a line of text exceeds the width of the page, the line breaks automatically. Here is an example.
First, we define a div. The background color is black, and the width and height are both 200:
　　
　　　　

Then add two divs, each of which is 200 in width and height. The background color is red and the other is green:
　　
　　　　

　　

　　

Let's take a look at the effect:
　　
　　
　　
　　
Before float is used, the two subdivs occupy one row. Now we can add "float: Left" to the two subdiv to see the effect:
　　
　　　　

　　

　　

　　
　　
　　
　　
The two subdivs appear in the same row. Copy the two sub-Div, paste it twice, and then check the effect:
　　
　　　　

　　

　　

　　

　　

　　

　　

　　
　　
　　
　　
6 sub-divs are arranged in an ordered order by left alignment. When the width of the sub-Div in a row exceeds the width of the parent Div, the sub-divs automatically wrap to the second line.
Do you understand this? You can't understand how to change the width and height of the DIV and see the effect. This is how column works. Understanding this is very important, because when defining checkbox and radio, If you want their options to be in the same row, you should pay attention to the width of the column, otherwise they will not be able to make them in the same row. But now the column defines the width by percentage. We only need to control the percentage.
Now, we will continue to write the form, because column is used, so we should first add a column definition in itmes of formpanel:
　　
{
Layout: 'column ',
Border: false,
Labelseparator :':',
Items: []
}
The Code defines that columnlayout (layout: 'column') is used here; no edge (Border: false ); the separator Number of the title is replaced by a Chinese colon (labelseparator :':'). Controls in coulmnlayout are defined in items.
We first add a common input control to items to enter the name:
　　
{
Columnwidth:. 5,
Layout: 'form ',
Border: false,
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'name ',
Name: 'name ',
Anchor: '000000'
}]
}
We set the column width to 50% of the total width (columnwidth :. 5); put a formlayout in the layout to place the control (layout: 'form'); formlayout also has no edge (Border: false ). In formlayout, there is an input control of the type textfield '(xtype: 'textfield. The control title is name (fieldlabel: 'name'), and the name attribute of the input box is set to "name" (Name: 'name '), the length of the input box is 90% (ANCHOR: '000000') after the column width minus the title width. The remaining 90% is used for displaying the error message icon.
When you add a gender radio control, you must note that two radio items must be added here. The first radio has a title, and the second is none, and the sum of the two radio values is exactly the width of the remaining columns (50% ):
　　
{
Columnwidth:. 25,
Layout: 'form ',
Border: false,
Items :[{
Style: 'margin-top: 5px ',
Xtype: 'Radio ',
Fieldlabel: 'gender ',
Boxlabel: 'male ',
Name: 'sex ',
Checked: True,
Inputvalue: 'male ',
Anchor: '000000'
}]
},{
Columnwidth:. 25,
Layout: 'form ',
Labelwidth: 0,
Labelseparator :',
Hidelabels: True,
Border: false,
Items :[{
Style: 'margin-top: 5px ',
Xtype: 'Radio ',
Fieldlabel :',
Boxlabel: 'femal ',
Name: 'sex ',
Inputvalue: 'femal ',
Anchor: '000000'
}]
}
The Code shows that except for setting the column width to 25%, other column settings are the same as those of the first control. A radio type control is added to formlayout. The title of the control is gender. The selected display text is male (boxlabel: 'male'), and the input name attribute value is sex (Name: 'sex '), by default, this control is selected (checked: true). The value of the control is male (inputvalue: 'male') and the input width is 95%. Here, I also set a CSS attribute. The external patch on the top is 5px (style: 'margin-top: 5px '), in order to select the button and align the title, you can remove this attribute and check the effect.
The column settings of the second Raido control are different because it does not require a title. Therefore, you must set the title to hide (hidelabels: True) and the title width to 0 (labelwidth: 0 ), you also need to set its title separator to null (labelseparator :'). The remaining settings are not different from those of the first radio, but the input value is different.
We have set three columns, with the column width 50%, 25%, and 25% respectively. According to the float principle, the next column starts from the second row.
In the first column of the Second row, we want to add a date Selection control:
　　
{
Columnwidth:. 5,
Layout: 'form ',
Border: false,
Items :[{
Xtype: 'datefield ',
Fieldlabel: 'birthday ',
Name: 'birthday ',
Anchor: '000000'
}]
}
The column width of the date control is also 50%, and other column settings remain unchanged. The type of the control is datefield, the title is the date of birth, the name attribute of input is birthday, And the intput width is also set to 90%. Leave a blank space for the error message, you can also make the control have the same width as the name of the previous row, and the entire column looks neat.
The setting of the date control is as simple as that of the common text input. However, we need to talk about the problem of localization. There are some bugs in the localization file ext-lang-zh.js that comes with version 2.0, and we need to modify it ourselves.
The first thing to modify is the display of weeks. The original definition is:
　　
Date. daynames = [
"Sunday ",
"Monday ",
"Tuesday ",
"Wednesday ",
"Thursday ",
"Friday ",
"Saturday"
];
Because the area shown in the date selection is not wide enough and only one Chinese character can be displayed, you need to remove the "Week" defined above and change it:
　　
Date. daynames = [
"Day ",
"1 ",
"2 ",
"3 ",
"4 ",
"5 ",
"6"
];
The button text in the year and month options is "OK" and "cancel". Here we also need to modify it:
　　
If (ext. datepicker ){
Ext. Apply (ext. datepicker. prototype ,{
Todaytext: "Today ",
Mintext: "date before the minimum date ",
Maxtext: "the date is after the maximum date ",
Disableddaystext :"",
Disableddatestext :"",
Monthnames: Date. monthnames,
Daynames: Date. daynames,
Nexttext: 'Next month (Control + right )',
Prevtext: 'Last month (Control + Left )',
Monthyeartext: 'select a month (Control + up/down to change the year )',
Todaytip: "{0} (spacebar )",
　　Oktext :"OK",
　　Canceltext :"Cancel",
Format: "Y-m-d"
});
}
In the above definition, the black font is the code to be added. If you do not like the default format "Y-m-d", You need to modify it:
　　
If (ext. Form. datefield ){
Ext. Apply (ext. Form. datefield. prototype ,{
Disableddaystext: "disabled ",
Disableddatestext: "disabled ",
Mintext: "The input date must be after {0 ",
Maxtext: "The input date must be before {0 ",
Invalidtext: "{0} is invalid date-the format must be: {1 }",
　　Format: "Y-m-d"
});
}
Modifying datepicker does not change the format of datefield. This is determined by the actual situation.
Now, we need to add a drop-down control for the education level. The most important definition of the control is the definition of data. The data definition is incorrect and may not be as effective as we need, which is also the most troublesome place for many friends.
　　
{
Columnwidth:. 5,
Layout: 'form ',
Border: false,
Items :[{
Xtype: 'combo ',
Store: New Ext. Data. simplestore (
{
Fields: ["retrunvalue", "displaytext"],
Data: [[1, 'Primary school'], [2, 'Junior high'], [3, 'high school'], [4, 'secondary school'], [5, ''], [6, '']
}),
Valuefield: "retrunvalue ",
Displayfield: "displaytext ",
Mode: 'local ',
Forceselection: True,
Blanktext: 'select a degree ',
Emptytext: 'select a degree ',
Hiddenname: 'ucation ',
Editable: false,
Triggeraction: 'all ',
Allowblank: false,
Fieldlabel: 'diploma ',
Name: 'education ',
Anchor: '000000'
}]
}
The column definition remains unchanged. In items, the type is set to combo. Here, a sotre attribute is defined, that is, the place where the value is stored, because the data is stored on the client, therefore, a simple storage (simplestore) is used ). In storage, we define the retrunvalue and displaytext fields through an array. The retrunvalue field specifies the value submitted to the background, and the displaytext field specifies the selected value displayed in the drop-down list. Then we define several groups of data in data (data: [[1, 'primary'], [2, 'Junior high '], [3, 'highly'], [4, ''], [5, ''], [3,' ']), we can see that, each group of data is composed of fiedls definitions. The first value in the array is the value of retrunvalue, and the second value is the value of displaytext, for example, [1, 'Elementary school ']. it indicates that retrunvalue is 1 and displaytext is primary.
The following is an important step. Set the value and text of the drop-down selection box. In this example, the submitted value object in the drop-down box is the retrunvalue field (valuefield: "retrunvalue") in the storage, and the displayed text is the displaytext field (displayfield: "displaytext") in the storage "), these two settings can be used to match the stored data with the drop-down box.
Because the data is local, the mode is set to local (Mode: 'local '). This drop-down list only allows selection, does not allow input (Editable: false), and must select an option (forceselection: true ). If no value is selected, it is displayed as the selected degree (emptytext: 'select degree '). If this option is not selected when you submit the form, the system prompts the error message "select education level" ("select education level '). This option value cannot be blank (allowblank: false ).Note thatHiddennameAndNameAttribute,NameOnly change the name of the drop-down list.HiddennameIs submitted to the backgroundInputOfName. If noHiddenname, The structure is not received in the background, so you must pay attention to this.
Because this drop-down can only be selected, you must set the attribute triggeraction to all. Otherwise, after you select an option, only the option text that matches the option value will appear in your drop-down list, other options are not displayed, so you cannot change other options.
If you want to set the default value for the control, set the attribute value and value to the value submitted to the background, rather than the displayed text. For example, to set University as the default value, set the value to 6.
Now the third line is complete. We need to create a checkbox option input:
　　
{
Columnwidth:. 35,
Layout: 'form ',
Border: false,
Items :[{
Xtype: 'checkbox ',
Fieldlabel: 'permission group ',
Boxlabel: 'System Postmaster ',
Name: 'popedom ',
Inputvalue: '1 ',
Anchor: '000000'
}]
},{
Columnwidth:. 2,
Layout: 'form ',
Labelwidth: 0,
Labelseparator :',
Hidelabels: True,
Border: false,
Items :[{
Xtype: 'checkbox ',
Fieldlabel :',
Boxlabel: 'postmaster ',
Name: 'peptid ',
Inputvalue: '2 ',
Anchor: '000000'
}]
},{
Columnwidth:. 2,
Layout: 'form ',
Labelwidth: 0,
Labelseparator :',
Hidelabels: True,
Border: false,
Items :[{
Xtype: 'checkbox ',
Fieldlabel :',
Boxlabel: 'normal users ',
Name: 'peptid ',
Inputvalue: '3 ',
Anchor: '000000'
}]
},{
Columnwidth:. 25,
Layout: 'form ',
Labelwidth: 0,
Labelseparator :',
Hidelabels: True,
Border: false,
Items :[{
Xtype: 'checkbox ',
Fieldlabel :',
Boxlabel: 'guest ',
Name: 'peptid ',
Inputvalue: '4 ',
Anchor: '000000'
}]
}
The setting of checkbox is similar to that of radio. You only need to define the column width.
The two input boxes in the fourth row are mainly used to test the vtypes attribute to verify the input in the input box:
　　
{
Columnwidth:. 5,
Layout: 'form ',
Border: false,
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'email ',
Name: 'email ',
Vtype: 'email ',
Allowblank: false,
Anchor: '000000'
}]
},{
Columnwidth:. 5,
Layout: 'form ',
Border: false,
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'Personal homepage ',
Name: 'url ',
Vtype: 'url ',
Anchor: '000000'
}]
}]
}
The definition here is no different from that in a common text input box, but a vtypes attribute definition is added. Vtypes defines four data formats: email, URL, Alpha, and alphanum. You don't need to introduce email and URL. Alpha is a combination of letters and underscores, and alphanum is a combination of letters, underscores, and numbers.
Add a tabpanel and three tabs.
　　
{
Xtype: 'tabpanel ',
Plain: True,
Activetab: 0,
Height: 235,
Ults: {bodystyle: 'padding: 10px '},
Items: []
}
Note that this tabpanel is not added to the items of coulmn, because it is not in column. We add it to formpanel. Set the item type to 'tabpanel ', and set the background of the tab header to transparent (plain: true). The current active tab is the first page (activetab: 0), the height is set to 235px (Height: 235), and the tab page uses the inner patch 10px (defaults: {bodystyle: 'padding: 10px '}).
Now, add the tab in items of tabpanel. The first page mainly contains two input controls: A vtypes alphanum logon input box and a password input box.
　　
{
Title: 'logon information ',
Layout: 'form ',
Defaults: {width: 230 },
Defaulttype: 'textfield ',
Items :[{
Fieldlabel: 'login name ',
Name: 'loginid ',
Allowblank: false,
Vtype: 'alphanum ',
Allowblank: false
},{
Inputtype: 'Password ',
Fieldlabel: 'Password ',
Name: 'Password ',
Allowblank: false
}]
}
The label is defined. The label title is set to logon information (Title: 'logon information'), and the control container is formlayout (layout: 'form '), the default width of the control is 230px (defaults: {width: 230}), and the default control type is textfield (defaulttype: 'textfield ').
The definition of the two controls is no different from the previous textfield definition, but the type of the input control must be defined in the password input box as password (inputtype: 'Password '). Both controls cannot be empty (allowblank: false ).
The second tab contains the numberfield, timefield, and textfield controls:
　　
{
Title: 'digit and time letter ',
Layout: 'form ',
Defaults: {width: 230 },
Defaulttype: 'textfield ',
Items :[{
Xtype: 'numberfield ',
Fieldlabel: 'number ',
Name: 'number'
},{
Xtype: 'timefield ',
Fieldlabel: 'time ',
Name: 'time'
},{
Fieldlabel: 'Letters only ',
Name: 'Char ',
Vtype: 'alpha'
}]
}
Numberfield is an input control that can only enter numbers. In this example, no limit is imposed on the maximum and minimum values. To set the maximum and minimum values, set the maxvalue and minvalue attributes respectively. If you want to set the length of a number input, such as the ID card number, you can set the maxlength and minlength attributes. You can set verification error information by setting maxtext, mintext, maxlengthtext, and minlengthtext. You can use the allowdecimals attribute to set whether only integer values are allowed. The default value is true, and floating point numbers are allowed. Set allownegative to set whether to allow only positive numbers. The default value is true, and positive and negative numbers are allowed. The decimalprecision attribute can be used to set the number of digits after the decimal point. The default value is two digits.
Timefield is a newly added time input control that makes up for the inability of the date input control to enter time. Its definition is also very simple, just set the type to timefield. The default timefield time format is 12-hour. You can modify the format attribute to modify the data format. You can set the increment attribute to select a time interval from the drop-down menu. The default value is 15 minutes. You can also set the maximum and minimum values like the numeric input control. The drop-down setting is the same as that of ComboBox.
In the current version, the timefield class has not been written into Chinese, so we need to add the definition of timefield in the local file:
　　
If (ext. Form. timefield ){
Ext. Apply (ext. Form. timefield. prototype ,{
Format: 'G: I: s ',
Mintext: "The input time must be greater than or equal to: {0 }",
Maxtext: "The input time must be less than or equal to: {0 }",
Invalidtext: "{0} is not a valid time ",
});
}
Here, I have defined by default that the time format is in the 24-hour format, and the hour is a single digit without a prefix of 0.
The last one is to test the pure letter input, which is the same as email, so I will not introduce it.
Add a textarea input to the last tab:
　　
{
Title: 'text region ',
Layout: 'fit ',
Items :{
Xtype: 'textea ',
ID: 'region ',
Fieldlabel :'
}
}
Like textfield, you only need to set the type to textarea. The only difference is that fitlayout is used as its container for textarea and the Panel adaptive panel, therefore, we do not need to set the width and height of textarea here.
The last step is to add a button for form. In the formpanel buttons attribute, we add a Save button and a Cancel button:
　　
Buttons :[{
Text: 'save ',
Handler: function (){
If (simpleform. Form. isvalid ()){
This. Disabled = true;
Simpleform. Form. doaction ('submit ',{
URL: 'test. asp ',
Method: 'post ',
Params :',
Success: function (Form, Action ){
Ext. msg. Alert ('operation', action. Result. data); this. Disabled = false;
},
Failure: function (){
Ext. msg. Alert ('operation', 'failed to save! ');
This. Disabled = false;
}
});
}
}
},{
Text: 'cancel ',
Handler: function () {simpleform. Form. Reset ();}
}]
In the formpanel class, the form attribute points to the basicform object in formpanle. We can use this basicform object through formpanle. form. In the example above, we have assigned the formpanel object to the simpleform variable, so we can access the basicform object in the Panel through simpleform. form.
The button defined in buttons is Ext. Button by default, so you can view the Ext. Button API for the button attribute definition. No other attributes are used for both buttons, but the display text and click event are set.
To save the button, you must first perform basicform client verification (simpleform. Form. isvalid (). If the verification succeeds, set the button status to disable to prevent two submissions. Call simpleform. Form. doaction to submit data. The first parameter "Submit" of the doaction method indicates that the commit operation is executed, and the submit background page is test. ASP (URL: 'test. ASP '). The submission method is post (method: 'post'). There is no other submission parameter (Params:'). After the submission is successful, execute the success-defined function, this example only shows a successfully saved message.The format of the data returned by the background must be noted.JSONFormat, and must contain"Success: True", Otherwise it will not be executedSuccessDefined functions.The success-defined function returns two parameters. The first is form itself, and the second is the response result returned by Ajax. The JSON array of action. Result stores the data returned by the background. For example, the JSON structure returned by the background in this example is "{success: True, data :~~~}", The data section combines the field name and data into a string. In the success function, I use "Ext. msg. Alert ('operation', action. Result. data);" to display data. We also define the failure function, that is, the error message will be displayed when there is a problem with network communication.
The cancel button is a simple form Reset Control.
If you want to submit the form in the old way, you can add the following settings in the formpanel definition:
　　
Onsubmit: Ext. emptyfn, submit:Function(){This. Getel (). Dom. Submit ();
}
The first setting aims to cancel the default formpanel commit function. The second is to set the new submission method to the old one.
So far, we have simply learned the Form Control in version 2.0, and hope everyone can get the benefits from it. If you have any questions or suggestions, contact me. Thank you!
Click here to download the code in this example. The example is in the form directory.
Complete code in this example:
　　
　　
Background File Code (ASP ):
　　
　　
Code of the CSS attribute float test file:
　　
　　

Http://www.mudcms.com welcome to our CMS Technology discussion forum.
Posted on zhouyou96 read (332) Comments (2) EDIT favorites category: ext
　　
　　
　　Comment:
# 1st floor | lwwy20041372 [unregistered users]
How to assign values to the form by reading data from the background?
View reply reference
#2 floor [main poster] | zhouyou96
This is a conversion article...
View reply reference
Refresh comment list
Title
Name
Home Page
The email address is invalid (only visible to the blogger ).
Enter the Verification Code *
　　
　　
Content (do not post any politically related content) Please enter comments
　　
Remember me?
Log on to use advanced comments for new user registration, return to the top, resume previous submission
[Use Ctrl + enter to directly submit]
This article was edited by the author
　　
Blog homepage group blog posts flash news channel recruitment channel topics
　　

This article is transferred from
Http://www.cnblogs.com/zhouyou96/archive/2007/12/29/1006905.html