The user shall be able to select an "empty" entry in a combobox. The empty line should have the normal height.
On base of the given Grid Cell editing example (cell-editing.js) I just added a model, a store and a renderer for the Combobox.
The id of the "empty" row will be send to the server.
I just added:
Code:
// Test combobox
Ext.define('CbModel', {
extend: 'Ext.data.Model',
fields: [
{name:'id', type:'int'},
{name:'name', type:'string'}
],
});
var storeLight = Ext.create("Ext.data.Store", {
model: 'CbModel',
data : [
{id: '1', name: 'Shiny'},
{id: '2', name: 'Rain'},
// Here you can see the tests which did not work *******************************
{id: '3', name: ' '}, // shows when selected
{id: '4', name: ''}, // row to tiny (arond 3px high)
{id: '5', name: ' '}, // row to tiny (arond 3px high)
{id: '6', name: '<br>'} // shows <br> when selected
]
});
// End Test combobox
and changed the light-column in the grid
Code:
header: 'Light',
dataIndex: 'light',
width: 130,
renderer: function(value) {
var r = storeLight.getById(value);
return r ? r.get('name') : 'unknown';
},
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: storeLight,
displayField: 'name',
valueField: 'id',
queryMode: 'local',
lazyRender: true,
listClass: 'x-combo-list-small'
})
Back to my question: How can I give the user a blank line with a normal height in the editor, which is still "blank" after the user has selected it?