web-dev-qa-db-ja.com

空のアイテムをExtJSコンボボックスに追加する方法は？

Ext.form.ComboBoxにアイテムを追加して空にしたい（表示値は空白で、アイテムの高さは通常どおりに維持されます）。以下の2つのリンクを参照してコンボボックスを設定しましたが、それでも空のアイテムは表示されません。

これが私のコードです：

this.abcCombo = new Ext.form.ComboBox({
    name : 'abcCombo',
    hiddenName : 'abcCombo-id',
    fieldLabel : "My Combobox",
    width : 250,
    editable : false,
    forceSelection : true,
    mode : 'local',
    triggerAction : 'all',
    valueField : 'id',
    displayField : 'fullName',
    store : new Ext.data.JsonStore({
        fields : ['id', 'fullName']
    }),
    tpl : '<tpl for="."><div class="x-combo-list-item">{fullName}&nbsp;</div></tpl>'
});

コンボボックスストアのデータは、Ajaxリクエストの後にロードされます（つまり、データアイテム内の3つのアイテム）。そして、コンボボックスには3つしかありません（私が期待した4つではありません）。私の問題について何か考えがありますか？！どうもありがとうございます！

extjscomboboxextjs4extjs3extjs-stores
17
Đinh Hồng Châu

後でコンボボックス値を追加するので、1つの空白値でストアを初期化しないでください。

_store : new Ext.data.JsonStore({
    fields : ['id', 'fullName'],
    data : [{id: 0, fullName: ''}]
}),
_

後でstore.add(theRestOfThem)を実行すると、その空白のものがまだ存在します。

ExtJS 4.2の場合、本日（2017年4月15日）再検討する必要がありました。

最も簡単な方法は、上記のようにストアに空の文字列を含めることです。これは、ストアのロードリスナーでも実行できます。

_listeners: 
{
    load: function(store, records) 
    {
        store.insert(0, [{
            fullName: '',
            id: null
        }]);
    }
}
_

次に、表示フィールドの後に_&nbsp;_を付けてtpl構成をコンボボックスに追加します。

_tpl: '<tpl for="."><div class="x-boundlist-item">{fullName}&nbsp;</div></tpl>',
_

（OPフィールドの場合、表示フィールドはfullNameです）

9
vanderwyst

最初に「空の」レコードを追加できます。

 listeners: {
     load: function(store, records) {
          store.insert(0, [{
              fullName: '&nbsp;',
              id: null
          }]);
     }
  }
14
Darin Kolev

これは、コンボボックスに空白のフィールドを追加する方法です。

Java Mapまたは他のコレクションでは、このようなキー値を入力します

fuelMap.put("","&nbsp;"); // we need to add "&nbsp;" not ""," " or null 
                          // because these will add a fine blank line in Combobox 
                          // which will be hardly noticeable.

js fileでは、次のようになります。

コンボボックスのリスナー

listeners: {
    select: function (comp, record, index) {
        if (comp.getValue() === "" || comp.getValue() === "&nbsp;") {
            comp.setValue(null);
        }
    }
}
3
ifti
this.abcCombo = new Ext.form.ComboBox({
    name : 'abcCombo',
    hiddenName : 'abcCombo-id',
    fieldLabel : "My Combobox",
    width : 250,
    editable : false,
    forceSelection : true,
    mode : 'local',
    triggerAction : 'all',
    valueField : 'id',
    displayField : 'fullName',
    store : new Ext.data.JsonStore({
       fields : ['id', 'fullName']
    }),
    tpl : '<tpl for="."><div class="x-combo-list-item">{fullName}&nbsp;</div></tpl>'

    //make sure to add this
    //if not added, empty item height is very small
    listConfig : {
        getInnerTpl: function () {
            return '<table><tr><td height="12">{fullName}</td></tr></table>';
        }
    }

}）;

コンポーネントを初期化すると、これを（コントローラーで）実行できます。

populateMyComboBox([yourComboBoxComponent], true);

作成機能で：

populateMyComboBox : function(comboBox, insertEmpty) {
    var list;
    if (insertEmpty) {
        list.Push({id : 0, fullName : ''});
    }

    var mStore = Ext.create('Ext.data.Store', {
        fields: ['data', 'label'],
        data : list.concat([real_data])
    }),

    comboBox.bindStore(mStore);
}
3
wens

Ext 4.2.1（おそらく他のもの）では、コンボボックス構成に追加するだけです：

tpl : '<tpl for="."><div class="x-boundlist-item">{fullName}&nbsp;</div></tpl>'
2
Black

ストアがインラインデータを使用する場合、store.loadは起動しません。多分より良い解決策がありますが、私はcombobox.renderに店舗レコードを挿入してしまいました：

{
    xtype: 'combo',
    displayField: 'name',
    valueField: 'value',
    store: {
        type: 'MyInlineStore',
    },
    listeners: {
        render: function(el){
            el.getStore().insert(0, [{name: '[Any]', value: ''}]);
            el.setValue(''); //select [Any] by default
        }
    },
}
0
serg