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

Question

我试图selectfield用非常长的选项文本显示Sencha Touch 2 ,但文本被省略号截断,就像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

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

1. 使用labelWrapconfig选项设置为true.这样可以避免截断selectfield最初出现的文本.稍后当你点击选择字段时; 你有两个选择.使用 picker或list.picker仅在usePickerconfig 中将其设置为true时才会使用.如果您使用平板电脑,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生成在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字段的显示外观.这种方法可能听起来很脏.但如果你想在外观和行为方面做出一些重大改变,它会很有用.