Ext.form.field.ComboBox组合框
生活随笔
收集整理的這篇文章主要介紹了
Ext.form.field.ComboBox组合框
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1、Ext.form.field.ComboBox主要配置
?Ext.form.field.ComboBox主要配置項
| allQuery | String | 發(fā)往服務(wù)器用來查詢?nèi)啃畔⒌牟樵冏址?#xff0c;默認(rèn)為空 |
| autoSelect | Boolean | 是否自動選擇第一個列表值，默認(rèn)為true |
| defaultListConfig | Object | listConfig配置對象包括： emptyText：當(dāng)輸入值在列表中不存在時顯示的信息，默認(rèn)為空文本 loadingText：默認(rèn)加載提示loading minWidth：70，下拉列表默認(rèn)最小寬度為70px maxHeight：300，下拉列表默認(rèn)最大高度為300px shadow："sides"，默認(rèn)的陰影顯示位置 |
| delimiter | String | 在多模式下用于分隔顯示值的分隔符，默認(rèn)為“，” |
| displayField | String | 顯示下拉框的字段名 |
| forceSelection | Boolean | 設(shè)置輸入值是否嚴(yán)格為待選列表中存在的值，true要求輸入值必須在列表中存在，false則允許用戶輸入任何值，默認(rèn)為false |
| listConfig | Object | 下拉列表配置對象 |
| minChars | Number | 下拉表框字段選擇當(dāng)前用戶需要輸入的最小字符數(shù)量 queryMode="remote"默認(rèn)為4 queryMode="local"默認(rèn)為0 editable=false會使自動完成功能失效 |
| multiSelect | Boolean | 是否允許多選 |
| pageSize | Number | 下拉列表框的分頁大小。如果大于0則在下拉列表的頁腳位置自動創(chuàng)建一個分頁工具欄，該項設(shè)置只在mode="remote"時生效 |
| queryDelay | Number | 從鍵盤輸入字符結(jié)束到發(fā)送查詢之間的查詢延遲時間 queryMode="remote"默認(rèn)為500ms queryMode="local"默認(rèn)為0 |
| queryMode | String | 下拉表框的數(shù)據(jù)讀取模式 local：讀取本地數(shù)據(jù) remote：讀取遠(yuǎn)程數(shù)據(jù) |
| queryParam | String | 查詢的名字，默認(rèn)為“query”，將被傳遞到查詢字符串中 |
| selectOnTab | Boolean | 是否使用鍵盤的Tab鍵選擇列表值，默認(rèn)為true |
| store | Ext.data.Store/Array | 列表框綁定的數(shù)據(jù)源，默認(rèn)為undefined |
| triggerAction | String | 單擊觸發(fā)按鈕時執(zhí)行的默認(rèn)操作 有效值包括“all”和“query”， 默認(rèn)為“query”使用raw value進(jìn)行查詢 如果設(shè)置為“all”則會執(zhí)行allQuery中設(shè)置的查詢 |
| typeAhead | Boolean | 設(shè)置在輸入過程中是否自動選擇匹配的剩余部分文本，默認(rèn)為false |
| typeAheadDelay | Number | 輸入過程中自動匹配剩余文本的延時時間，默認(rèn)為250ms |
| valueField | String | 組合框的值字段 |
| valueNotFoundText | String | 值不存在時的提示消息 |
Ext.view.BoundList主要配置項目
| loadingHeight | Number | 加載數(shù)據(jù)時讀取顯示的高度 |
| loadingText | String | 下拉框加載數(shù)據(jù)時的提示信息，只有當(dāng)mode=“remote”時才會生效 |
| maxHeight | Number | 下拉框最大高度 |
| minHeight | Number | 下拉框最小高度 |
| maxWidth | Number | 下拉框最大寬度 |
| minWidth | Number | 下拉框最小寬度 |
2、Ext.form.field.ComboBox本地數(shù)據(jù)源
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Ext.form.ComboBox本地數(shù)據(jù)源</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function () {Ext.define("Province", {extend: "Ext.data.Model",fields: [{ name: "ProvinceID" },{ name: "ProvinceNo" },{ name: "ProvinceName" }]});var store = Ext.create("Ext.data.Store", {model: "Province",data: [{ "ProvinceID": 1, "ProvinceNo": "110000", "ProvinceName": "北京市" },{ "ProvinceID": 2, "ProvinceNo": "120000", "ProvinceName": "天津市" },{ "ProvinceID": 3, "ProvinceNo": "130000", "ProvinceName": "河北省" },{ "ProvinceID": 4, "ProvinceNo": "140000", "ProvinceName": "山西省" },{ "ProvinceID": 5, "ProvinceNo": "150000", "ProvinceName": "內(nèi)蒙古" },{ "ProvinceID": 6, "ProvinceNo": "210000", "ProvinceName": "遼寧省" },{ "ProvinceID": 7, "ProvinceNo": "220000", "ProvinceName": "吉林省" },{ "ProvinceID": 8, "ProvinceNo": "230000", "ProvinceName": "黑龍江" },{ "ProvinceID": 9, "ProvinceNo": "310000", "ProvinceName": "上海市" },{ "ProvinceID": 10, "ProvinceNo": "320000", "ProvinceName": "江蘇省" },{ "ProvinceID": 11, "ProvinceNo": "330000", "ProvinceName": "浙江省" },{ "ProvinceID": 12, "ProvinceNo": "340000", "ProvinceName": "安徽省" },{ "ProvinceID": 13, "ProvinceNo": "350000", "ProvinceName": "福建省" },{ "ProvinceID": 14, "ProvinceNo": "360000", "ProvinceName": "江西省" },{ "ProvinceID": 15, "ProvinceNo": "370000", "ProvinceName": "山東省" },{ "ProvinceID": 16, "ProvinceNo": "410000", "ProvinceName": "河南省" },{ "ProvinceID": 17, "ProvinceNo": "420000", "ProvinceName": "湖北省" },{ "ProvinceID": 18, "ProvinceNo": "430000", "ProvinceName": "湖南省" },{ "ProvinceID": 19, "ProvinceNo": "440000", "ProvinceName": "廣東省" },{ "ProvinceID": 20, "ProvinceNo": "450000", "ProvinceName": "廣 西" },{ "ProvinceID": 21, "ProvinceNo": "460000", "ProvinceName": "海南省" },{ "ProvinceID": 22, "ProvinceNo": "500000", "ProvinceName": "重慶市" },{ "ProvinceID": 23, "ProvinceNo": "510000", "ProvinceName": "四川省" },{ "ProvinceID": 24, "ProvinceNo": "520000", "ProvinceName": "貴州省" },{ "ProvinceID": 25, "ProvinceNo": "530000", "ProvinceName": "云南省" },{ "ProvinceID": 26, "ProvinceNo": "540000", "ProvinceName": "西 藏" },{ "ProvinceID": 27, "ProvinceNo": "610000", "ProvinceName": "陜西省" },{ "ProvinceID": 28, "ProvinceNo": "620000", "ProvinceName": "甘肅省" },{ "ProvinceID": 29, "ProvinceNo": "630000", "ProvinceName": "青海省" },{ "ProvinceID": 30, "ProvinceNo": "640000", "ProvinceName": "寧 夏" },{ "ProvinceID": 31, "ProvinceNo": "650000", "ProvinceName": "新 疆" },{ "ProvinceID": 32, "ProvinceNo": "710000", "ProvinceName": "臺灣省" },{ "ProvinceID": 33, "ProvinceNo": "810000", "ProvinceName": "香 港" },{ "ProvinceID": 34, "ProvinceNo": "820000", "ProvinceName": "澳 門" }]});Ext.create("Ext.form.Panel", {title: "Ext.form.field.ComboBox本地數(shù)據(jù)源",renderTo: Ext.getBody(),bodyPadding: 5,frame: true,height: 100,width: 220,defaults: {labelSeparator: "：",labelWidth: 70,width: 200,labelAlign: "left"},items: [{xtype: "combo",listConfig: {emptyText: "未找到匹配值",maxHeight: 150},name: "Province",fieldLabel: "省份",triggerAction: "all",store: store,displayField: "ProvinceName",valueField: "ProvinceNo",queryMode: "local",forceSelection: true,typeAhead: true,value: "130000" // 默認(rèn)選中 }]});});</script> </head> <body> </body> </html>效果圖：
3、Ext.form.field.ComboBox遠(yuǎn)程數(shù)據(jù)源
HTML代碼：
@{Layout = null; } <!DOCTYPE html> <html> <head><title></title><link href="@Url.Content("~/Scripts/ext-4.0.7-gpl/resources/css/ext-all.css")" rel="stylesheet" type="text/css" /><script src="@Url.Content("~/Scripts/ext-4.0.7-gpl/bootstrap.js")" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function () {Ext.define("Province", {extend: "Ext.data.Model",fields: [{ name: "ProvinceID" },{ name: "ProvinceNo" },{ name: "ProvinceName" }]});var store = Ext.create("Ext.data.Store", {model: "Province",proxy: {type: "ajax",url: "/Province/Index",reader: new Ext.data.JsonReader({ model: "Province" })}});Ext.create("Ext.form.Panel", {title: "Ext.form.field.ComboBox本地數(shù)據(jù)源",renderTo: Ext.getBody(),bodyPadding: 5,frame: true,height: 100,width: 220,defaults: {labelSeparator: "：",labelWidth: 70,width: 200,labelAlign: "left"},items: [{xtype: "combo",listConfig: {emptyText: "未找到匹配值",maxHeight: 150},name: "Province",fieldLabel: "省份",triggerAction: "all",store: store,displayField: "ProvinceName",valueField: "ProvinceNo",queryMode: "remote",forceSelection: true,typeAhead: true}]});});</script> </head> <body> </body> </html>cs代碼
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;using Northwind.Domain.Entities; using Northwind.Data; using Northwind.Service;namespace Northwind.Web.Controllers {public class ProvinceController : Controller{private IProvinceService provinceService;public ProvinceController(IProvinceService provinceService){this.provinceService = provinceService;}public ActionResult ComboBox(){return View();}public JsonResult Index(){return Json(provinceService.GetAll(), JsonRequestBehavior.AllowGet);}} }效果圖：
轉(zhuǎn)載于:https://www.cnblogs.com/libingql/archive/2012/04/17/2454630.html
總結(jié)
以上是生活随笔為你收集整理的Ext.form.field.ComboBox组合框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高级筛选的以公式结果为条件
- 下一篇： psftp