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

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

将labelWrap配置选项设置为true。这样可以避免截断selectfield上最初显示的文字。稍后当你点击选择字段时;你有两个选择。使用picker或list。只有在picker配置中将其设置为true时，才会使用usePicker。如果您使用的是平板电脑，则会显示包含选项的桌面设备或移动设备默认list。如果在点击选择字段后labelWrap中显示选项，则使用list配置将无效。
使用以下CSS覆盖来避免截断。
```
.x-list-item-label{
    height: 100% !important;
 }
 .x-list-label{
    white-space: pre-wrap !important;
 }
```
此覆盖以及上述labelWrap配置设置为true将使list和selectfield整齐地显示整个文本。但这会覆盖可能影响应用中其他列表外观的样式。

第三种方法可以是覆盖Ext.field.Select并创建自定义选择字段。在这种风格中，你需要覆盖以下方法 - getTabletPicker生成在selectfield上显示的列表。 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的外观。这种方法可能听起来很脏。但如果你想在外观和行为方面做出一些重大改变，它会很有用。

如何在sencha touch 2中包装selectfield选项的文本

1 个答案: