zoukankan      html  css  js  c++  java
  • Extjs comboBox的使用,本地的加载数据

    Ext.form.field.comboBox主要配置内容:


    Ext.view.BoundList配置内容:

    代码示例:

    (function(){
        Ext.onReady(function(){
            Ext.regModel('PostInfo',{
                fields:[{
                    name:'province'
                },{
                    name:'post'
                }]
            });
            var postStore = Ext.create('Ext.data.Store',{
                model:'PostInfo',
                data:[{
                    province:'北京',post:'100000'
                },{
                    province:'通县',post:'100110'
                },{
                    province:'昌平',post:'100220'
                },{
                    province:'大兴',post:'100250'
                },{
                    province:'密云',post:'100210'
                },{
                    province:'延庆',post:'113000'
                },{
                    province:'怀柔',post:'101400'
                }]
            });
            Ext.create('Ext.form.Panel',{
                title:'Ext.form.field.comboBox本地数据源显示',
                renderTo:Ext.getBody(),
                bodyPadding:5,
                frame:true,
                height:100,
                270,
                defaults:{
                    labelSeparator:':',
                    labelWidth:70,
                    200,
                    labelAlign:'left'
                },
                items:[{
                    xtype:'combo',
                    listConfig:{
                        emptyText:'未找到匹配项',//当值不再列表的时候提示信息;
                        maxHeight:'auto'//设置下拉列表的最大高度为60像素
                    },
                    name:'post',
                    fieldLabel:'邮政编码',
                    triggerAction:'all',//单击触发按钮显示全部数据
                    store:postStore,//设置数据源;
                    displayField:'province',
                    valueField:'post',//定义值字段;
                    queryMode:'local',
                    forceSelection:true,
                    typeAhead:true,
                    value:'101400'
                }]
            });
        });
    })(); 
     显示效果:

    注意以下问题:
    1、可以输入查询内容的进行查询,但需要从首字开始;
    2、输入编号也是无法完成查询内容的检索
    3、支持自动补充内容值;







  • 相关阅读:
    Tomcat部署方式
    JAVA顺序队列
    JAVA稀疏数组
    JAVA数组
    JAVA运算符
    JAVA数据类型
    《IBM —PC 汇编语言程序设计》 第三章习题
    《IBM —PC 汇编语言程序设计》 第二章习题
    W3school导航条 CSS
    网易新闻CSS
  • 原文地址:https://www.cnblogs.com/babyhhcsy/p/3877648.html
Copyright © 2011-2022 走看看