`
珞珈的木野狐
  • 浏览: 8972 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

Extjs Combo控件 下拉不能显示全部候选项的解决方法

阅读更多
例子: 在ViewPort.ui.js中有一个combo 控件初始化时,只能显示当前选中项,不能显示全部候选项。
    1、按照网上google到的资料中显示,需要将triggerAction属性设置为"all",设置为"query",或者不设置都不能正常显示全部候选项。刚开始由于是静态绑定数据。设置triggerAction后该问题得到解决。如下:
    item:[
        {
            xtype: 'combo',
            id: "cbdomain",
            x: 60,                                        
            y: 10, 
            width: 120,
            editable: false,
            store:[["telecom","telecom"],["animal","animal"]],
            value:'telecom',
            allowBlank: false,
            enabled:false,
            triggerAction: "all"    
        },{....}
    ]

   2、后由于需求发生改变,需要从后台取数据,动态生成combo 的下拉选项。将store指给一个异步数据操作:getAllDomainstore。发现上述问题重新出现。又只能显示当前选中项了。 在网上反复查找没有找到相应解决方案。后自己实验发现,可通过设置displayField属性,使得该问题得到圆满解决。如下:
    item:[
        {
            xtype: 'combo',
            id: "cbdomain",
            x: 60,                                        
            y: 10, 
            width: 120,
            editable: false,
            store:getAllDomainstore,
            mode: 'remote',
            valueFiled: 'domdesc',
            displayField:'domdesc',
            allowBlank: false,
            enabled:false,
            triggerAction: "all",
            selectOnFocus : true,
            forceSelection : true
        },{.....}
    ]

    可能由于Extjs 中的Combo 采用动态获取数据时,显示字段和值字段并不能事先确定下来。所以动态获取数据的combo必须严格设置displayFiled和valueField属性,否则会影响数据展示结果。

附:
   一、数据操作 store 的定义。
   文件:MainStore.js
   如下:
   var getAllDomainstore = new Ext.data.Store({    
        proxy: new Ext.data.HttpProxy({
            url:'RetrieveData',    
            method:'POST'
        }), 
   
        reader: new Ext.data.XmlReader
        (
            { 
                totalProperty: "pagecount", 
                record: 'domain'                
            },
            [
                {name:"id",type:'int'},
                {name:"domdesc"}
            ]
        )
    }); 

    getAllDomainstore.on('beforeload',function(){  
        Ext.apply(  
        this.baseParams,  
        {  
            webAction:'getAllDomains',
            username:Ext.ComponentMgr.get('cusername').getValue(),
            domain: 'telecom'        
        });  
    }); 

    getAllDomainstore.on('load',onstoreStoreLoad, getAllDomainstore, true);

    function onstoreStoreLoad()
    {   
        if (getAllDomainstore.getCount() > 0)
        {
            // 一点小插曲:动态获取的数据中总会有一个空白记录,有时候空白记录并不是必要的,但是我没有找到清除空白记录的设置,还好无论查询情况如何,这条空白记录总是第一条记录(index = 0)
            // 于是我在每次load的时候,将这条记录强行删除了,如下:
            getAllDomainstore.remove(getAllDomainstore.getAt(0));   
        
            Ext.ComponentMgr.get("cbdomain").setValue('telecom');        
            Ext.ComponentMgr.get("cbdomian_deploy").setValue('telecom');
            Ext.ComponentMgr.get("cbdomain3").setValue('telecom');
            Ext.ComponentMgr.get("cbdomain5").setValue('telecom');
            Ext.ComponentMgr.get("cbdomain6").setValue('telecom');
            Ext.ComponentMgr.get("cbdomain_MF_TraingCase").setValue('telecom');        
        }
    }

    二、载入的时机:
    载入数据:登录成功后。
    文件: ModalForm.js
    如下:
    Ext.Ajax.request({ 
        url   : 'Login', 
        method: 'POST', 
        params:{
            webAction:'login',
            username: curusername, //Ext.ComponentMgr.get('username').getValue(),
            password: ''            
        },                                                
        success: function(response) {
            getAllDomainstore.load({
                params:{
                    webAction:'getAllDomains',            
                    username:Ext.ComponentMgr.get('cusername').getValue(),
                    domain:"telecom"
                }
           });    
    });
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics