Home > Developer > Web Develop
(1) The ComboBox control supports auto-completion, remote loading, and many other features.
(2) ComboBox is like the synthesis of traditional HTML text <input> fields and <select> domains, the user can freely type in the field, or select a value from the drop-down selection list. The default user can enter an approved value, even if it does not appear in the select list; set Forceselection to "true" to block free-form values and restrict them to items in the list.
(3) The items in the select list are populated from any Ext.data.Store (including the remote Store). The data items in the store are mapped separately in the display text and hidden values of each option, configured via Valuefield and Displayfield.
(4) If the store is not remote, for example: Relying only on local data and being loaded from the front end, you should ensure that the setting Querymode is "' local", as this will improve the user accordingly.
1. Example:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>Insert Title here</title><Linkrel= "stylesheet"type= "Text/css"href=".. /ext-js-4.2.1/resources/css/ext-all.css " /><Scripttype= "Text/javascript"src=".. /ext-js-4.2.1/ext-all.js "></Script><Scripttype= "Text/javascript"src=".. /ext-js-4.2.1/locale/ext-lang-zh_cn.js "></Script><Scripttype= "Text/javascript">Ext.onready (function() { //creating an array data source varCombostore= NewExt.data.ArrayStore ({fields: ['ID','name'], data: [[1,'Java'],[2,'Android'],[3,'iOS']] }); //Create a ComboBox varComboBox= NewExt.form.ComboBox ({fieldlabel:'Software Development', Store:combostore, Displayfield:'name', LabelAlign:' Right', Valuefield:'ID', TriggerAction:' All', Emptytext:'Please select', Allowblank:false, Blanktext:'Please choose your hobbies and interests', Editable:false, Model:'Local' }); Combobox.on ('Select',function() {alert (Combobox.getrawvalue ()); }); varform= NewExt.form.FormPanel ({frame:true, Title:'Form Title', Style:'margin:10px',//draggable:true,//Can be draggedHTML:'<div style = "padding:10px" > here is the form content </div>', items: [combobox]}); varwin= NewExt.window ({title:'Form window', Width: -, Height: $, draggable:true, HTML:'<div> Here is the contents of the form </div>', resizable:true, modal:true, closable:true, maximizable:true, minimizable:true, items:form}); Win.show (); }); </Script></Head><Body> <!--Description: (1) var combostore = new Ext.data.ArrayStore (): Creates a new array data source. (2) fields: [' id ', ' name ']: The data source contains two columns, the column names are ' id ', ' name ', respectively. (3) Data: [[1, ' Java '],[2, ' Android '],[3, ' iOS ']: Data source, example: Id:1,name:java. (4) var combobox = new Ext.form.ComboBox (): Creates a new drop-down list. (5) Store:combostore: The data source is the data source created above, which is a required attribute of the ComboBox. (6) Displayfield: ' Name ', Valuefield: ' ID ': The combobox corresponds to the display column and the value column of the data source, and these two properties are also required. (7) Mode: ' Local ': Specifies that the data source is an on-premises data source, and if it is a locally created data source, this property is also required, if the data source is from the server, set to ' remote ' to indicate that the data source is from the server, we will explain after the server interaction. (8) TriggerAction: "All": Please set to "all", otherwise the default is "query" case, you select a value, then pull down, only the matching option appears, if set to all, each drop-down will show all options. (9) Editable:false: By default, the contents of the ComboBox can be edited, and the property is set to false so that the drop-down list can only be selected and cannot be edited. (Combobox.on) (' Select ', function () {alert (Combobox.getrawvalue ())}): Alert out the display value of the drop-down list when selected. -</Body></HTML>
2.:
3. Common Properties and methods:
(1) Properties:
1.valueField: "Character type", Value field
2.displayField: "Character type", display text field
3.editable:false//false is not editable, the default is True
4.triggerAction: "All"//set to "all", otherwise the default is "query" case, you select a value, then pull down, only the matching option appears, if set to "all", each drop will show all options
5.hiddenname:string//True when submitting this combo name, be sure to note.
6.typeahead:true,//delay query, with the following parameters
7.typeaheaddelay:3000,//Default 250
(2) Method:
Ext.form.field.ComboBoxExtJS Learning Notes ComboBox component
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
