Hybrid View

  1. #1
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Vote Rating
    326
    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

      4  

    Default Component Column - Components in Grid Cells

    Component Column - Components in Grid Cells


    http://skirtlesden.com/ux/component-column

    I've written an extension to Ext.grid.column.Column that allows full-blown ExtJS 4 components to be returned from the renderer function. I know a lot of people have written custom code to do this sort of thing but as far as I'm aware no-one has ever wrapped it up in a reusable class.

    screenshot.png

    The technique will be familiar to anyone who has tried to do it themselves: render the grid without the components then slip the components in afterwards. Beyond doing the obvious I've also tried to put in some size management and logic for doing component destruction.

    Performance for a small number of records is absolutely fine but it should come as no surprise that it doesn't scale particularly well. The age-old technique of faking components using some HTML and CSS remains vastly superior if you need performance with a moderately large number of records. If anyone has any suggestions for improving performance that would obviously be welcome.

    I hope that what my extension lacks in scaling it makes up for in saved development time. There are some demos if you follow the link but, as a taster, the code for rendering a combobox might look something like this:

    Code:
    Ext.create('Ext.grid.Panel', { 
        ... 
        columns: [{
            ... 
            dataIndex: 'status', 
            xtype: 'componentcolumn',
            renderer: function(status) { 
                return { 
                    ... 
                    store: ['Available', 'Away', 'Busy', 'Offline'], 
                    value: status, 
                    xtype: 'combobox' 
                }; 
            }
        }]
    });
    The renderer in this example returns a config and xtype but it could also return the actual component.

    In the demos I show checkboxes, textfields, progressbars and buttons, though in my test cases I have it working with all sorts of other components.

    For reference, the closest existing UX that I'm aware of is Condor's ComponentListView for ExtJS 3:

    http://www.sencha.com/forum/showthread.php?79210

  2. #2
    Ext JS Premium Member SMMJ_Dev's Avatar
    Join Date
    Aug 2009
    Location
    St. Louis, MO
    Posts
    88
    Vote Rating
    0
    SMMJ_Dev will become famous soon enough

      0  

    Default


    Awesome! I can't wait to try this out. I saw your CTemplate as well, looks good!
    ExtJS 4.0 - Ext.ux.grid.FooterSummary (Coming Soon)
    ExtJS 4.0 - Ext.ux.form.field.IPhoneSwitch (Coming Soon)
    ExtJS 4.0 - Ext.ux.grid.HeaderFilter
    (Updates Coming Soon)
    ExtJS 4.0 - Ext.ux.menu.DynamicMenu

    ExtJS 4.0 - Ext.ux.form.field.ClearableCombo
    ExtJS 4.0 - Ext.ux.form.field.FormPanelEditor
    ExtJS 4.0 - Grouping Extra Features (Overrides) (Updates Coming Soon)

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2010
    Location
    The Netherlands
    Posts
    77
    Vote Rating
    1
    siebe vos is on a distinguished road

      0  

    Default


    Indeed an awsome component! Many thanks!

    I have a problem with the componentcolumn being used in a grid with a cellediting plugin. When I use a checkbox xtype in the renderer for the componentcolumn, the store's record is not updated (getUpdatedRecords() returns nothing). I also listen to the 'update' event of the store and that one is not fired. When I modify another column using an editor config (as also was this column previously), I receive the stores update event and can see that the records field value of the componentcolumn defers from what I see on the screen. Configuring the same column as an editor with a checkbox xtype the record's fields are updated (was my previous config).

    Forgot to tell:
    ExtJs version: 4.0.7
    Browser: FF 9.0.1, FB 1.9.0.B1

    Do you know what's the problem?

    Thanks!
    Last edited by siebe vos; 19 Jan 2012 at 12:52 AM. Reason: Forgot to tell ExtJs and browser version

  4. #4
    Ext JS Premium Member pavanextjs's Avatar
    Join Date
    Jul 2008
    Posts
    118
    Vote Rating
    2
    pavanextjs is on a distinguished road

      0  

    Default Not working in ExtJS V4.1.0Beta

    Not working in ExtJS V4.1.0Beta


    Hi Skirtle,

    Nice component. However when i tried to use this in my ExtJS V4.1.0Beta code, it is giving me errors. Can you confirm if this works for ExtJS V4.1.0Beta?

    When i debug the code it is failing in CTemplate.js...

    SCRIPT28: Out of stack space
    CTemplate.js?_dc=1326912145867, line 90 character 13


    Code:
    if (me.pollId) {
       clearTimeout(me.pollId);
    }
    Thanks in advance.
    Pavan.

  5. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Vote Rating
    326
    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


    @siebe vos. For a checkbox you might be better off using Ext.ux.CheckColumn, as demonstrated here:

    http://dev.sencha.com/deploy/ext-4.0...l-editing.html

    However, if you did do it using a Component Column it would be something like this:

    Code:
    {
        dataIndex: 'registered',
        text: 'Registered',
        xtype: 'componentcolumn',
        renderer: function(val, meta, record) {
            return {
                checked: val,
                xtype: 'checkbox',
                handler: function(checkbox, checked) {
                    record.set('registered', checked);
                }
            }
        }
    }

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Vote Rating
    326
    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


    @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.

  7. #7
    Ext JS Premium Member pavanextjs's Avatar
    Join Date
    Jul 2008
    Posts
    118
    Vote Rating
    2
    pavanextjs is on a distinguished road

      0  

    Default


    Thanks so much Skirtle, that is working

  8. #8
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    292
    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

  9. #9
    Sencha Premium Member
    Join Date
    Mar 2010
    Location
    The Netherlands
    Posts
    77
    Vote Rating
    1
    siebe vos is on a distinguished road

      0  

    Default


    Hi Skirtle,

    I did not get your reply on the forum via mail. Yesterday I forgot to mention the ExtJs version and browser. After I added them to my original post, I saw that you replied. This is indeed what I needed! Many thanks!

  10. #10
    Sencha Premium Member
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    -2
    harmeet771122 has a little shameless behaviour in the past

      0  

    Default


    Quote Originally Posted by skirtle View Post
    @siebe vos. For a checkbox you might be better off using Ext.ux.CheckColumn, as demonstrated here:

    http://dev.sencha.com/deploy/ext-4.0...l-editing.html

    However, if you did do it using a Component Column it would be something like this:

    Code:
    {
        dataIndex: 'registered',
        text: 'Registered',
        xtype: 'componentcolumn',
        renderer: function(val, meta, record) {
            return {
                checked: val,
                xtype: 'checkbox',
                handler: function(checkbox, checked) {
                    record.set('registered', checked);
                }
            }
        }
    }

    I am trying achieve what you have suggested but I get error when set value to record.

    d.png


    here is code for by check box column

    Code:
    {
                        
                        draggable: false,
                        hideable: false,
                        text: 'Enabled',
                        align: 'center',
                        width: page.ColumnsWidth[3],
                        name: "Enabled",
                        xtype: 'componentcolumn',
                        sortable: true,
                        dataIndex: 'Enabled',
                        renderer: function (name, meta, record, rowIndex) {
    
                            if (record.data.leaf == true) {
                                return {
                                    checked: name,
                                    record: record,
                                    rowIndex: rowIndex,
                                    name: "Enabled",
    
                                    // readOnly: true,
                                    hideable: false,
                                    xtype: 'checkbox',
                                   
                                    listeners: {
                                        click: function () { } ,
                                        change: function (checkbox, newval, oldVal) {
                                        record.set("Enabled", newval);
                                        console.log("Fired");
                                    }
                                    }
                                };
                            }
                            return "";
                        }
                    }