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

我试图用很长的选项文本显示Sencha Touch 2

selectfield

，但文本会被省略号截断，如

很长的选项t.

如何在一个选项中显示两行

代码：

---

我尝试过使用

\n

和

但不起作用。

有三种方法

使用

labelWrap

config选项设置为true。 这将避免截断最初出现在

selectfield

上的文本。稍后当您点击selectfield时；你有两个选择。使用

选择器

或

列表

<只有在

usePicker

config中将其设置为true时，才会使用code>picker。如果您使用的是平板电脑、台式机或移动设备，则会显示包含选项的默认

列表。点击selectfield后，如果在
列表中显示选项，则使用
labelWrap
配置将无效

使用以下CSS覆盖以避免截断

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

此覆盖以及上述

labelWrap

config设置为true将使

list

和

selectfield

整齐地显示整个文本。但这将覆盖可能影响应用程序中其他列表外观的样式

第三种方法是覆盖

Ext.field。选择
并创建自定义选择字段。在这种样式中，您只需覆盖以下方法-
getTabletPicker
，该方法生成点击selectfield时显示的列表。来自ST源代码的代码为fallows-

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;
}

getTabletPicker:function（）{
var config=this.getDefaultTabletPickerConfig（）；
如果（！this.listPanel）{
this.listPanel=Ext.create（'Ext.Panel'，Ext.apply({
对,，
莫代尔：是的，
cls:Ext.baseCSSPrefix+“选择覆盖”，
布局：“适合”，
hideOnMaskTap：没错，
项目：{
xtype:'列表'，
store:this.getStore（），
itemTpl:“{'+this.getDisplayField（）+”：htmlEncode}”，
听众：{
选择：this.onListSelect，
itemtap:this.onListTap，
范围：本
}
}
}，config））；
}
返回此.listPanel；
}

查看行
itemTpl
和
cls
config。在这里，两个选项都设置了为
列表定义的样式。这将决定点击selectfield时显示的
列表的外观。这种方法听起来可能很肮脏。但如果你想在外表和行为上做出一些重大改变，这是很有用的

---

您可能需要应用

空白：预换行！重要的

至

.x-list-label

非常感谢！它可以在浏览器中使用，但不能在android手机上使用，并且只能在picker上使用，不能在select list上使用。我想，我必须应用

空白：预包装！重要的到其他x元素。所以我在附近工作…谢谢你！第三种方法在我的情况下更好。**请各位指点SachinG的答案**（不幸的是，我是stack上的新手，所以我现在不能这么做）
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;
}