Ext.form.field.ComboBox组合框

最新推荐文章于 2018-07-04 14:14:55 发布

weixin_34355715

最新推荐文章于 2018-07-04 14:14:55 发布

阅读量71

点赞数

文章标签： xhtml javascript json ViewUI

原文链接：http://www.cnblogs.com/libingql/archive/2012/04/17/2454630.html

版权

1、Ext.form.field.ComboBox主要配置

Ext.form.field.ComboBox主要配置项

配置项	类型	说明
allQuery	String	发往服务器用来查询全部信息的查询字符串，默认为空
autoSelect	Boolean	是否自动选择第一个列表值，默认为true
defaultListConfig	Object	listConfig配置对象包括： emptyText：当输入值在列表中不存在时显示的信息，默认为空文本 loadingText：默认加载提示loading minWidth：70，下拉列表默认最小宽度为70px maxHeight：300，下拉列表默认最大高度为300px shadow："sides"，默认的阴影显示位置
delimiter	String	在多模式下用于分隔显示值的分隔符，默认为“，”
displayField	String	显示下拉框的字段名
forceSelection	Boolean	设置输入值是否严格为待选列表中存在的值，true要求输入值必须在列表中存在，false则允许用户输入任何值，默认为false
listConfig	Object	下拉列表配置对象
minChars	Number	下拉表框字段选择当前用户需要输入的最小字符数量 queryMode="remote"默认为4 queryMode="local"默认为0 editable=false会使自动完成功能失效
multiSelect	Boolean	是否允许多选
pageSize	Number	下拉列表框的分页大小。如果大于0则在下拉列表的页脚位置自动创建一个分页工具栏，该项设置只在mode="remote"时生效
queryDelay	Number	从键盘输入字符结束到发送查询之间的查询延迟时间 queryMode="remote"默认为500ms queryMode="local"默认为0
queryMode	String	下拉表框的数据读取模式 local：读取本地数据 remote：读取远程数据
queryParam	String	查询的名字，默认为“query”，将被传递到查询字符串中
selectOnTab	Boolean	是否使用键盘的Tab键选择列表值，默认为true
store	Ext.data.Store/Array	列表框绑定的数据源，默认为undefined
triggerAction	String	单击触发按钮时执行的默认操作有效值包括“all”和“query”，默认为“query”使用raw value进行查询如果设置为“all”则会执行allQuery中设置的查询
typeAhead	Boolean	设置在输入过程中是否自动选择匹配的剩余部分文本，默认为false
typeAheadDelay	Number	输入过程中自动匹配剩余文本的延时时间，默认为250ms
valueField	String	组合框的值字段
valueNotFoundText	String	值不存在时的提示消息

Ext.view.BoundList主要配置项目

配置项	类型	说明
loadingHeight	Number	加载数据时读取显示的高度
loadingText	String	下拉框加载数据时的提示信息，只有当mode=“remote”时才会生效
maxHeight	Number	下拉框最大高度
minHeight	Number	下拉框最小高度
maxWidth	Number	下拉框最大宽度
minWidth	Number	下拉框最小宽度

2、Ext.form.field.ComboBox本地数据源

代码：

<!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本地数据源</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": "内蒙古" },
                    { "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本地数据源",
                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" // 默认选中
                }]
            });
        });
    </script>
</head>
<body>
</body>
</html>

效果图：

3、Ext.form.field.ComboBox远程数据源

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本地数据源",
                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);
        }
    }
}

效果图：

转载于:https://www.cnblogs.com/libingql/archive/2012/04/17/2454630.html

weixin_34355715

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext.form.field.ComboBox组合框

1、Ext.form.field.ComboBox主要配置Ext.form.field.ComboBox主要配置项配置项类型说明allQueryString发往服务器用来查询全部信息的查询字符串，默认为空autoSelectBoolean是否自动选择第一个列表值，默认为truedefaultListConfigObject...
复制链接

扫一扫