Results 1 to 4 of 4

Thread: Extjs 5: setEditor for Grid dynamically issues

  1. #1
    Sencha Premium Member
    Join Date
    Mar 2015
    Location
    Raleigh, NC
    Posts
    47
    Answers
    1

    Default Answered: Extjs 5: setEditor for Grid dynamically issues

    Hi,
    I'm trying to figure out what the problem is I'm having with trying to set the editor for a grid using a grid row editor.

    In the following fiddle example, I'm able to recreate the problem. When I double click on a non-leaf item in the tree, a 'displayfield' is displayed as expected (although for some reason the value isn't showing when double clicked). When I double click a 'leaf' element in the tree, a 'textfield' is displayed as expected (but still no value showing). However, now when I double click on any other item in the tree, they are all 'textfield's and the value is shown.

    My goal here is to only allow editing (xtype: textfield) when the tree element is a leaf node. And should show an (xtype: displayfield) when the tree element is NOT a leaf node.

    https://fiddle.sencha.com/#fiddle/p7c

    Here's a snippit from the fiddle code:
    Code:
     var grid = Ext.create('Ext.tree.Panel', {
           store: store,
           renderTo: 'editor-grid',
           plugins: {
               pluginId: 'rowediting',
               ptype: 'rowediting',
               clicksToEdit: 2
           },
           columns: [{
               xtype: 'treecolumn', //this is so we know which column will show the tree
               text: 'Headers',
               flex: 2,
               sortable: true,
               dataIndex: 'text',
               editRenderer: function (value, metaData, record, rowIndex, colIndex, store, view)
                {
                    if (record.isLeaf()) {
                        console.log(this);
                        this.setEditor({xtype: 'textfield'});
                    }
                    else{
                        this.setEditor({xtype: 'displayfield'});
                    }
                    return value;
                }
               /*editor: {
                   xtype: 'textfield'
               }*/
           }]
       });
    Best Regards,
    Wesley

  2. The docs for the editRenderer say that it is only for non-editable columns. It stops being called once you set the editor to 'textfield' the first time.
    A renderer to be used in conjunction with RowEditing. This renderer is used to display a custom value for non-editable fields.


    Note: The editRenderer is called when the roweditor is initially shown.
    Changes to the record during editing will not call editRenderer.
    By the way, you can get the value through by passing it with setEditor().

  3. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    The docs for the editRenderer say that it is only for non-editable columns. It stops being called once you set the editor to 'textfield' the first time.
    A renderer to be used in conjunction with RowEditing. This renderer is used to display a custom value for non-editable fields.


    Note: The editRenderer is called when the roweditor is initially shown.
    Changes to the record during editing will not call editRenderer.
    By the way, you can get the value through by passing it with setEditor().

  4. #3
    Sencha Premium Member
    Join Date
    Mar 2015
    Location
    Raleigh, NC
    Posts
    47
    Answers
    1

    Default

    I was able to get the functionality I wanted by adding an event Listener for "beforeedit":

    Updated Fiddle Example (working): https://fiddle.sencha.com/#fiddle/p7c

    Code:
      plugins: {
               pluginId: 'rowediting',
               ptype: 'rowediting',
               clicksToEdit: 2,
               listeners: {
                   beforeedit: function(editor, context, eOpts) {
                       var column = context.grid.query('#header')[0];
                    
                       if (context.record.isLeaf()) {
                           column.setEditor({
                               xtype: 'textfield'
                           });
                          
                       } else {
                           column.setEditor({
                               xtype: 'displayfield'
                           });
                          
                       }
                   },
               }
           },

  5. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Great! Glad you have things working as needed, and thanks for following up here.

Similar Threads

  1. Replies: 5
    Last Post: 21 Nov 2014, 10:50 AM
  2. Replies: 8
    Last Post: 21 Oct 2013, 3:19 PM
  3. Replies: 1
    Last Post: 20 Oct 2013, 12:06 PM
  4. SetEditor of a grid column dynamically
    By sbodanapu in forum Ext: Q&A
    Replies: 1
    Last Post: 18 Jun 2012, 11:26 AM

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
  •