Render dynamic components in ExtJS 4 GridPanel Column with Ext.create

Question

I've got an ExtJS (4.0.7) GridPanel that I'm populating from a store. The values that I display in the GridPanel's column need to have a different view depending on the type of data that's in the record.

The ultimate goal is that records with "double" or "integer" value for the record's type property present a slider to the user that they can adjust, and a type of "string" just renders some read-only text.

I've created a custom Column to do this. It inspects the type in the renderer and determines what to render.

I've got the "string" working fine with the code below, but struggling with how I can dynamically create and render the more complicated slider control in the column.

This simplified example is just trying to render a Panel with a date control in it as if I can get that going, I can figure out the rest of the slider stuff.

Ext.define('MyApp.view.MyColumn', {
    extend: 'Ext.grid.column.Column',
    alias: ['widget.mycolumn'],

    stringTemplate: new Ext.XTemplate('code to render {name} for string items'),

    constructor: function(cfg){
        var me = this;
        me.callParent(arguments);

        me.renderer = function(value, p, record) {
            var data = Ext.apply({}, record.data, record.getAssociatedData());

            if (data.type == "string") {
                return me.renderStringFilter(data);
            } else if (data.type == "double" || data.type == "integer") {
                return me.renderNumericFilter(data);
            } else {
                log("Unknown data.type", data);

        };
    },

    renderStringFilter: function(data) {
        // this works great and does what I want
        return this.stringTemplate.apply(data);
    },

    renderNumericFilter: function(data) {

        // ***** How do I get a component I "create" to render 
        // ***** in it's appropriate position in the gridpanel?
        // what I really want here is a slider with full behavior
        // this is a placeholder for just trying to "create" something to render

        var filterPanel = Ext.create('Ext.panel.Panel', {
            title: 'Filters',
            items: [{
                xtype: 'datefield',
                fieldLabel: 'date'
            }],
            renderTo: Ext.getBody() // this doesn't work
        });
        return filterPanel.html;  // this doesn't work
    }
});

My problem really is, how can I Ext.create a component, and have it render into a column in the gridpanel?

Solution 1

There are a few ways that I have seen this accomplished. Since the grid column is not an Ext container it can not have Ext components as children as part of any configuration the way other container components can. Post grid-rendering logic is required to add Ext components to cells.

This solution modifies your custom column render so that it puts a special css class on the rendered TD tag. After the grid view is ready, the records are traversed and the custom class is found for appropriate special columns. A slider is rendered to each column found.

The code below is a modified version of the ext js array grid example provided in the Sencha examples. The modification mixes in the custom column renderer and the post grid rendering of sliders to TD elements.

This example only includes enough modification of the Sencha example to show the implementation ideas. It lacks separated view and controller logic.

This is modified from here

 Ext.require([
     'Ext.grid.*',
     'Ext.data.*',
     'Ext.util.*',
     'Ext.data.Model'
 ]);


 Ext.onReady(function() {

     // sample static data for the store
     Ext.define('Company', {
         extend: 'Ext.data.Model',
         fields: ['name', 'price', 'change', 'pctChange', 'lastUpdated', 'type']
     });

     var myData = [
         ['3m Co', 71.72, 2, 0.03, '9/1/2011', 'integer'],
         ['Alcoa Inc', 29.01, 4, 1.47, '9/1/2011', 'string'],
         ['Altria Group Inc', 83.81, 6, 0.34, '9/1/2011', 'string'],
         ['American Express Company', 52.55, 8, 0.02, '9/1/2011', 'string'],
         ['American International Group, Inc.', 64.13, 2, 0.49, '9/1/2011', 'integer'],
         ['AT&T Inc.', 31.61, 4, -1.54, '9/1/2011', 'integer'],
         ['Boeing Co.', 75.43, 6, 0.71, '9/1/2011', 'string'],
         ['Caterpillar Inc.', 67.27, 8, 1.39, '9/1/2011', 'integer'],
         ['Citigroup, Inc.', 49.37, 1, 0.04, '9/1/2011', 'integer'],
         ['E.I. du Pont de Nemours and Company', 40.48, 3, 1.28, '9/1/2011', 'integer'],
         ['Exxon Mobil Corp', 68.1, 0, -0.64, '9/1/2011', 'integer'],
         ['General Electric Company', 34.14, 7, -0.23, '9/1/2011', 'integer']
     ];

     // create the data store
     var store = Ext.create('Ext.data.ArrayStore', {
         model: 'Company',
         data: myData
     });

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

     // custom column renderer
     specialRender = function(value, metadata, record) {
         var data;

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

         if (data.type == "string") {
             return stringTemplate.apply(data);;
         } else if (data.type == "double" || data.type == "integer") {
             // 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");

         }
     };

     // create the Grid
     grid = Ext.create('Ext.grid.Panel', {
         rowsWithSliders: {},
         store: store,
         stateful: true,
         stateId: 'stateGrid',
         columns: [{
             text: 'Company',
             flex: 1,
             sortable: false,
             dataIndex: 'name'
         }, {
             text: 'Price',
             width: 75,
             sortable: true,
             renderer: 'usMoney',
             dataIndex: 'price'
         }, {
             text: 'Change',
             width: 75,
             sortable: true,
             dataIndex: 'change',
             renderer: specialRender,
             width: 200
         }, {
             text: '% Change',
             width: 75,
             sortable: true,
             dataIndex: 'pctChange'
         }, {
             text: 'Last Updated',
             width: 85,
             sortable: true,
             renderer: Ext.util.Format.dateRenderer('m/d/Y'),
             dataIndex: 'lastUpdated'
         }],
         height: 350,
         width: 600,
         title: 'Irm Grid Example',
         renderTo: 'grid-example',
         viewConfig: {
             stripeRows: true
         }
     });

     /**
      * when the grid view is ready this method will find slider columns and render the slider to them
      */
     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 = 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)
             }
         }

     }

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

     // modification of existing method but removed from custom column 
     renderNumericFilter = function(el, val, record) {

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

     }
 });

Solution 2

I did something like this when I needed to render a small chart (essentially a spark chart) in a grid column. This solution is similar to sha's, but it's more robust and delegates the rendering to the component being rendered rather than the Column, which doesn't really have a render chain.

First, the column class:

Ext.define("MyApp.view.Column", {
    extend: "Ext.grid.column.Column",

    // ...

    renderer: function (value, p, record) {
        var container_id = Ext.id(),
            container = '<div id="' + container_id + '"></div>';

        Ext.create("MyApp.view.Chart", {
            type: "column",
            // ...
            delayedRenderTo: container_id
        });

        return container;
    }
});

Note the delayedRenderTo config option. Just like renderTo, this will be the DOM ID of the element that the chart component will render to, except that it doesn't need to be present in the DOM at the time of creation.

Then the component class:

Ext.define("MyApp.view.Chart", {
    extend: "Ext.chart.Chart",

    // ...

    initComponent: function () {
        if (this.delayedRenderTo) {
            this.delayRender();
        }

        this.callParent();
    },

    delayRender: function () {
        Ext.TaskManager.start({
            scope: this,
            interval: 100,
            run: function () {
                var container = Ext.fly(this.delayedRenderTo);

                if (container) {
                    this.render(container);
                    return false;
                } else {
                    return true;
                }
            }
        });
    }
});   

So during initComponent(), we check for delayed render and prepare that if necessary. Otherwise, it renders as normal.

The delayRender() function itself schedules a task to check every so often (100ms in this case) for the existence of an element with the given ID — i.e., to check whether the column has rendered. If not, returns true to reschedule the task. If so, renders the component and returns false to cancel the task.

We've had good luck with this in the field, so I hope it works for you too.

---

By the way, I was developing this as a part of answering my own question about ExtJS charting. That thread has the results of my performance testing. I was rendering 168 chart components in grid columns in 3-4s across most browsers and OSes. I imagine your sliders would render much faster than that.

Solution 3

Try something like this:

renderNumericFilter: function () {
    var id = Ext.id();
    Ext.defer(function () {
        Ext.widget('slider', {
            renderTo: id,
            width: 200,
            value: 50,
            increment: 10,
            minValue: 0,
            maxValue: 100,
        });
    }, 50);
    return Ext.String.format('<div id="{0}"></div>', id);
}

But I must say whatever you're trying to do - it doesn't sound right :) I don't think a bunch of sliders inside the grid will look good to the user.

Comments

[Ted Naleid]

Thanks for the response! I agree that the UX of this might not be optimal, but I've been asked to give it a shot so we can see what it's like. I had been hoping to avoid something like a defer which feels potentially fragile (especially on slow IE machines), but maybe it's ok. Optimally, what I'd want to know is what method do I need to override in column (or gridpanel) to allow me to render something other than a string. Or somehow use the col & row parameters on the renderer to write the value directly without waiting for a defer callback.

[sha]

You override renderer() function for the column. If you want to avoid using defer - you might want to look at render event for this div that you're returning.

[Ted Naleid]

but renderer() expects a string return value and then renders that to the column. I'm implementing the column's renderer method in my example above. I'm wondering what method is actually calling the renderer method and then taking the returned string and writing it to the DOM.

[sha]

I don't think you will be able to catch that - it's very deep in the framework. You might want to look at ComponentLoader.js file - at the end they call update() method I think.

[Johnny Rice]

+1 @GreenGiant nice to have the running version available like that

[Joe Holloway]

One gotcha with this approach (and probably sha's as well) is that the component being rendered into the 'delayedRenderTo' div is 'detached' from an Ext container perspective. In other words, it's not a child item of any other container, hence its 'destroy' method won't be called when the grid is destroyed; you have to do it explicitly or the component and anything it references will hang around after the grid is destroyed.

[Johnny Rice]

The jsfiddle form GreenGiant no longer works but here is an updated version: jsfiddle.net/unKWv/24

[Johnny Rice]

In Ext JS 5 they have added a Widget column that includes a slider. No more very custom code like what is noted here will be needed now when using Ext JS 5. docs.sencha.com/extjs/5.0.0/components/grids/…

[Dinesh Babu K G]

@JohnRice the slider goes away when you sort the column.