Component Column - Components in Grid Cells

[LuckyBlade]

Thank you for patch, it works! But there is something strange. Firstly, I change code like this:

// View has changed, may be a full refresh or just a single row
    onViewChange: function () {
        var me = this,
            tpl = me.tpl;


        if (tpl.isCTemplate) {
            // No need to wait for the polling, the sooner we inject the less painful it is
            tpl.injectComponents();
        }


        // A view change could mean scrollbar problems
        me.redoScrollbars();


        me.performGC();
        //Patch for 4.1.1
        Ext.Function.createBuffered(function() {
        this.up('tablepanel').updateLayout();
    }, 10)
        //end patch
    },

and nothing is change...After tha I try this :

// View has changed, may be a full refresh or just a single row
    onViewChange: function () {
        var me = this,
            tpl = me.tpl;


        if (tpl.isCTemplate) {
            // No need to wait for the polling, the sooner we inject the less painful it is
            tpl.injectComponents();
        }


        // A view change could mean scrollbar problems
        me.redoScrollbars();


        me.performGC();
        //Patch for 4.1.1
        this.updateGridLayout();
        //end patch
    },
    //Patch for 4.1.1
    updateGridLayout: Ext.Function.createBuffered(function() {
        this.up('tablepanel').updateLayout();
    }, 10),
    //end patch

and Grid become resize correctly.

In addition, after updating a page, on millisecond it's possible to notice that firstly Grid show all raws, after that Grid hide some rows, and patch force it to show raws again. It could be a way to fix bug without UpdateLayout, doesn't it ? I think the reason is in hiding raws

[skirtle]

There's actually no need to edit the code directly, my patch was written so that you can have it alongside the original code.

In your first attempt to change the code you're creating a buffered function but never invoking it. No great surprise that it made no difference.

Your second attempt is much closer to my original patch.

I'm not sure I follow your final comment. I think you're saying that you're observing a brief delay in the update where the rows are momentarily hidden and want to know how to fix that? While there may be some specific hacks to work around the problem I think re-running the layout is the only way to fix the sizing problems in the general case. You could try removing the buffering but I suspect performance will die for more than about 5 rows. Another option might be to use a more intelligent technique for determining when to re-run the layout, not just a simple buffering. I guess it could monitor whether or not there are components left to inject and run the layout when they're all done.

Another option might be to suspend layouts when creating the grid and only resume them after the components have been injected. That may save you a number of layout runs and prevent the problem you're seeing without the need for patching.

[LuckyBlade]

Thanks! You're right, I've made mistake in patching and try to do something with delay.

[LuckyBlade]

Hi. In IE there are errors:

SCRIPT438: Object doesn't support property or method "removeEventListener" ext-debug.js, line 9129 symbol 25
SCRIPT5007: Unable to get value of property "parentNode": object is null or undefined ext-debug.js, line 14418 symbol 17.

Test case:

var columns = [];
        var col1 = {
            flex: 1,
            dataIndex: "col1"
        }
        columns.push(col1);
        var col2 = {
            flex: 1,
            xtype: 'componentcolumn',
            hideable: false,
            renderer: function (value, metaData, record) {
                return Ext.create("Ext.form.ComboBox");
            },
            dataIndex: "col2"
        }
        columns.push(col2);


        var store = Ext.create('Ext.data.Store', {
            fields: ["col1", "col2"]
        });
        var gridPanel = Ext.create('WyaClient.items.view.evo.Panel', {
            autoShow: true,
            store: store,
            frame: true,
            renderTo: Ext.getBody(),
            columns: columns
        });
            gridPanel.getStore().add({
                col1: 0,
                col2: ""
            });

First error repeats if you click on sortable header. Second error appears with minute delay. Do you have any suggestion how fix it? If you try previous test case with button there is no error.
(browser IE9, doc IE9)

[divya.booravalli]

This is awesome, however is there a way to just use this type to certain cells in the grid, Like only the first row of the grid should have the combo box.

Thanks.

[skirtle]

@divya.booravalli. It depends. If you just want to return strings for the other rows then that shouldn't be a problem, the renderer is just like a normal column in that regard. You can grab the rowIndex as one of the arguments and switch accordingly.

However, if you want the other rows to behave like custom column types, like an Action column, then that'd be much more difficult.

It sounds to me like you don't really want the first data row to be comboboxes, you're just looking to insert some comboboxes between the grid's header and view. It may well be possible to do that without hijacking the first row of the gridview but I haven't tried myself.

[kbalam]

Hi.

some idea for edit the Component class?? I need pass the "scope" property for «this» reference inside the renderer function.

But i'm some little lost. :P

[joshcastaneda]

Hi,

I'm trying to modify your component.js to handle the following scenario. I have a gridpanel and am using your componentcolumn as in your example:

DestinationModel = Ext.define('DestinationModel', {
     extend: 'Ext.data.Model',
     fields: [
      ...
          {name: 'id', type: 'string'}, // value
          {name: 'name', type: 'string'}, // visible to user
       ...
     ]});
...
        Ext.define('DestinationStore', {
            extend: 'Ext.data.Store',
            model: 'DestinationModel' 
        });
        var IpDestStore = Ext.create('Ext.data.Store', {
            model: 'DestinationModel'
        });
        var NonIpDestStore = Ext.create('Ext.data.Store', {
            model: 'DestinationModel'
        });
...

{dataIndex:'ipDestination', xtype: 'componentcolumn', renderer: function(dest){
     return {
          store: IpDestStore,
          value: dest,
          xtype: 'combobox'
     };
}},
{dataIndex:'nonIpDestination', xtype: 'componentcolumn', renderer: function(dest){
     return {
          store: NonIpDestStore,
          value: dest,
          xtype: 'combobox'
     };
}}

and I am trying to show a pair of combo boxes only on the selected row. On the select event for the gridpanel, I want to show the comboboxes and on the deselect I want to show a string of the value that would show in the combobox. Where should I start in order to achieve this? Component.js? Should I modify this renderer function right here on the column object?

Thanks,
Josh

[skirtle]

@joshcastaneda.

From your description I think I'd use the standard RowEditing plugin instead:

http://docs.sencha.com/ext-js/4-1/#!...gin.RowEditing

The inline demo near the top of the docs does something very similar to what you're describing.

If you still want to use Component Column there are a number of ways to approach it. I don't think it's necessary to modify the extension code directly.

The simplest is to use CSS. Return both the combobox and text (wrapped in a container) and then use a suitable CSS selector to show/hide the correct entry with display: none.

Another approach might be to store the selection status in a hidden field of the records. When a row is selected it can call set on the record to update whether it is selected. This has two consequences. Firstly it'll force the grid view to refresh that row, which will ensure the renderer gets called. Secondly, it'll give you a field in the record that you can grab inside the renderer to decide whether to return a combobox or text. There are a few potential pitfalls with this approach. Firstly, you've got to add an extra field to your model that doesn't belong there, especially if the records are shared. Secondly, keeping the field in sync with the selection model could be tricky (though it may just work, difficult to say).

Another way might be to grab the selection model directly from within the renderer function to determine what to return. Then wire up the selection model's events to call refreshNode on the grid view to force the renderer to be called when selection changes.

[alvita]

hi Skirtle~
thanks your component, it's really useful!
But I am stuck on this problem~
if I want to put cascade combobx in two cell
after rendering how to get each of combobox ?
I tried the way like ..grid.down('combo') but in vain
could you give me some hint for solving this problem?
thanks for your kind help in advance