<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
        <script type="text/javascript" src="ExtJs/ext-all.js"></script>
        <script type="text/javascript" src="ExtJs/bootstrap.js"></script>
        <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

    <script type="text/javascript">
            Ext.onReady(function() {
                /*
                Ext.regModel('PostInfo', {
                    fields: [{name: 'province'}, {name: 'post'}]
                });
                var postStore = Ext.create('Ext.data.Store', {
                    model: 'PostInfo',
                    data: [
                        {province: 'BeiJing', post: '10000'},
                        {province: 'TongXian', post: '10001'},
                        {province: 'Changping', post: '10002'},
                        {province: 'DangXing', post: '10003'},
                        {province: 'Bg', post: '10004'},
                        {province: 'Yangqing', post: '10500'},
                        {province: 'Sunyi', post: '10006'},
                        {province: 'HuaiRou', post: '10007'}
                    ]
                });
                */
                Ext.define('PostInfo', {
                    extend: 'Ext.data.Model',
                    fields: [{name: 'province'}, {name: 'post'}]
                });
                var postStore = Ext.create('Ext.data.Store', {
                    'model': 'PostInfo',
                    'data': [
                        {province: 'BeiJing', post: '10000'},
                        {province: 'TongXian', post: '10001'},
                        {province: 'Changping', post: '10002'},
                        {province: 'DangXing', post: '10003'},
                        {province: 'Bg', post: '10004'},
                        {province: 'Yangqing', post: '10500'},
                        {province: 'Sunyi', post: '10006'},
                        {province: 'HuaiRou', post: '10007'}
                    ]
                });

                Ext.create('Ext.form.Panel', {
                    title: 'Ext.form.field.ComboBox.Sample',
                    renderTo: Ext.getBody(),
                    bodyPadding: 5,
                    frame: true,
                    height: 1000,
                    width: 870,
                    defaults: {
                        labelSeparator: ':',
                        labelWidth: 170,
                        width: 300,
                        labelAlign: 'left'
                    },
                    items: [{
                        xtype: 'combo',
                        listConfig: {
                            emptyText: 'none match',
                            maxHeight: 260
                        },
                        name: 'post',
                        fieldLabel: 'postcode',
                        triggerAction: 'all',
                        store: postStore,
                        displayField: 'province',
                        valueField: 'post',
                        queryMode: 'local',
                        forceSelection: true,
                        typeAhead: true,
                        value: '10002'
                    }]
                });
            });
    </script>
</head>
<body>
    <div id='form'></div>
        <div id='form1'></div>

</body>
</html>

ExtJs之Ext.form.field.ComboBox组合框的更多相关文章

  1. ExtJs之Ext.form.field.TimePicker DatePicker组合框

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  2. Ext.form.field.Picker (ComboBox、Date、TreePicker、colorpick.Field)竖向滚动导致布局错误

    ComboBox.Date.TreePicker.colorpick.Field这些继承了Ext.form.field.Picker的控件. 在6.0.0和6.0.1中,在界面中存在竖向滚动条时,点击 ...

  3. 表单（上）EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

    EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...

  4. ExtJs Ext.form.field.TextArea+Ckeditor 扩展富文本编辑器

    Ext.define("MyApp.base.BaseTextArea", { extend: "Ext.form.field.TextArea", xtype ...

  5. ExtJS4.2学习(17)表单基本输入控件Ext.form.Field（转）

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...

  6. 重写 Ext.form.field 扩展功能

    直接代码,放项目overrides文件夹中即可 //重写类 表单父类 //支持allowBlank动态绑定 Ext.define("override.form.field.Base" ...

  7. 47. Ext.form.Field.prototype.msgTarget

    转自:https://blog.csdn.net/a1542aa/article/details/24295791 ExtJS.form中msgTarget Ext表单提示方式:msgTarget:有 ...

  8. combobox组合框

    最近在改BUG的时候发现,combobox组合框如果选择的是Dropdown模式在初始化combobox对象时候有如下操作 1.SetDlgItemInt(IDC_WB_FONTSIZECOMBOX, ...

  9. 学习EXTJS6（8）基本功能-表单的基础表字段Ext.form.field.Basic

    Ext.form.field.Basic是表单字段的基类. Ext.form.field.Text Ext.form.field.TextArea Ext.form.field.Number Ext. ...

随机推荐

  1. 函数调用和inline作用

    函数调用的开销: 函数被调用时,要有函数调用和返回.要保存当前程序上下文信息,以便函数调用完毕后返回原来的地方,继续执行程序.将函数的参数进行压栈.出栈,执行函数,函数调用完毕后释放内部变量占用的内存 ...

  2. JavaScript高级程序设计之JSON

    IE8以下请求助神之Douglas Crockford:https://github.com/douglascrockford/json-js JSON是一种格式化的字符串,特别适合在网络上传输,由D ...

  3. RTP、RTCP

    http://blog.chinaunix.net/uid-22670933-id-1771676.html

  4. iOS学习之Object-C语言继承和初始化方法

    一.继承 1.面向对象的三大特性:封装,继承,多态.      面向对象提供了继承特性.把公共的方法和实例变量写在父类里,子类只需要写自己独有的实例变量和方法即可.继承既能保证类的完整,又能简化代码. ...

  5. 【EF Code First】 一对多、多对多的多重关系配置

    这里使用用户表(User)和项目(Project)表做示例 有这样一个需求: 用户与项目的关系是:一个用户可以发多个项目,可以参加多个项目,而项目可以有多个参与成员和一个发布者 [其中含1-n和n-n ...

  6. c中static作用

      1. static 变量 静态变量的类型 说明符是static. 静态变量当然是属于静态存储方式,但是属于静态存储方式的量不一定就是静态变量. 例如外部变量虽属于静态 存储方式,但不一定是静态变量 ...

  7. file_get_contents函数和curl函数不能用

    某天file_get_contents()突然不能用了,检查了下php配置文件 allow_url_fopen=on 没问题   各种重启也没用 最后在ssh下执行 chmod 755 /etc/re ...

  8. Python - DICT 字典排序 - OrderedDict

    官方地址: https://docs.python.org/2/library/collections.html#collections.OrderedDict >>> # regu ...

  9. APM飞控修改数传模块方法

    APM飞控修改数传模块方法 硬件 ARDUCOPTER第二代 数传模块(USB接口) 数传模块(telem接口) usb-ttl模块 修改方法 注意:APM固件版本和数传模块估计版本是分开的,但有一定 ...

  10. 硬件相关-ADC原理(未完成)

    一.模数转换的一般步骤: 1)采样和保持 为了把模拟信号转换成对应的数字信号,必须首先将模拟量每隔一定时间抽取一次样值,使时间上连续变化的模拟量变为一个时间上断续变化的模拟量,这个过程称为采样. 为了 ...