<!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. [C#] 记-TinyMapper使用

    What is TinyMapper TinyMapper - a tiny and quick object mapper for .Net. The main advantage is perfo ...

  2. Php+Redis 实现Redis提供的lua脚本功能

    <?php require_once "predis-0.8/autoload.php"; $config['schema'] = 'tcp'; $config['host' ...

  3. hdu 1250 Hat's Fibonacci

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1250 Hat's Fibonacci Description A Fibonacci sequence ...

  4. 使用VMDepot镜像快速部署CKAN开放数据门户

    最新发布的CKAN VMDepot镜像针对中国用户强化了中文支持,提升了与MS Office办公软件的互操作性,并集成了常用插件和最佳实践配置参数. 使得CKAN原本十分复杂繁琐的部署流程变得非常简单 ...

  5. Python实现kNN（k邻近算法）

    Python实现kNN(k邻近算法) 运行环境 Pyhton3 numpy科学计算模块 计算过程 st=>start: 开始 op1=>operation: 读入数据 op2=>op ...

  6. qt 焦点设置策略

    focusPolicy 一个QWidget获得焦点的方式受 focusPolicy 控制 Qt::TabFocus 通过Tab键获得焦点 Qt::ClickFocus 通过被单击获得焦点 Qt::St ...

  7. Daily Scrum2

    今天我们小组开会内容分为以下部分: part 1: 之前的失败教训: part 2: 针对Anti-spam and anti-abuse module模块的任务分工: part 3: 之后小组成员必 ...

  8. TF-IDF与余弦相似性的应用（一）：自动提取关键词

    这个标题看上去好像很复杂,其实我要谈的是一个很简单的问题. 有一篇很长的文章,我要用计算机提取它的关键词(Automatic Keyphrase extraction),完全不加以人工干预,请问怎样才 ...

  9. ubuntu mysql 使用

    环境:ubuntu 12.04.5    mysql-server-5.5 安装:sudo apt-get install mysql-server-5.5 (服务端 第一台虚拟机) sudo apt ...

  10. C#读书笔记之并行任务

    这两天遇到一个多线程任务优化的问题,现在解决了,把心得用例子的形式记下来. 假设有四个任务: 任务1:登陆验证(CheckUser) 任务2:验证成功后从Web服务获取数据(GetDataFromWe ...