extjs - 如何在 sencha touch 2 中换行 selectfield 选项的文本

Question

我正在尝试显示 Sencha Touch 2 selectfield选项文本很长，但文本会被省略号截断，例如 Very long option t... .

如何在一个选项中显示几行？

代码:

{
xtype: 'selectfield',
options:[
    {
       text: 'Very long option I wish to splint into two separate lines',
       value: 0
     },
    {
       text: 'Another very long option I wish to splint into two separate lines', 
       value: 1
    }
 ]
}

我尝试过使用 \n和 <br/>但不工作。

Answer 1

有 3 两种方法可以做到这一点。

1. 使用 labelWrap 配置选项设置为 true。这将避免截断最初出现在 selectfield 上的文本。稍后当您点击选择字段时；你有两个选择。使用 picker 或 list。 picker 只有在 usePicker 配置中设置为 true 时才会使用。如果您在平板电脑、台式机或移动设备上，默认 list 将显示包含选项。如果在点击选择字段后选项显示在 list 中，则使用 labelWrap 配置将无用。

2. 使用以下 CSS 覆盖以避免截断。

   .x-list-item-label{
       height: 100% !important;
    }
    .x-list-label{
       white-space: pre-wrap !important;
    }
   

   这个覆盖以及上面提到的 labelWrap 配置设置为 true 将使 list 和 selectfield 整齐地显示整个文本。但这会覆盖可能影响应用中其他列表外观的样式。

3. 第三种方法是覆盖 Ext.field.Select 并创建自定义选择字段。在这种风格中，您只需覆盖以下方法 - getTabletPicker 生成在点击选择字段时显示的列表。来自 ST 源的代码是休闲 -

   getTabletPicker: function() {
   var config = this.getDefaultTabletPickerConfig();
   
   if (!this.listPanel) {
       this.listPanel = Ext.create('Ext.Panel', Ext.apply({
           centered: true,
           modal: true,
           cls: Ext.baseCSSPrefix + 'select-overlay',
           layout: 'fit',
           hideOnMaskTap: true,
           items: {
               xtype: 'list',
               store: this.getStore(),
               itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + ':htmlEncode}</span>',
               listeners: {
                   select : this.onListSelect,
                   itemtap: this.onListTap,
                   scope  : this
               }
           }
       }, config));
   }
   
   return this.listPanel;
   }
   

   查看 itemTpl 和 cls 配置行。这里两个选项都设置了为 list 定义的样式。这些将决定在点击选择字段时显示的 list 的外观。这种方法可能听起来很脏。但是，如果您想对外观和行为进行一些重大改变，它会很有用。