Component Column - Components in Grid Cells

[Tifanix]

Hi Skirtle,
I managed to add grids into each cell with your method... now my problem is this (IDK if It can be done)
I call the store for each grid like this:

{text: 'Nivel 1',dataIndex: 'Codigo_Asignatura', xtype: 'componentcolumn',width: 202,
renderer: function(Codigo_Asignatura) {
return {
store:'verificacion.asigPorCompetencia',
xtype: 'grid',
scope: this,
columns:[{text: 'Asignaturas', dataIndex: 'Codigo_Asignatura',width: 152}]
};
}
}

It obviously shows the same little grid inside each row of the main colum so.... how could I show different grids (different data) in each of the main rows?? is this possible?? like calling the store again in each row or something....

[skirtle]

@Tifanix. The renderer function will be passed the same arguments as a normal column renderer, so that'll include things like the value for the dataIndex and the record for the row. Returning differently configured grids is perfectly possible, you just need to derive an appropriate grid config based on the arguments you're passed.

On a side note, personally I tend to avoid using store ids like you have here. You're tying yourself to a singleton store, which can be very dangerous. Stores don't just include the data, they also encompass things like sorting and filtering, so in general it isn't safe to share stores between components. Using store ids is absolutely fine if used correctly but the code you've posted implies you may be misusing them.

[Tifanix]

Hi again.... thanks for the tip of the store... i'll try to change the way i'm using the ids.....
On the grid config part, could you give me some example of how could it be done... I'm not very familiar with that and i'm still kind of new to extjs so if you could give me a hand...thanks

[Tifanix]

...this is what i've been trying to do, i know it may be bad practice, but i'm trying to get it to work first....
I thought it might work, but it still loads the same data, it loads twice (showing what it shoud each time) but still shows the same data in both grids....

{text: 'Nivel 1',dataIndex: 'idCriterio', xtype: 'componentcolumn',width: 202,
            renderer: function(idCriterio) { 
                if(idCriterio=='cr1Comp2'){
                    criterio1 = idCriterio;
                    return { 
                        store:'verificacion.asigPorCompetencia',
                        xtype: 'grid',
                        itemId:'gridChica1',
                        columns:[{text: 'Asignaturas', dataIndex: 'Codigo_Asignatura',width: 152}],
                        listeners : {
                            render : function(gridChica1){      
                                var storeGrid1 = gridChica1.getStore();
                                storeGrid1.getProxy().extraParams.criterio = criterio1; 
                                storeGrid1.load();
                            }
                        }
                    };
                }else if(idCriterio=='cr2Comp2'){
                    criterio2 = idCriterio;
                    return { 
                        store:'verificacion.asigPorCompetencia',
                        xtype: 'grid',
                        itemId:'gridChica2',
                        columns:[{text: 'Asignaturas', dataIndex: 'Codigo_Asignatura',width: 152}],
                        listeners : {
                            render : function(gridChica2){      
                                var storeGrid2 = gridChica2.getStore();
                                storeGrid2.getProxy().extraParams.criterio = criterio2; 
                                storeGrid2.load();
                            }
                        }
                    };
                }
            }
            },

what can I do to "lock" what it first loads (in the first grid) to not reloading that grid with 2nd grids data and so on.... :/

[skirtle]

...this is what i've been trying to do, i know it may be bad practice, but i'm trying to get it to work first....

By using a store id you're sharing the same store instance between both inner grids. Stores aren't just configuration, they are tightly bound to the grid. Changes in the store are automatically reflected in the grid's view. If you use the same store for multiple grids you will see the same data.

Instead of sharing a store you can create your own store subclass to hold the store's configuration:

Ext.define('MyApp.store.verificacion.asigPorCompetencia', {
    alias: 'store.verificacion-asigPorCompetencia',
    extend: 'Ext.data.Store',

    autoLoad: true,

    ... // Put the rest of your store config here
});

Once you've defined a class you can create multiple instances with independent data. Perhaps something like this?

{
    dataIndex: 'idCriterio',
    text: 'Nivel 1',
    width: 202,
    xtype: 'componentcolumn',

    renderer: function(idCriterio) {
        return {
            columns:[{text: 'Asignaturas', dataIndex: 'Codigo_Asignatura', width: 152}],
            xtype: 'grid',

            store: {
                type: 'verificacion-asigPorCompetencia', // The type matches the alias of the store

                listeners : {
                    beforeload: function(store, options) {
                        options.params = options.params || {};
                        
                        options.params.criterio = idCriterio;
                    }
                }
            }
        };
    }
}

[Tifanix]

Thank you!, now it works like it should
I really thank you for your time, you have helped me a lot.

[charvee]

I have some problem..
In rendered ComboBox's store i want 3 fields and displayfield and valuefield should be different bt it cant happend.
If i m adding values to store then it displays in rawValues instead of data array..
What should i do now??

[skirtle]

@charvee. I don't really know what you're asking but it sounds like you're having problems with combobox configuration rather than Component Column.

[charvee]

dataIndex : 'select',
width : 100,
height : 30,
text : 'Select',
xtype: 'componentcolumn',
renderer: function(status,meta,record) {
//console.log(record);
return {
store: Ext.create('Ext.data.Store',{
fields:[{
name:'name',
mapping:'name'
},{
name:'status',
mapping:'status'
},{
name:'id',
mapping:'id'
}]
}),
height:30,
width:100,
displayField:'name',
valueField:'status',
id:'combobox_'+record.index,
xtype: 'combobox' ,
valuetatus,
listeners:{
render:function()
{

this.getStore().loadData(record.data.comboData);
console.log(this.getStore());
}
}
};
}
This is my column in grid i m loading data in render function in console.log it shows me items are 1 but when i run project values are not displayed and it shows that store is empty...

Now what should i do???

if i put proxy inside store that store is loaded perfectly and combo box displays data.

[skirtle]

Please use [CODE] tags when posting code.

I don't think the problem you're having is related to your use of Component Column, so this thread is not the correct place to discuss it. I suggest that you try to create a standalone combobox that exhibits the same behaviour so that you can post your question in the Q&A forum instead.