<!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. Gearman 安装使用教程

    Gearman是一个分发任务的程序框架,可以用在各种场合,Gearman更偏向于任务分发功能.它的任务分布非常简单,简单得可以只需要用脚本即可完成. Gearman 分布式任务实现原理上只用到2个字段 ...

  2. 【Javascript】: for循环中定义的变量在for循环体外也有效

    for循环中定义的变量在for循环体外也有效 <script> (function(){ var a = 111; for(var i=0;i<5;i++){ var carl = ...

  3. git的初步使用

    1.在GitHub上建立项目登录GitHub后,你可以在右边靠中那里找到一个按钮“New Repository”,点击过后,填入项目名称.说明和网址过后就可以创建了,然后会出现一个提示页面,记下类似g ...

  4. [转]ldconfig几个需要注意的地方

    [转]ldconfig几个需要注意的地方 http://www.cnblogs.com/arci/archive/2011/03/19/1988952.html 1. 往/lib和/usr/lib里面 ...

  5. .net中运用solr提升搜索效率(入门)

    概述: 在开发网站的时候经常有要对某些内容查询的需求.此时如果基于数据库查询来做搜索功能,由于要对多个字段做模糊匹配,效率往往非常糟糕.这种情况就可以用Solr来提升搜索的效率.Solr是一个独立的企 ...

  6. [shell基础]——tr命令

    (1) tr 字符替换 测试文本内容 # cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4. ...

  7. Machine Learning 学习笔记 (3) —— 泊松回归与Softmax回归

    本系列文章允许转载,转载请保留全文! [请先阅读][说明&总目录]http://www.cnblogs.com/tbcaaa8/p/4415055.html 1. 泊松回归 (Poisson ...

  8. js selector libray

    http://sizzlejs.com/ http://selectivizr.com/

  9. 二叉查找树(BST)

    二叉查找树(BST):使用中序遍历可以得到一个有序的序列

  10. 【每日scrum】NO.6

    Yesterday:组内各种乱八七糟的问题,还有自己的效率问题 Today:进行小范围的测试实验 Problem:在显示各景点构成的邻接矩阵的时候,第一次编译未出现任何错误的提示,但是在程序运行时,无 ...