extjsの選択ボックスでテキストを切り詰めるのを避ける方法

Question

私は、minWidthを設定したextjsのコンボボックスを持っています。私は選択リストから最長の文字列を選択します。文字列はコンボボックスのテキストフィールドで切り捨てられます。私たちがリストから選択した完全な文字列を表示するための文字列の切り捨てを避ける方法。

Answer 1

ボックスを広くします。 Extは自動的にそれをしません。フォームフィールドの最小幅は、パネル/コンテナのサイズを変更でき、フォームフィールドにはflexが設定されていますが、フォームフィールドはフィールドの内容に基づいて決してサイズ変更されません。

フィールドのコンテンツのサイズを変更したい場合は、hereのように手動で実装する方法があります。

Answer 2

コンボでlistConfig configuartionを使用し、必要なCSSを適用してトランケートを削除します。私の例を見てください。

.withOutTruncate{ 
    word-wrap: break-word; 
} 

`var states = Ext.create('Ext.data.Store', { 
    fields: ['abbr', 'name'], 
    data: [{ 
     "abbr": 'largeText', 
     "name": 'testtesttesttesttestetsetetetetetetetetehjghh' 
    }, { 
     "abbr": "AL", 
     "name": "Alabama" 
    }, { 
     "abbr": "AK", 
     "name": "Alaska" 
    }, { 
     "abbr": "AZ", 
     "name": "Arizona" 
    }] 
}); 

Ext.create('Ext.form.ComboBox', { 
    fieldLabel: 'Choose State', 
    store: states, 
    listConfig: { 
     cls: 'withOutTruncate' 
    }, 
    queryMode: 'local', 
    valueField: 'abbr', 
    renderTo: Ext.getBody(), 
    displayField: 'name' 
}); 

注：私はCSSが良くありません。私は単語のブレークを試みたが、それは私の最後にはうまくいっているが、あなたはテキストプロパティCSSを適用して、もっとうまく動作させるようにする。