1. #1
    Sencha User
    Join Date
    Dec 2007
    Posts
    32
    Vote Rating
    0
    torsten.t is on a distinguished road

      0  

    Default Answered: Empty line in a combobox in a grid when editing is only 3px high

    Answered: Empty line in a combobox in a grid when editing is only 3px high


    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?

  2. 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.

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

  3. #2
    Sencha User Stormseeker's Avatar
    Join Date
    Jan 2010
    Location
    Evanston, Illinois
    Posts
    55
    Vote Rating
    1
    Answers
    2
    Stormseeker is on a distinguished road

      0  

    Default


    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.

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

  4. #3
    Sencha User
    Join Date
    Dec 2007
    Posts
    32
    Vote Rating
    0
    torsten.t is on a distinguished road

      0  

    Default


    You nailed it. Thanks Stormseeker

Thread Participants: 1