Extjs study Note 3 extjs form more form items

1. Date selection box, DateField
The date selection box is widely used in daily projects. A convenient date input mechanism can greatly improve user experience. Extjs's DateField is very friendly, flexible, and powerful. You can use the following code to create a date selection box:
Copy codeThe Code is as follows:
New Ext. form. DateField ({
Id: 'diliverydate ',
Format: 'Y-m-d ',
MaxValue: new Date (),
MinValue: '2017-01-01 ',
DisabledDays: [0, 6],
DisabledDaysText: 'Do not select this date ',
FieldLabel: 'select date ',
Width: 200,
ShowToday: false
})

The effect is as follows:
 
Note: by default, this calendar is displayed in English. To display Chinese characters, you need to introduce the regional file:
<Script type = "text/javascript" src = "ext-3.1.0/src/locale/ext-lang-zh_CN.js"> </script> should be similar to other controls. 2. HTML editor, HTMLEditor
The HTML editor allows users to edit html documents. Enabling the HTML editor is simple and requires almost no additional configuration. By default, it is easy to use:
Copy codeThe Code is as follows:
New Ext. form. HtmlEditor ({
Id: 'htmlcontent ',
AutoHeight: false,
Width: 500,
FieldLabel: 'html editor'
})

 
Unfortunately, this editor does not support text-and-text mixing, but it is very useful for lightweight applications. If you want to mix text and text, use a dedicated third-party plug-in.

3. ComboBox
This is a heavyweight control, because it plays a wide and important role in practical application. Although its usage frequency is not as high as TextField, it has more functions than TestField, so we will describe it in a relatively backward position. Extjs ComboBox provides the drop-down prompt, Automatic completion, and other functions. It also supports local and server-side data sources. The following describes an example of a local data source.

The local data source can be stored in an ArrayStore, which is an array-like structure. For example, you can define the following store:
Copy codeThe Code is as follows:
Var store = new Ext. data. ArrayStore ({
Fields: ['name', 'code'],
Data: [['dashboard ', 1], ['administrative authority', 2], ['sales authority ', 3], ['quality Inspection Authority', 4], ['aftersales Department ', 5]
}); You can add a combobox, var myform = new Ext. FormPanel ({
ApplyTo: 'myform ',
Title: 'comboxbox with local datasource ',
Height: 200,
Width: 300,
Frame: true,
LabelSeparator :':',
LabelWidth: 60,
LabelAlign: 'right ',
Items: [new Ext. form. ComboBox ({
Id: 'combolocal ',
FieldLabel: 'department ',
TriggerAction: 'all ',
Store: store,
DisplayField: 'name ',
Mode: 'local ',
ForceSelection: true,
TypeAhead: true,
Resizable: true })
]
});

Among them, displayField is an important configuration item, corresponding to fields in datastore, used to specify which field to display. Mode, which indicates the local data source. TypeAhead indicates whether the operation is completed automatically, and forceSelection indicates whether the user is allowed to enter only the data in the drop-down list. The result is as follows. The Automatic completion is displayed. I only enter the word "open" in the input box:
 
Using Remote Data is similar, but we need to first prepare a server page that can return data, and create a combo. ashx Code as follows:
Copy codeThe Code is as follows:
Public class combo: IHttpHandler {
Public void ProcessRequest (HttpContext context ){
String query = context. Request. Params ["search"];
StringBuilder sb = new StringBuilder ("[");
Foreach (string s in data)
If (s. Contains (query) | query = "all") sb. Append (s + ",");
If (sb [sb. Length-1] = ',')
Sb. Remove (sb. Length-1, 1 );
Sb. Append ("]");
Context. Response. ContentType = "text/plain ";
Context. Response. Write (sb. ToString ());
}
String [] data = new string [] {"['dashboard ', 1]", "['administrative authority', 2]", "['sales authority ', 3]", "['qc Department ', 4]", "['aftersales Department', 5]"};

Public bool IsReusable {
Get {
Return false;
}
}}

This program filters parameters sent from the client and returns data. If the parameter value is all, all data is returned. It can be seen that the automatic completion of the server can be more free than the local, of course, the speed will be slower. In this example, the server returns a formatted javascript array. In actual development, there is a better data transfer format to choose from. The focus of this article is not on data transmission, therefore, this method is directly used as an example. Next, configure the client's datastore:
Copy codeThe Code is as follows:
Var remoteStore = new Ext. data. ArrayStore ({
Fields: ['name', 'code'],
Proxy: new Ext. data. HttpProxy ({url: 'combo. ashx '})
}); Finally, you can create a combobox that uses the Remote Data source: new Ext. form. ComboBox ({
Id: 'comboremote ',
AllQuery: 'all ',
FieldLabel: 'remote departments ',
TriggerAction: 'all ',
Mode: 'remote ',
QueryParam: 'search ',
DisplayField: 'name ',
Store: remoteStore,
MinChars: 1 })

MinChars indicates the number of words that the user needs to enter before Automatic completion. queryParam is the name of the parameter passed to the server, and allQuery is the parameter value required to return all data. The effect is as follows:

In remote mode, combobox also supports server-side paging. In this case, combox will pass the start and limit parameters to the server to indicate the data range to be displayed, after the server code is processed, the data is returned.