Component Column - Components in Grid Cells

[skirtle]

This example comes with a health warning. It is just an example. It doesn't manage the components properly, indeed just clicking on the column header to sort the column will trash it completely (that causes a refresh).

getRefItems is defined on AbstractContainer. We're in some pretty advanced territory here, you'll need to dig into the source code rather than relying on the API docs.

I suggest studying this example, my original comments and the ExtJS source code until you understand it. If you just copy/paste you will almost certainly shoot yourself in the foot.

var gridFields = {
    name: Ext.create('Ext.form.field.Text', {
        name: 'name'
    }),
    category: Ext.create('Ext.form.field.Text', {
        name: 'category'
    }),
    age: Ext.create('Ext.form.field.Text', {
        name: 'age'
    }),
    type: Ext.create('Ext.form.field.Text', {
        name: 'type'
    })
};

var form = Ext.create('Ext.form.Panel', {
    height: 300,
    layout: 'fit',
    renderTo: Ext.getBody(),
    width: 300,
    items: [{
        border: false,
        xtype: 'grid',
        columns: [{
            dataIndex: 'fieldName',
            flex: 1,
            header: 'Fields',
            xtype: 'componentcolumn',
            renderer: function(value) {
                // We could create the field here and push it into gridFields instead
                // but be aware that this will happen asynchronously so we wouldn't
                // be able to use findField immediately if we did it that way
                return gridFields[value];
            }
        }],
        store: {
            fields: ['fieldName'],
            data: [
                {fieldName: 'name'},
                {fieldName: 'category'},
                {fieldName: 'age'},
                {fieldName: 'type'}
            ]
        },
        // Overriding inline in the config, we don't call the superclass version,
        // which could cause problems if the grid has other items (possibly toolbars)
        getRefItems: function() {
            return Ext.Object.getValues(gridFields);
        }
    }]
});

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: ['name', 'category', 'age', 'type']
});

// loadRecord uses findField
form.loadRecord(new Person({
    name: 'Thomas',
    category: 'A',
    age: 23,
    type: 'Advanced'
}));

[Jeff Liotta]

Skirtle, thanks very much for prompt response.
I will be trying this and let you know how it goes. I am creating ext widgets for grid cells from within column renderer so don't have them upfront...this is so because I am using your plugin with Ext CellEditing plugin together.
I will try this and keep you posted...thanks again for your direction.

[LuckyBlade]

Hi. In your example textfield doesn't catch spacebar keydown. How can I add it ?

[LuckyBlade]

Solved by adding

selType:'cellmodel', plugins:[Ext.create('Ext.grid.plugin.CellEditing',{ clicksToEdit:1})],

[skirtle]

The grid captures certain key presses for navigation purposes, including space. You'd need something like this:

return {
    ...
    xtype: 'textfield',
    listeners: {
        inputEl: {
            keydown: function(ev) {
                ev.stopPropagation();
            }
        }
    }
};

[wki01]

@pavanextjs. I will send you an updated version of CTemplate that's compatible with 4.1.0-beta-1. If anyone else wants it just send me a PM. I'll do a proper release once 4.1.0 is final.

Hello
can you post the version for 4.1?
thanks

[bazis]

waiting for 4.1 version too

[skirtle]

I'll get it released as soon as I can.

If you want to try a quick fix then just switch round apply and applyTemplate in CTemplate. The dependencies have switched in 4.1 and it causes a stack overflow.

There are a handful of other edge cases that I'll have fixed in the proper release but that quick fix should get it working in the majority of cases.

[bazis]

Changed

this.createAlias('apply', 'applyTemplate');

to

this.createAlias('applyTemplate', 'apply');

Firefox don't crash anymore, but plugin don't work - I see [object Object] instead of my components (buttons)

[skirtle]

Line 26, you need to rename applyTemplate to apply or you'll be aliasing the wrong method.