Eu tenho um GridPanel ExtJS (4.0.7) que estou preenchendo de uma loja. Os valores que eu exibo na coluna do GridPanel precisam ter uma visão diferente dependendo do tipo de dados que está no registro.

O objetivo final é que os registros com valor "duplo" ou "inteiro" para os registrostype propriedade apresentar um controle deslizante para o usuário que eles podem ajustar, e um tipo de "string" apenas renderiza algum texto somente leitura.

Eu criei uma coluna personalizada para fazer isso. Ele inspeciona o tipo no renderizador e determina o que renderizar.

Eu tenho o "string" funcionando bem com o código abaixo, mas lutando com a forma como eu posso criar dinamicamente e renderizar o controle slider mais complicado na coluna.

Este exemplo simplificado está apenas tentando renderizarPanel com um controle de data como se eu pudesse fazer isso, eu posso descobrir o resto das coisas slider.

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

Meu problema é realmente, como possoExt.create um componente e tê-lo renderizado em uma coluna no gridpanel?