how to wrap text of selectfield option in sencha touch 2

Question

I'am trying to display Sencha Touch 2 selectfield with very long option text but text gets truncated with Ellipsis, like Very long option t....

How to display couple lines in one option?

Code:

{
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
    }
 ]
}

I've tried using \n and <br/> but is not working.

Answer 1

There are 3 two ways to do this.

1. use labelWrap config option set to true. This will avoid truncating text that appears on selectfield initially. Later when you tap on selectfield; you've two choices. Using picker or list. picker will be used only if you set it to true in usePicker config. If you are on tablet, desktop or mobile default list will be shown containing options. Using labelWrap config will not be usefull if options are displayed in list after tap on selectfield.

2. Use following CSS override to avoid truncating.

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

   This override along with above mentioned labelWrap config set to true will make both list and selectfield display whole text neatly. But this will override styles that may affect appearance of other lists in your app.

3. Third approach that can be is to override Ext.field.Select and create custom select field. In this style, you need to just override following method - getTabletPicker that generated the list displayed on tap of selectfield. Code from ST source is as 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;
   }
   

   Check out the line itemTpl and cls config. Here both options set styles that are defined for list. These will decide the appearance of list displayed on tap of selectfield. This approach might sound dirty. But it's useful, if you want to make some drastic changes in appearance and behaviour.