Its.grid.column.Component

[crocop21]

Hey thanks for the answer, its working now, i am trying to implement with Ext.grid.plugin.CellEditing
but its show in blank, is posible to do this?

 xtype: 'itscomponentcolumn',
                    autoRender: true,
                    autoShow: false,
                    width: 150,
                    dataIndex: 'country',
                    editor: {
                         
                       items: function(value) {
                    return { 
                        xtype: 'combobox',
                        store: [[1,'In Queue'], [2,'Handling'], [3,'Complete']], 
                        value: value,
                        width: 130
                    }; 
                }
                           
                    },

[vietits]

The items config should be defined outside editor config. Something likes this:

xtype: 'itscomponentcolumn',
autoRender: true,
autoShow: false,
width: 150,
dataIndex: 'country',
items: function(value) {
    return { 
        xtype: 'combobox',
        store: [[1,'In Queue'], [2,'Handling'], [3,'Complete']], 
        value: value,
        width: 130
    }; 
},
editor: {
    // define editor config for cellediting 
},

One thing to mention here is that this component is for displaying components in grid cell, it is not replacement for cellediting or rowediting plugins.

[crocop21]

The items config should be defined outside editor config. Something likes this:

xtype: 'itscomponentcolumn',
autoRender: true,
autoShow: false,
width: 150,
dataIndex: 'country',
items: function(value) {
    return { 
        xtype: 'combobox',
        store: [[1,'In Queue'], [2,'Handling'], [3,'Complete']], 
        value: value,
        width: 130
    }; 
},
editor: {
    // define editor config for cellediting 
},

One thing to mention here is that this component is for displaying components in grid cell, it is not replacement for cellediting or rowediting plugins.

And how can edit the combobox, i was trying something like this but when i edit is show me both combos from the component, and editor..thanks...
Sin título.png

xtype: 'itscomponentcolumn',
autoRender: false,
autoShow: false,
width: 150,
dataIndex: 'country',

items: function(value) {
    return { 
        xtype: 'combobox',
        store: [[1,'In Queue'], [2,'Handling'], [3,'Complete']], 
        value: value,
        width: 130
    }; 
},
editor: {    
    xtype: 'combobox',        
        store: [['In Queue','In Queue'], ['In Queue','Handling'], ['In Queue','Complete']]
},                    
                    fixed: false,
                    text: 'Country'
                },

[vietits]

Before showing the editor for grid cell editing, the cellediting plugin will try to hide the content of the grid cell. However, this is applied to text content only. In your case, the grid cell content is not text but component, so it won't be hidden. That's the reason why you see both comboboxes when you switch to editing mode.

[skirtle]

I don't understand why you would want to use this extension in combination with cell editing. Why would you want to show yet another combobox in the cell rather than just use the one you already have?

[crocop21]

I don't understand why you would want to use this extension in combination with cell editing. Why would you want to show yet another combobox in the cell rather than just use the one you already have?

So its imposible to do it?, i want to show the component in the cell editing because i want the user knows is a combo when try to edit.. Thanks alot for answer!, mm this extension can use for edit? i mean without cell editing?

[ganlhi]

Hello !

First, thanks for this extension, which solve a problem I had since monday.

My only issue is that if I use a Ext.Component or any form field as a cell content, it works perfectly; but if I use an Ext.Container or any subclass (like a panel), the grid doesn't scroll anymore...

Anyone knows how to handle that (if it is possible) ?
Thanks.

EDIT :
After some test, it appears that the scrolling appears when the panel has a height greater than a "normal" row height.
It seems that the total height occupied by the rows is not properly calculated after the panel is displayed.
This problem occurs also when using Ext.Component, if this one is too high.

EDIT 2 :
No I'm wrong: it works with components, not with containers.

EDIT 3 : After some more tests, the problem appears only if my panel contains grid panels.

[another_i]

Namespaces should reflect the organisation or individual who released the code. Sencha use the Ext namespace, vietits has chosen to use the Its namespace. It's an entirely appropriate way to namespace the class and I would advise against renaming it to either the Ext or Ext.ux namespace.

Historically the Ext.ux namespace was used for user extensions but this was a mistake. It totally defeats the uniqueness requirements for namespaces and in the eyes of many users it conveys the misleading impression that code was written by Sencha. Obviously there is little that can be done to stop users writing extensions in the Ext.ux namespace but I would strongly advise against it. That namespace should only be used by Sencha for their demo components.

It certainly shouldn't be necessary to rename the class to get the dynamic loader to work. You can put the file wherever you want but it must be called Component.js. You then just need to configure the paths for the namespace. If you choose to put the file in a folder structure of grid/column/Component.js then you'll only need to configure the loader with the path for the Its namespace. If you choose to put it in a totally random folder then you'd need to configure the loader with the path for the whole Its.grid.column namespace.

Thanks for the detailed answer.

[dbrin]

I am having a bit of a problem passing in scope into the handler of a menu item. Regular columns have scope property that can be set and then renderer handler runs in that scope. Any help on how to achieve a similar scoped handler for the items function?

[Lukappa]

Hello,
after updating my ExtJs from 4.1.3 to 4.2.0 beta 2 the componentcolumn stopped to work (without errors/warnings).

I have just found the reason:
Inside the constructor method there is this code:

 me.renderer = function(value, meta, record, rowIdx, colIdx, store, view) {
            var ret = '';
            var src = me.renderer.caller;
            if (src.$owner && src.$owner.xtype == 'headercontainer') {
                var iid = me.getIdPrefix(record);
                me.queue[iid] = {
                    view  : view,
                    store : store,
                    value : value,
                    record: record,
                    rowIdx: rowIdx,
                    colIdx: colIdx
                };
                ret = (Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(cfg.scope  || me, arguments) || '' : '') 
                    + '<div id="' + iid + '"> </div>';
            }
            return ret;
        };

Checking the src.$owner.xtype, I saw now it's "tableview" and not "headercontainer" as expected by this component.
I fixed this problem changing

if (src.$owner && src.$owner.xtype == 'headercontainer') { ...

with

if (src.$owner) { ...

My first tests are good... If I will find any error I will post here.