Results 1 to 8 of 8

Thread: Editable grid display value for default combobox

  1. #1
    Sencha User
    Join Date
    Nov 2014
    Posts
    7

    Default Editable grid display value for default combobox

    I have an editable grid that has a combobox. When adding a new row to the grid, I have a default value that I set when adding the item to the store. I'd like to be able to show the label and not the value on the grid. I have a renderer on the combo box which searches the combobox's store and grab the label to render. This works fine when a value is selected from the grid, but does not work on the initial display with the default value being set. I've tried to do some things on the 'beforeedit' but I'm fairly new to extjs so I'm a bit stuck. Does anyone have any suggestions on how to achieve this?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    So you have a renderer on the grid cell when in view mode?
    Do you have a valueField and a displayField for you combo to handle that is displayed in edit mode?

    Perhaps a quick example would help:
    https://fiddle.sencha.com/#home

  3. #3
    Sencha User
    Join Date
    Nov 2014
    Posts
    7

    Default

    Hi Scott, I'm not sure if I'm already doing what you're asking. Perhaps not. How do you specify a renderer under edit mode?

    I'm having some troubles with fiddle. But here's along the line of what I have.

    Code:
    Ext. define('mygrid', {
      exend: 'Ext.grid.Panel',
      alias: 'widget.mygrid',
    
      plugins: [
        {
            clickstoedit: 2,
            ptype: 'rowediting'
         }
      ]
    
      initComponent: function() {
        var comboStore = new Ext.data.Store({
          fields: ['value', 'label'];
          data: [
             {value: 1, label: 'option 1'},
             {value: 2, label: 'option 2}
           ]
        });
    
       Ext.apply(this, {
          columns: [
            {
               text: 'Column 1',
               dataIndex: 'col1',
             },
             {
                text: 'Column 2',
                dataIndex: 'col2',
                editor: {
                   xtype: 'combobox',
                   store: comboStore,
                   displayField: 'label',
                   valueField: 'value'
                },
                renderer: function(val, meta, record, rindex, cindex, store) {
                   var indx = comboStore.find('value', val);
                   return idx !== -1 ? comboStore.getAt(idx).get('label');
                }
             }
    
          ],
          tbar: [ {
              itemId: 'addRow',
              text: 'Add Row'
              handler: function(button) {
                var rowEditing = button.up('gridpanel').getPlugin('rowediting');
                rowEditing.cancelEdit();
                
                var r = Ext.create('myModel', {
                   col1: 'Default Name',
                   col2: '1'  // option 1
                }
             }
            }
          ]
       });
    
      this.callParent();
    }

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

  5. #5
    Sencha User
    Join Date
    Nov 2014
    Posts
    7

    Default

    Scott,

    This example helps clarify some things, but I'm still unable to achieve the result I'm looking for. When I add a new row with the default value, the value shows up in the combo and not the label. However if I select a different value in the combo, the label is displayed AND when I add another row (with the same default value) the label is also displayed correctly in that new row. It seems that I need to give it a "kickstart", but how do I do this in the code?

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Per my example, I made the following changes:

    // assign var to store create
    Code:
     var store = Ext.create('Ext.data.Store', {
    // after grid
    Code:
        Ext.create('Ext.Button', {
            text: 'Click me',
            renderTo: Ext.getBody(),
            handler: function() {
                store.insert(0,{type: 2, name: 'Sencha', email: '[email protected]', change: 1000});
            }
        });
    When I add the record, I see the names in combo no value.

  7. #7
    Sencha User
    Join Date
    Nov 2014
    Posts
    7

    Default

    Scott,

    I think I see where my problem is. I am actually loading my store from a URL. I know my example earlier shows the data being local but it's because I didn't think it made a difference and I just wanted to simplify things a bit.

    So when I switched the store using local data, as in your example, it works perfectly. Though, what I really have is this.
    Code:
        var comboStore = new Ext.data.Store({       
            fields: ['value', 'label'],
            autoload: true,
            proxy: {
              type: 'ajax',
              url: 'myService',
              reader: {
                 type: 'json'
              }
            }     
       });
    So why would this make a difference?

  8. #8
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Please see the following using json files for all data:
    https://fiddle.sencha.com/#fiddle/eke

    Any change if you set queryMode to local and remove your combo renderer?

    I would need to see a fiddle example that duplicates what you see.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •