ExtJS Learning Notes ComboBox component

Source: Internet
Author: User

ComboBox Components

(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>


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:

SelectObject R):Find items by model or key value

ExtJS Learning Notes ComboBox component

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.