Como adicionar um item vazio ao combobox ExtJS?
-
29-10-2019 - |
Pergunta
Desejo adicionar um item vazio (o valor de exibição está em branco, a altura do item é mantida normalmente) a um Ext.form.ComboBox.Referenciei 2 links abaixo para configurar minha combobox, mas ainda não exibe o item vazio:
- 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
Este é o meu código:
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} </div></tpl>'
});
Os dados do armazenamento combobox serão carregados após uma solicitação Ajax (ou seja, 3 itens em itens de dados).E o combobox tem apenas 3 itens (não 4 como eu esperava). Você tem ideia do meu problema ?! Muito obrigado!
Solução
Já que você adicionou os valores da combobox posteriormente, por que não inicializar o armazenamento com um valor em branco:
store : new Ext.data.JsonStore({
fields : ['id', 'fullName'],
data : [{id: 0, fullName: ''}]
}),
Mais tarde, quando você fizer store.add(theRestOfThem)
, aquele em branco ainda estará lá.
Tive que revisitar isso hoje (15 de abril de 2017) para ExtJS 4.2:
A maneira mais fácil é incluir uma string vazia na loja como acima, isso também pode ser feito com um ouvinte de carga na loja:
listeners:
{
load: function(store, records)
{
store.insert(0, [{
fullName: '',
id: null
}]);
}
}
Em seguida, adicione uma configuração tpl
à combobox com
após o campo de exibição:
tpl: '<tpl for="."><div class="x-boundlist-item">{fullName} </div></tpl>',
(o campo de exibição é fullName
no caso OPs)
Outras dicas
Você pode adicionar um registro "vazio" no início:
listeners: {
load: function(store, records) {
store.insert(0, [{
fullName: ' ',
id: null
}]);
}
}
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} </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>';
}
}
});
ao inicializar o componente, você pode fazer isso (no controlador):
populateMyComboBox([yourComboBoxComponent], true);
na função preencher:
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);
}
É assim que podemos adicionar um campo em branco na caixa de combinação
Em java Map ou qualquer outra coleção, coloque um valor-chave como este
fuelMap.put(""," "); // we need to add " " not ""," " or null
// because these will add a fine blank line in Combobox
// which will be hardly noticeable.
No arquivo js , deve ser assim:
Listener para caixa de combinação
listeners: {
select: function (comp, record, index) {
if (comp.getValue() === "" || comp.getValue() === " ") {
comp.setValue(null);
}
}
}
No Ext 4.2.1 (provavelmente outros), basta adicionar à configuração do combobox:
tpl : '<tpl for="."><div class="x-boundlist-item">{fullName} </div></tpl>'
Se o armazenamento usar dados embutidos, store.load
nem mesmo será acionado.Talvez haja uma solução melhor, mas acabei inserindo registros de loja em 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
}
},
}