Render different control on ext:column

[paramadharmika]

Hi all,

I have couple question:

1. how can I render different control on a grid panel column? My scenario is I have a data type property on my data source object, and I want to control the rendering based on data type control, i.e integer will be rendering text box, selection will be rendering combobox, date will be rendering calendar etc.

From my understanding, it can be done using renderer functionality, but the next question is, renderer return a string value, not the control itself, so how can I achieve such behavior?

2. When store data source is changed, what event I should catch to re-render the control?

Here what I've tried so far:

<ext:Column ID="colData" runat="server" DataIndex="Data" Text="Data RDR">
<Renderer Fn="specialRender">
</Renderer>
</ext:Column>

var stringTemplate = new Ext.XTemplate('code to render {name} for string items');

        specialRender = function (value, metadata, record) {
            var data;

            data = Ext.apply({}, record.data, record.getAssociatedData());

            if (data.Type == "text") {
                return stringTemplate.apply(data);;
            } else if (data.Type == "number") {
                // add a css selector to the td html class attribute we can use it after grid is ready 
                // to render the slider
                metadata.tdCls = metadata.tdCls + 'slider-target';

                return '';
            } else {
                return ("Unknown data.type");
            }
        };

        Ext.onReady(function () {
            onGridViewReady = function () {
                var recordIdx,
                    colVal,
                    colEl;

                for (recordIdx = 0; recordIdx < grid.store.getCount() ; recordIdx++) {
                    record = grid.store.getAt(recordIdx);
                    sliderHolder = Ext.DomQuery.select('.slider-target', grid.view.getNode(recordIdx));
                    if (sliderHolder.length) {
                        colEl = sliderHolder[0];

                        // remove div generated by grid template - alternative is to use a new template in the col
                        colEl.innerHTML = '';

                        // get the value to be used in the slider from the record and column
                        colVal = 5; // record.get('change');

                        // render the slider - pass in the full record in case record data may be needed by change handlers
                        renderNumericFilter(colEl, colVal, record);
                    }
                }
            }

            var grid = Ext.getCmp('gridview-1016');

            // when the grids view is ready, render sliders to it
            grid.on('viewready', onGridViewReady, this);

            renderNumericFilter = function (el, val, record) {
                var filterPanel = Ext.widget('slider', {
                    width: 200,
                    value: val,
                    record: record,
                    minValue: 0,
                    maxValue: 10,
                    renderTo: el
                });
            }
        });

[fabricio.murta]

Hello @paramadharmika!

I'm pretty sure this subject has already been discussed in several threads in the forums.

Here are some:
- Dynamic Editor in GridPanel
- How to dynamically add either Combobox or DateField to Gridpanel Column Editor from code behind
- Dynamically change column editor with row editor plugin

I'm pretty confident one of these threads will lead your way into making the behavior you want work.
There's also these two examples that might help:
- TreeGrid with custom editors row-level
- Component column with multiple editors

Hope this helps!

[paramadharmika]

Hi Fabio,

Thank you for your explanation, due to tight schedule, I decide to work with my initial solution. Soon when I get the chance I will look at the links you provided, based on quick view it seems very promising.

Best Regards