3

我正在尝试使用很长的选项文本显示 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/>没有用。

4

1 回答 1

8

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

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

  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点击选择字段时显示的外观。这种方法可能听起来很脏。但它很有用，如果你想在外观和行为上做出一些巨大的改变。

于 2013-05-13T12:04:21.680 回答