1. #1
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,345
    Vote Rating
    250
    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

      3  

    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 User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,345
    Vote Rating
    250
    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 User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,345
    Vote Rating
    250
    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
    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!

  8. #8
    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

  9. #9
    Sencha User
    Join Date
    Feb 2012
    Posts
    2
    Vote Rating
    0
    hzmt is on a distinguished road

      0  

    Default


    Is there anyway to suppress the component from redrawing when the store is updated?

  10. #10
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,345
    Vote Rating
    250
    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


    It's not easy to do that at present but I agree this would be a good feature to add. If you could let me know your use case I'll try to include it in the next version.

    I think I'd do this by changing renderComponent in CTemplate. Currently it just calls the component's render method but that won't work if the component is already rendered. If that method also supported moving an existing component it should be possible to keep the same component when the grid refreshes rather than creating a new one. Without knowing your use case I don't know whether this would meet you needs.

    You might be able to fake it for now by suspending events on the store but that may have other consequences.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar