PDA

View Full Version : Empty line in a combobox in a grid when editing is only 3px high



torsten.t
15 Jan 2013, 6:53 AM
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:

// 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

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?

Stormseeker
15 Jan 2013, 8:43 AM
For a regular combobox, we just added some CSS to force the height for the combo items. Should probably work for combobox editors as well.



.x-boundlist-item {
height : 20px;
}

torsten.t
15 Jan 2013, 11:42 PM
You nailed it. Thanks Stormseeker