<!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. [Java][RCP] 记 ProgressView的使用

    进度条效果图

  2. orcherd 汉化

    点击这里下载汉化包,此汉化包是在是在前人的基础上精心整理修改的,后续汉化版本随时升级更新. Orchard汉化包 下载后解压缩后打开后看到如下文件夹(App_Data.Core.Modules.The ...

  3. 从零开始学ios开发（四）：IOS控件（1），Image View、Text Field、Keyboard

    长话短说,谢谢大家的关注,这篇写了好长时间,下面继续学习ios.我将用2到3篇的篇幅来学习iphone上的一些常用控件,包括Image View.Text Field.Keyboard.Slider等 ...

  4. phpstorm自动对齐数组=>，自动加空格

    写完代码后可以点菜单中code-reformat code,快捷键是option+command+L

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

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

  6. 22.I/O特性

    IO资源 IO是与外界沟通和控制的通道,fpga提供了丰富的IO和一些实用的特性. 本文简要的将主要的特性摘录下来做设计参考用.具体参数参考handbook. 第一部分:IO特性概述 -----通过软 ...

  7. 0x0A和0x0D

    这里主要是在windows下面做的小实验,linux没有试 先贴源码 #include <iostream> #include <string> #include <st ...

  8. IT人为什么难以拿到高薪？

    最近在论坛里看到很多人发牢骚,说薪水少,可在我看来,你们这样的人拿得到高薪才怪! 我先问一句:这里有多少人是本科的?有多少人是正规本科的(不算自考,成考和专升本)?有多少人是有学位的?有多少有学位的是 ...

  9. 【收藏】Linux下tomcat内存配置

    常见的内存溢出有以下两种: java.lang.OutOfMemoryError: PermGen space java.lang.OutOfMemoryError: Java heap space ...

  10. JS 面向对象之继承 -- 原型链

    ECMAScript只支持实现继承,其实现继承主要是靠原型链来实现. 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 简单回顾下构造函数.原型和实例的关系: 每个构造函数都有 ...