Ext Combox的相关问题

Combox
   Ext.form.Combox
  
   问题1、实现Combox下拉列表的悬浮提示
   方法:
   1).开启Ext的提示功能,Ext.QuickTips.init();
   2).var tpl = new Ext.XTemplate('<tpl for="."><div class="x-combo-list-item" ext:qtitle=""
                                  ext:qtip="{attrName}">{attrName:ellipsis(20)}</div></tpl>');
      在Combox的tpl属性中加入  即tpl : tpl    这样就有效果了
      特别注意:{attrName} 中的attrName是要悬浮提示的内容  ellipsis(20) 设置文本的现实长度
  
   问题2、如何在Combox的下拉框中加入滚动条,以显示出长文本
   方法:
   1).加入展开时的事件驱动
      tagFeature.on("expand",function(){
          this.innerList.dom.style.overflowX="auto"; //改变横向overflow的样式,显示横向的滚动条
     });
     tagFeature 表示Combox  前文:var tagFeature = new Ext.form.Combox();
    
    
  Example :-- begin
     var tagFeature = new Ext.form.ComboBox({
     id : "tagFeatureId",   // Combox的id
     hiddenName : "tagFeature", 
     fieldLabel : "标签特征", 
     emptyText : ' ',
     valueField : 'attrCode',  // 值字段  与fields : ['attrCode', 'attrName'],对应
     displayField : 'attrName',  //展示字段   与fields : ['attrCode', 'attrName']对应
     typeAhead : true,   //值为true时在经过指定延迟(typeAheadDelay)后弹出并自动选择输入的文本 默认为false
     mode : 'local',
     width : 135,
     //listWidth : 500,
     //tpl : tpl,   
     triggerAction : 'all',
     selectOnFocus : true,
     editable : false,   // 是否可编辑
     store : new Ext.data.JsonStore({
      url : 'userTagSearch.do?action=queryTagFeature',
      fields : ['attrCode', 'attrName'],
      autoLoad : true,
      root : 'records',
      listeners : {
       load : function(store, records, options) {
        Ext.getCmp('tagFeatureId').setValue('');
       }
      }
     })
    });
    
    tagFeature.on("expand",function(){
           this.innerList.dom.style.overflowX="auto"; //改变横向overflow的样式,显示横向的滚动条
    });
    -- end
    
    问题3、设置Combox的默认值
    方法:
    一般是在数据加载时设置默认值,当然也可以在加载后设置
    加载时设置:
        在 store的配置项中
        store : new Ext.data.JsonStore({
            url : 'userTagSearch.do?action=queryTagFeature',
            fields : ['attrCode', 'attrName'],
            autoLoad : true,
            root : 'records',
            listeners : {
               <!---------  在这里 begin -------->
             load : function(store, records, options) {
              Ext.getCmp('tagFeatureId').setValue('');   // 这里的setValue(id) id为valueField对应的值
             }
             <!---------  在这里 end -------->
            }
          }),
          
      加载后在外部设置:
        Ext.getCmp('labelPageId').store.reload();  -- 让Combox的store重新load,即reload()
       Ext.getCmp('labelPageId').store.on('load',function(){   -- 绑定load事件,触发function()
         Ext.getCmp('labelPageId').setValue(comboDefaultValue);
       });

你可能感兴趣的:(Ext Combox的相关问题)