Search code examples
extjsextjs3

Is it possible to return a TextField while rendering a cell?


I'm newbie at Ext JS and I would like to know if it is possible to create a Textfield or a different component and insert it inside a grid panel cell. I have tried this so far (It doesn't return me the component):

{
                        header       : ...,
                        id           : ...,
                        dataIndex    : ...,
                        sortable     : true,
                        width        : 140,
                        renderer: function(value, meta, record) {
                             return new Ext.form.TextField({fieldLabel: 'field', text: 'test'});
                        }
                    }

I would like to do something similar with cellEditing, but I can't use that plugin because I'm working with a older version of Ext (3.2.1).

My target is to show a textfiled when someone clicks at a specific cell.

Thank you.


Solution

  • https://fiddle.sencha.com/#fiddle/27e7&view/editor

    I have returned html input field inside column renderer.

    Just like cell editor I have set value to textfield.Also I have added blur event handler method in which you can write code similar to cell editor's edit listener.

    Is this what you want? Or some other changes.Check it. Adding code here:

    renderer: function (value, meta, record) {
                    return "<input onblur='onBlurEventHandler(event)' value="+value+" style='width: 90 px;'></input>"
                }
    
    function onBlurEventHandler(event){
         console.log('Value: '+event.currentTarget.value);
    }