どのように私は、HTML、ExtJSのコンボボックスは、通常のように行動するのですかは、ボックスを選択しますか？

StackOverflow https://stackoverflow.com/questions/2102671

  •  21-09-2019
  •  | 
  •  

質問

すでに入力されたテキストで主演していない、ドロップダウンリスト内のすべてのエントリを隠して、ランダムなテキスト入力を可能に、先行タイプ< - ExtJSには、機能の多くを持っている派手なコンボボックスを提供します。 / P>

私は、これらの機能を望んでいません。私はかなり正確に一つのような振る舞いは、通常の選択ボックス希望でバニラのhtmlを期待するという選択ボックスをしたいです。

私はそれがデータストアにバインドされたい、と私は、コンボボックスに付属している他のすべてのExtJSの構成グッズをしたいです。私はちょうど彼らがどのようにこれらの事は仕事の彼らの既存の精神的なパラダイムを破る選択ボックスが発生した際に怖がらユーザー/テスターを望んでいない。

それでは、どのように私はExtJSのコンボボックスは、より多くの選択ボックスのように動作するために得ることができますか？または私は完全に間違っているウィジェットを使用しています！

役に立ちましたか？

解決

あなたはちょうどあなたがExt.form.ComboBoxオブジェクトをインスタンス化するとき、適切な構成を使用して、その動作を取得することができます：

var selectStyleComboboxConfig = {
    fieldLabel: 'My Dropdown',
    name: 'type',
    allowBlank: false,
    editable: false,
    // This is the option required for "select"-style behaviour
    triggerAction: 'all',
    typeAhead: false,
    mode: 'local',
    width: 120,
    listWidth: 120,
    hiddenName: 'my_dropdown',
    store: [
        ['val1', 'First Value'],
        ['val2', 'Second Value']
    ],
    readOnly: true
};
var comboBox = new Ext.form.ComboBox(selectStyleComboboxConfig);

あなたはそれが例えばmode: 'local'にバインドするしたい場合は、あなたのケースでstoreとExt.data.JsonStore引数を交換します。

他のヒント

現在受け入れソリューションは素晴らしい作品が、誰もプレーンなHTML選択ボックス（例えば、のようなキーボード入力を処理するコンボボックスを望んでいる場合は、「P」を押すたびに、リストの次の項目には「P」で始まる選択であります）、以下は役に立つかもしれません。

{
    xtype: 'combo',
    fieldLabel: 'Price',
    name: 'price',
    hiddenName: 'my_dropdown',
    autoSelect: false,
    allowBlank: false,
    editable: false,
    triggerAction: 'all',
    typeAhead: true,
    width:120,
    listWidth: 120,
    enableKeyEvents: true,
    mode: 'local',
    store: [
        ['val1', 'Appaloosa'],
        ['val2', 'Arabian'],
        ['val3', 'Clydesdale'],
        ['val4', 'Paint'],
        ['val5', 'Palamino'],
        ['val6', 'Quarterhorse'],
    ],
    listeners: {
        keypress: function(comboBoxObj, keyEventObj) {
            // Ext.Store names anonymous fields (like in array above) "field1", "field2", etc.
            var valueFieldName = "field1";
            var displayFieldName = "field2";

            // Which drop-down item is already selected (if any)?
            var selectedIndices = this.view.getSelectedIndexes();
            var currentSelectedIndex = (selectedIndices.length > 0) ? selectedIndices[0] : null;

            // Prepare the search criteria we'll use to query the data store
            var typedChar = String.fromCharCode(keyEventObj.getCharCode());
            var startIndex = (currentSelectedIndex == null) ? 0 : ++currentSelectedIndex;

            var matchIndex = this.store.find(displayFieldName, typedChar, startIndex, false);

            if( matchIndex >= 0 ) {
                this.select(matchIndex);
            } else if (matchIndex == -1 && startIndex > 0) {
                // If nothing matched but we didn't start the search at the beginning of the list
                // (because the user already had somethign selected), search again from beginning.
                matchIndex = this.store.find(displayFieldName, typedChar, 0, false);                                
                if( matchIndex >= 0 ) {
                    this.select(matchIndex);
                }
            }

            if( matchIndex >= 0 ) {
                var record = this.store.getAt(matchIndex);
                this.setValue(record.get(valueFieldName));
            }
        }
    }
}

あなたはtypeAhead = falseを試してみましたか？すぎないことを確認これは近い何をしたいのであれば。

var combo = new Ext.form.ComboBox({
    typeAhead: false,

    ...

});

var buf = []; 
buf.push('<option>aA1</option>');
buf.push('<option>aA2</option>');
buf.push('<option>bA3</option>');
buf.push('<option>cA4</option>');

var items = buf.join('');
new Ext.Component({
    renderTo: Ext.getBody(),
    autoEl: {
         tag:'select',
         cls:'x-font-select',
         html: items
    }
 });
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top