1. #21
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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.

    Code:
    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'
    }));

  2. #22
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    110
    Vote Rating
    0
    Jeff Liotta is on a distinguished road

      0  

    Default


    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.

  3. #23
    Sencha User
    Join Date
    Mar 2012
    Posts
    13
    Vote Rating
    1
    LuckyBlade is on a distinguished road

      0  

    Default


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

  4. #24
    Sencha User
    Join Date
    Mar 2012
    Posts
    13
    Vote Rating
    1
    LuckyBlade is on a distinguished road

      0  

    Default


    Solved by adding

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

  5. #25
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


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

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

  6. #26
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    289
    Vote Rating
    3
    wki01 is on a distinguished road

      0  

    Default


    Quote Originally Posted by skirtle View Post
    @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

  7. #27
    Sencha User
    Join Date
    Sep 2010
    Posts
    5
    Vote Rating
    0
    bazis is on a distinguished road

      0  

    Default


    waiting for 4.1 version too

  8. #28
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      1  

    Default


    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.

  9. #29
    Sencha User
    Join Date
    Sep 2010
    Posts
    5
    Vote Rating
    0
    bazis is on a distinguished road

      0  

    Default


    Changed
    Code:
    this.createAlias('apply', 'applyTemplate');
    to
    Code:
    this.createAlias('applyTemplate', 'apply');
    Firefox don't crash anymore, but plugin don't work - I see [object Object] instead of my components (buttons)

  10. #30
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


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