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、支持自动补充内容值;







  • 相关阅读:
    最全Redis面试题
    mabatisplus-update
    windows下安装redis并部署服务
    登录方案
    redis
    IntelliJ IDEA Debug模式启动项目
    物流跟踪 调用快递鸟API
    springboot中文官方文档
    国内物流地址
    什么是电磁兼容?什么是EMC设计?
  • 原文地址:https://www.cnblogs.com/babyhhcsy/p/3877648.html
Copyright © 2011-2022 走看看