2011-05-30 135 views
19

有什么办法可以将ExtJS(版本4)组合框的下拉菜单的宽度设置得比实际输入框的宽度宽吗?ExtJS组合框下拉宽度比输入框宽度宽吗?

我有一个comboxbox,我想要200px左右,但我有分页结果下拉,该宽度甚至不足以显示所有分页栏的控件。

这里是我的代码来创建组合:

var add_combo = Ext.create('Ext.form.field.ComboBox', 
    { 
     id    : 'gbl_add_combo', 
     store   : Ext.create('Ext.data.Store', 
     { 
      remoteFilter : true, 
      fields : ['gb_id', 'title'], 
      proxy : 
      { 
       type  : 'ajax', 
       url   : 'index.php/store/get_items', 
       reader  : 
       { 
        type   : 'json', 
        root   : 'records', 
        totalProperty : 'total', 
        successProperty : 'success' 
       }, 
       actionMethods : 
       { 
        read : 'POST', 
        create : 'POST', 
        update : 'POST', 
        destroy : 'POST' 
       } 
      } 
     }), 
     listConfig: 
     { 
      loadingText: 'Searching...', 
      emptyText: 'No results found' 
     }, 
     queryMode  : 'remote', 
     hideLabel  : true, 
     displayField : 'title', 
     valueField  : 'gb_id', 
     typeAhead  : true, 
     hideTrigger  : true, 
     emptyText  : 'Start typing...', 
     selectOnFocus : true, 
     width   : 225, 
     minChars  : 3, 
     cls    : 'header_combo', 
     pageSize  : 15 
    }); 
+0

显示您的代码段 – Ibu 2011-05-30 19:27:15

+0

加入我的代码的问题 – 2011-05-30 21:05:42

回答

35

有两个环节进行。首先,您需要在组合框配置中设置matchFieldWidth:false。然后,您可以在listConfig部分中指定宽度属性以仅指定下拉列表,同时在主配置中指定组合框本身的宽度。

这与上面的版本不同,它只是让您指定listWidth属性。

+0

完美,谢谢! – 2011-06-02 13:39:57

+0

感谢分享信息西蒙。 – netemp 2011-09-22 06:49:04

+0

嗨西蒙,我应用了这个解决方案,尽管它允许模板有更大的宽度,但是现在没有显示值列表。我在这里发布了这个问题 - http://stackoverflow.com/questions/7526232/extjs-4-how-to-display-template-having-width-greater-than-the-width-of-combo-bo - could你在这个任何想法的指导。提前致谢。 – netemp 2011-09-23 08:30:08

3

我没有找到方法来动态改变'matchFieldWidth'属性。所以,我发现了另一个解决方案:

{ 
    xtype: 'combobox', 
    fieldLabel: 'Short Options', 
    queryMode: 'local', 
    store: ['Yes', 'No', 'Maybe'], 
    matchFieldWidth: false, 
    listConfig: { 
    listeners: { 
     beforeshow: function(picker) { 
     picker.minWidth = picker.up('combobox').getSize().width; 
     } 
    } 
    } 
} 

来源:http://www.sencha.com/forum/showthread.php?293120-Setting-BoundList-minWidth-to-the-width-of-a-parent-ComboBox-without-matchFieldWidth