textareafield in rowbody (rowexpander) not editable

Question

Morning, I have a strange situation and can't find the cause! I use the rowexpander and insert a simple textareafield into the rowbody, but I cannot edit the textareafield. Any suggestion?

I looked at the fieldSet how a component was inserted...

Ext.application({ name: 'Fiddle',

launch: function () {
    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [{
                'name': 'Lisa Simpson',
                "email": "[email protected]",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart Simpson',
                "email": "[email protected]",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer Simpson',
                "email": "[email protected]",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge Simpson',
                "email": "[email protected]",
                "phone": "555-222-1254"
            }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        viewConfig: {
            listeners: {
                expandbody: function (rowNode, record, expandRow, eOpts) {
                    //alert('get me when expand a row');
                }
            }
        },
        columns: [{
            text: 'Name',
            dataIndex: 'name',
            flex: 1
        }],
        plugins: [{
            ptype: 'rowexpander',
            //rowBodyTpl: '<table><tr><th>Email Address:</th><td>{email}</td></tr><tr><th>Phone Number:</th><td>{phone}</td></tr></table>',
            rowBodyTpl: '{%this.owner.cmp.renderAreaField(out, values);%} '
        }],
        height: 600,
        width: 400,
        renderTo: Ext.getBody(),

        renderAreaField: function (out, renderData) {

            //Test 1: voeg een tekstfield in
            var me = this,
                suffix = '-checkbox',
                cls = me.baseCls + '-header' + suffix,
                checkboxCmp,
                tree;

            checkboxCmp = new Ext.form.field.TextArea(Ext.apply({
                fieldLabel: 'Remark',
                width: '100%',
                minHeight: 75,
                grow: true
            }));

            //checkboxCmp.ownerLayout.configureItem(checkboxCmp);
            //me.setLegendCollapseImmunity(legend);
            tree = checkboxCmp.getRenderTree();
            Ext.DomHelper.generateMarkup(tree, out);

        }
    });
}

});

Any help is appreciated.

Arno

Answer 1

I would suggest not to try to force the textarea field into the rowexpander because this plugin is not really meant to handle active fields, it is rather a widget to display information.

Luckily there is another plugin, the rowwidget which can contain almost everything (form, grid etc.). Using this the following code can do what you need (and it is much simpler):

(See here for further examples.)

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: {
                'items': [{
                    'name': 'Lisa Simpson',
                    "email": "[email protected]",
                    "phone": "555-111-1224"
                }, {
                    'name': 'Bart Simpson',
                    "email": "[email protected]",
                    "phone": "555-222-1234"
                }, {
                    'name': 'Homer Simpson',
                    "email": "[email protected]",
                    "phone": "555-222-1244"
                }, {
                    'name': 'Marge Simpson',
                    "email": "[email protected]",
                    "phone": "555-222-1254"
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                flex: 1
            },{
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }],
            plugins: [{
                ptype: 'rowwidget',
                widget: {
                    xtype: 'textarea',
                    fieldLabel: 'Remark',
                    minHeight: 75,
                    grow: true
                }
            }],
            height: 600,
            width: 400,
            renderTo: Ext.getBody(),
        });
    }
});