Results 1 to 5 of 5

Thread: CellEditing textfield editor disappears on selectText()

  1. #1
    Sencha User
    Join Date
    Feb 2013
    Location
    Lawrence, KS, USA
    Posts
    28
    Answers
    2

    Default Answered: CellEditing textfield editor disappears on selectText()

    I've got a large grid with a CellEditing plugin and numberfields and textfields. I want to select all the text in a cell when the user clicks or tabs into it, so I extended the CellEditing plugin and added that behavior to the showEditor method. It works fine for numberfields, but on textfields the editor appears and then immediately disappears, leaving just the grid cell, selected. Any theories on why this happens?

    Here's the extended CellEditing plugin:
    Code:
    Ext.define('My.grid.plugin.CellEditorWithSelectAll', {
        extend: 'Ext.grid.plugin.CellEditing',
        showEditor: function (ed, context, value) {
            this.callParent(arguments);
            ed.field.selectText && ed.field.getValue() && ed.field.selectText();
        }
    });
    Here's a typical column definition for a textfield:
    Code:
                {
                    "text": "Letter",
                    "displayText": "Post Letter",
                    "dataIndex": "post_letter",
                    "width":50,
                    "type": "string",
                    "editor":{
                        "xtype":"textfield",
                        "regex": "/^[a-zA-Z]+$/",
                        "regexText": "Please enter letters only"
                    }
                },
    And a typical column definition for a numberfield (these are the ones that are working):
    Code:
                {
                    "text": "Post",
                    "displayText": "Post",
                    "dataIndex": "post6",
                    "width":50,
                    "type": "string",
                    "editor":{
                        "xtype":"numberfield",
                        "minValue":0,
                        "maxValue":100
                    },
                    "summaryType":"gradebookDefaultColumnSummaryAverage",
                    "summaryRenderer":"gradebookDefaultColumnSummaryRoundedRenderer"
                },

  2. See if this is what you are looking for:

    Code:
    Ext.create('Ext.data.Store', {
        storeId : 'simpsonsStore',
        fields  : ['name', 'email', 'change'],
        data    : {'items' : [
            { 'name' : 'Lisa',  'email' : '[email protected]',  'change' : 100  },
            { 'name' : 'Bart',  'email' : '[email protected]',  'change' : -20  },
            { 'name' : 'Homer', 'email' : '[email protected]',  'change' : 23   },
            { 'name' : 'Marge', 'email' : '[email protected]', 'change' : -11  }
        ]},
        proxy   : {
            type   : 'memory',
            reader : {
                type : 'json',
                root : 'items'
            }
        }
    });
    
    var editor = {
        xtype: 'textfield',
        allowBlank: false,
        selectOnFocus: true
    };
    
    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });
    
    Ext.create('Ext.grid.Panel', {
        title      : 'Simpsons',
        store      : Ext.data.StoreManager.lookup('simpsonsStore'),
        columns    : [
            { header: 'Name',  dataIndex: 'name', editor: editor },
            { header: 'Email', dataIndex: 'email', flex: 1, editor: editor },
            { header: 'Change', dataIndex: 'change', editor: editor }
        ],
        height     : 200,
        width      : 400,
        plugins    : [ cellEditing ],
        renderTo   : Ext.getBody()
    });
    Scott.

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

    Default

    See if this is what you are looking for:

    Code:
    Ext.create('Ext.data.Store', {
        storeId : 'simpsonsStore',
        fields  : ['name', 'email', 'change'],
        data    : {'items' : [
            { 'name' : 'Lisa',  'email' : '[email protected]',  'change' : 100  },
            { 'name' : 'Bart',  'email' : '[email protected]',  'change' : -20  },
            { 'name' : 'Homer', 'email' : '[email protected]',  'change' : 23   },
            { 'name' : 'Marge', 'email' : '[email protected]', 'change' : -11  }
        ]},
        proxy   : {
            type   : 'memory',
            reader : {
                type : 'json',
                root : 'items'
            }
        }
    });
    
    var editor = {
        xtype: 'textfield',
        allowBlank: false,
        selectOnFocus: true
    };
    
    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });
    
    Ext.create('Ext.grid.Panel', {
        title      : 'Simpsons',
        store      : Ext.data.StoreManager.lookup('simpsonsStore'),
        columns    : [
            { header: 'Name',  dataIndex: 'name', editor: editor },
            { header: 'Email', dataIndex: 'email', flex: 1, editor: editor },
            { header: 'Change', dataIndex: 'change', editor: editor }
        ],
        height     : 200,
        width      : 400,
        plugins    : [ cellEditing ],
        renderTo   : Ext.getBody()
    });
    Scott.

  4. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    Lawrence, KS, USA
    Posts
    28
    Answers
    2

    Default

    Quote Originally Posted by scottmartin View Post
    See if this is what you are looking for:

    (The example code from the Ext.grid.plugin.CellEditing doc page.)

    Scott.
    Not really, no.
    Let me restate my issue more succinctly: Calling selectText() on the textfield created by CellEditing to edit a grid cell causes the field to vanish. I don't know if this is a bug, a feature, or something that would work better if I came at it from a different direction.

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

    Default

    would work better if I came at it from a different direction
    Curious .. was my approach not working as you expected?

    Scott.

  6. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    Lawrence, KS, USA
    Posts
    28
    Answers
    2

    Default

    Quote Originally Posted by scottmartin View Post
    Curious .. was my approach not working as you expected?

    Scott.
    Aha! Now that's I've looked it over more closely, yes, it works great. I was looking at CellEditing, and didn't notice that you'd set selectOnFocus on the editor. Thank you.

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
  •