<!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. AppCan4.0：开发者要做有价值的APP

    在当今的移动盛世,谈论APP“生存”话题未免太过沉重.但面对百万级移动应用大军所产生的激烈竞争,且保证“立而不倒”,这样的探讨就显得格外重要了. 主打“价值牌”才能“一条龙” 有这样一组数据,在我国, ...

  2. Linux后门入侵检测

    蛋疼啊,服务器被入侵成肉鸡了,发出大量SYN请求到某个网站!(瞬间有种被OOXX(强)(奸)的赶脚) 泪奔ING... 源起: Linux服务器日常检查,#ps aux 发现大量httpd进程,和往常 ...

  3. [超简洁]EasyQ框架-应对WEB高并发业务（秒杀、抽奖）等业务

    背景介绍 这几年一直在摸索一种框架,足够简单,又能应付很多高并发高性能的需求.研究过一些框架思想如DDD DCI,也实践过CQRS框架. 但是总觉得复杂度高,门槛也高,自己学都吃力,如果团队新人更难接 ...

  4. 解决Autofac MVC 自动注入在 Areas拆分到不同dll下的注入失败问题

    由于项目业务复杂,创建了多个Areas 并把他们放在了不同的项目中,项目使用AutoFac做的IOC 配置代码为 public class MvcApplication : System.Web.Ht ...

  5. 阅读verilog程序总结

    1.写程序先直接写出时钟信号 //-----------------产生串行时钟scl,为输入时钟的二分频--------- always@(negedge clk)//二分频表示频率小了,周期大了 ...

  6. Matlab实现抽样定理

    Matlab实现抽样定理 正弦信号的抽样: 首先时间跨度选择 -0.2 到 0.2,间隔0.0005取一个点,原信号取 sin⁡(2π*60t) ,则频率为60Hz. 由于需要输出原始信号的波形,我选 ...

  7. JNI文件中命名类与JAVA文件中匹配

    jni.c中注册中 int register_android_boa(JNIEnv *env){    jclass clazz;    static const char* const kClass ...

  8. 二、secureCRT的 使用过程

    准备工作: win7与linux能互相ping通 linux安装了ssh被登陆服务 关闭window 防火墙,,控制面板 下载secureCRT 参考资料:http://zhidao.baidu.co ...

  9. 20145120 《Java程序设计》第7周学习总结

    20145120 <Java程序设计>第7周学习总结 教材学习内容总结 Lambda表达式 例:Comparator<String> byLength = (name1, na ...

  10. Java令牌生成器

    package Token; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; im ...