Как добавить пустой элемент в поле со списком ExtJS?

Question

Я хочу добавить и удалить элемент (значение отображения пустое, высота элемента сохраняется как обычно) в Ext.form.ComboBox. Я refered 2 ссылки ниже, чтобы настроить мой выпадающий, но он по-прежнему не отображается пустой элемент:

• http://www.ashlux.com/wordpress/2009/09/04/handling-empty-options-with-ext-js-combo-box/
• http://www.sencha.com/forum/showthread.php?52340-How-to-add-a-quot-blank-quot-entry-to-a-ComboBox

Вот мой код:

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 элемента в элементах данных). И у combobox есть только 3 элемента (не 4, как я и ожидал). Вы имеете представление о моей проблеме ?! Большое вам спасибо!

Answer 1

Поскольку ваши добавления значения COMBOBOX позже, почему не только инициализировать магазин с одним пустым значением:

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

Позже, когда вы делаете store.add(theRestOfThem), что пустой один все еще будет там.

Чтобы вернуться к этому сегодня (15 апреля 2017 г.) для ExtJS 4.2:

Самый простой способ включить пустую строку в магазине, как указано выше, он также может быть сделано с помощью слушателем нагрузки на магазин:

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

Затем добавьте tpl конфигурации в выпадающем списке с   после поля индикации:

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

(поле дисплея fullName в случае OPS)

Answer 2

Это, как мы можем добавить пустое поле в комбинированном окне

В Java Map или любой другой коллекции поставить ключевое значение, как этот

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

В JS подать, это должно быть так:

Слушатель для комбинированного окна

listeners: { 
    select: function (comp, record, index) { 
     if (comp.getValue() === "" || comp.getValue() === " ") { 
      comp.setValue(null); 
     } 
    } 
} 

Answer 3

Вы можете добавить "пустой" запись в начале:

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

Answer 4

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); 
} 

Answer 5

В Ext 4.2.1 (вероятно, другие), просто добавить в выпадающие конфигурации:

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

Answer 6

Если хранилище использует встроенные данные, то store.load даже не будет срабатывать. Может быть, есть лучшее решение, но я закончил тем, что вносил записи в магазины на combobox.render: