Tengo un panel de cuadrícula de ExtJS (4.0.7) que estoy llenando desde una tienda. Los valores que muestro en la columna de GridPanel deben tener una vista diferente según el tipo de datos que se encuentren en el registro.

El objetivo final es que los registros con valor "doble" o "entero" para el registrotype La propiedad presenta un control deslizante para el usuario que puede ajustar, y un tipo de "cadena" simplemente muestra un texto de solo lectura.

He creado una columna personalizada para hacer esto. Inspecciona el tipo en el renderizador y determina qué renderizar.

Tengo la "cadena" funcionando bien con el siguiente código, pero luchando con la forma en que puedo crear dinámicamente y representar el control deslizante más complicado de la columna.

Este ejemplo simplificado solo está tratando de representar unPanel con un control de fecha en él como si pudiera hacer eso, puedo averiguar el resto de las cosas del control deslizante.

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
    }
});

Mi problema realmente es, ¿cómo puedoExt.create un componente, y hacer que se convierta en una columna en el panel de cuadrícula?