ExtJs本地数据源的组合框---------下拉框

2019独角兽企业重金招聘Python工程师标准>>>

Ext.form.field.Picker主要配置项目表
配置项            类型            说明
editable---------Boolean--------设置为false则不允许用户编辑，默认为true
<span style="color: #3366ff;">matchFieldWidth--Boolean--------拾取器是否自动匹配字段宽度，默认为true</span>
pickerAlign------Boolean--------拾取器的对齐位置，默认为left
<span style="color: #3366ff;">pickerOffset-----Boolean--------附加到对齐位置上的偏移量，默认为underfined</span>


Ext.view.BoundList主要配置项目表
配置项            类型           说明
<span style="color: #3366ff;">loadingHeight----Number--------设置加载数据时读取提示的高度</span>
loadingText------String--------当下拉框加载数据时显示的提示信息，
只有当mode='remote'时才会生效
<span style="color: #3366ff;">maxHeight--------Number--------设置下拉列表的最大高度</span>
maxWidth---------Number--------设置下拉列表的最大宽度
<span style="color: #3366ff;">minHeight--------Number--------设置下拉列表的最小高度</span>

minWidth---------Number--------设置下拉列表的最小宽度

代码如下：

<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:'北京',post:'100000'},   
        {province:'通县',post:'101100'},   
        {province:'昌平',post:'102200'},   
        {province:'大兴',post:'102600'},   
        {province:'密云',post:'101500'},   
        {province:'延庆',post:'102100'},   
        {province:'顺义',post:'101300'},   
        {province:'怀柔',post:'101400'},   
        ]   
    });   
    //创建表单   
    Ext.create('Ext.form.Panel',{   
        title:'Ext.form.field.ComboBox本地数据源示例',   
        renderTo:Ext.getBody(),   
        bodyPadding:5,   
        frame:true,   
        height:100,   
        width:270,   
        defaults:{//统一设置表单字段默认属性   
        labelSeparator:'：',//分隔符   
        labelWidth:70,//标签宽度   
        width:200,//字段宽度   
        labelAlign:'left'//标签对齐方式   
    },   
        items:[{   
            xtype:'combo',   
            listConfig:{   
            emptyText:'未找到匹配值',//当值不在列表时的提示信息   
            maxHeight:60//设置下拉列表的最大高度为60像素   
        },   
        name:'post',   
        fieldLabel:'邮政编码',   
        maxHeight:300,   
        triggerAction:'all',//单击触发按钮显示全部数据   
        store:postStore,//设置数据源   
        displayField:'province',//定义要显示的字段   
        valueField:'post',//定义值字段   
        queryMode:'local',//本地模式   
        forceSelection:true,//要求输入值必须在列表中存在   
        typeAhead:true,//允许自动选择匹配的剩余部分文本   
        value:'102600'//默认选择大兴   
        }]   
    });   
});   
</script> 

这样就可以显示具体的位置，而后台却是真实的邮编号码！！！

转载于:https://my.oschina.net/Android1989/blog/170589