1. Date selection box, Datefield
The date selection box is widely used in daily projects, and a convenient date input mechanism can greatly improve the user experience. ExtJS's Datefield is very friendly, flexible and powerful. You can create a new date selection box by using the following code:
Copy Code code as follows:
New Ext.form.DateField ({
ID: ' Diliverydate ',
Format: ' Y year m month d ',
Maxvalue:new Date (),
MinValue: ' 1900-01-01 ',
Disableddays: [0, 6],
Disableddaystext: ' Prohibit the selection of this date ',
Fieldlabel: ' Select Date ',
WIDTH:200,
Showtoday:false
})
The effect is as follows:
Note that by default, this calendar displays English, and if you need to display Chinese, you need to introduce a zone file:
<script type= "Text/javascript" src= "Ext-3.1.0/src/locale/ext-lang-zh_cn.js" ></script> should also be similar to other controls. 2.HTML Editor, HTMLEditor
The HTML editor enables customers to edit HTML documents. Enabling the HTML editor is simple and requires little additional configuration, and the default is easy to use:
Copy Code code as follows:
New Ext.form.HtmlEditor ({
ID: ' Htmlcontent ',
Autoheight:false,
WIDTH:500,
Fieldlabel: ' HTML edit '
})
Unfortunately, this editor does not support graphics and text blending, but it is good for lightweight applications. If you need to mix graphics or text or use a special third-party plug-ins good.
3. Combo box, ComboBox
This is a heavyweight control because it plays a broad and important role in practical applications. Although its use frequency is not TextField high, but its function is much richer than testfield, so put it in the position of the comparison back to introduce. ExtJS's ComboBox has Drop-down prompts, AutoComplete, and also supports both local and server-side data sources. Let's look at an example of a local data source.
The local data source can be placed in a arraystore, which is a structure similar to an array. For example, you can define the following store:
Copy Code code as follows:
var store = new Ext.data.ArrayStore ({
Fields: [' Name ', ' Code '],
Data: [' Development department ', 1], [' Administrative department ', 2], [' Sales department ', 3], [' QC ', 4], [' Aftermarket ', 5]]
), you can add a combobox,var MyForm = new Ext.formpanel ({
ApplyTo: ' MyForm ',
Title: ' Comboxbox with the 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})
]
});
One of the more important configuration items is Displayfield, which corresponds to the fields in Datastore, which specifies which field to display. mode, here is local, representing the native data source. Typeahead indicates whether automatic completion, forceselection indicates whether the user is allowed to enter only the data in the Drop-down list. The results are as follows, the following figure shows the automatic completion, I only entered a "open" word in the input box:
Using remote data is similar, but first we have to prepare a server page that can return data, create a new COMBO.ASHX code as follows:
Copy Code code 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[]{"[Development department], 1]", "[' Administrative department ', 2]", "[' Sales department ', 3]", "[' QC department ', 4]", "[' Aftermarket ', 5]"};
public bool IsReusable {
get {
return false;
}
}}
This program filters the parameters from the client and returns the data, if the parameter value is all, then all the data is returned. Visible server-side autocomplete can be more free than local, and certainly slower. In this example, the server returns a well-formed JavaScript array, in actual development, there is a better data transfer format to choose from, this article is the focus of the discussion is not the data transfer, so the direct use of this approach as an example. Next configure the client's datastore:
Copy Code code 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 a remote data source: New Ext.form.ComboBox ({
ID: ' Comboremote ',
Allquery: ' All ',
Fieldlabel: ' Remote department ',
TriggerAction: ' All ',
Mode: ' Remote ',
Queryparam: ' Search ',
Displayfield: ' Name ',
Store:remotestore,
Minchars:1})
Where minchars indicates that the user must enter at least how many words to start automatic completion, Queryparam is to the server to pass the name of the parameter, Allquery is required to return all the data when the parameter value. The effect is as follows:
In remote mode, ComboBox also supports server-side paging, at which point Combox will pass the start and limit parameters to the server, indicating the range of data to display, and the server-side code should be processed to return the data.
