extjs - sencha touch 2 で selectfield オプションのテキストを折り返す方法

Question

非常に長いオプションテキストでSencha Touch 2 を表示しようとしてselectfieldいますが、テキストがのように省略記号で切り捨てられますVery long option t...。

1つのオプションでカップルラインを表示する方法は?

コード：

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

\nandを使用してみまし<br/>たが、機能しません。

score 8 · Accepted Answer

これを行うには、3 つの 2 つの方法があります。

labelWraptrue に設定された構成オプションを使用します。selectfieldこれにより、最初に表示されるテキストが切り詰められるのを回避できます。後でselectfieldをタップすると; あなたには2つの選択肢があります。pickerまたはを使用し listます。configpickerで 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可能な3番目のアプローチは、カスタム選択フィールドをオーバーライドして作成することです。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これらは、selectfield のタップ時に表示される外観を決定します。このアプローチは汚いと思われるかもしれません。ただし、外観と動作を大幅に変更したい場合には便利です。

extjs - sencha touch 2 で selectfield オプションのテキストを折り返す方法

1 に答える 1

Related

Reference