使用 Ext.create 在 ExtJS 4 GridPanel 列中渲染动态组件

Question

我有一个从商店填充的 ExtJS (4.0.7) GridPanel。我在 GridPanel 的列中显示的值需要有不同的视图，具体取决于记录中的数据类型。

最终目标是记录的type 属性具有“double”或“integer”值的记录向用户提供他们可以调整的滑块，而“string”类型只是呈现一些只读文本.

我创建了一个自定义列来执行此操作。它检查渲染器中的类型并确定要渲染的内容。

我已经让“字符串”在下面的代码中正常工作，但在我如何动态创建和呈现列中更复杂的滑块控件时遇到了困难。

这个简化的例子只是试图渲染一个带有日期控件的Panel，就好像我可以做到一样，我可以弄清楚滑块的其余部分。

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

我的问题真的是，我怎样才能Ext.create 一个组件，并让它呈现到网格面板中的列中？

Answer 1

我已经看到了几种实现这一目标的方法。由于网格列不是 Ext 容器，它不能像其他容器组件那样将 Ext 组件作为子组件作为任何配置的一部分。将 Ext 组件添加到单元格需要后网格渲染逻辑。

此解决方案修改您的自定义列渲染，以便在渲染的 TD 标记上放置一个特殊的 css 类。网格视图准备好后，遍历记录并为适当的特殊列找到自定义类。为找到的每一列呈现一个滑块。

以下代码是 Sencha 示例中提供的 ext js 数组网格示例的修改版本。修改混合了自定义列渲染器和滑块到 TD 元素的后网格渲染。

本示例仅包含对 Sencha 示例的足够修改以展示实现思路。它缺少独立的视图和控制器逻辑。

这是从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
         });

     }
 });

Answer 2

当我需要在网格列中呈现一个小图表（本质上是一个火花图表）时，我做了这样的事情。此解决方案类似于 sha 的解决方案，但它更健壮，并将渲染委托给正在渲染的组件，而不是 Column，后者实际上并没有渲染链。

一、列类：

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

注意delayedRenderTo 配置选项。就像renderTo 一样，这将是图表组件将呈现到的元素的 DOM ID，只是它在创建时不需要存在于 DOM 中。

然后是组件类：

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

所以在initComponent() 期间，我们会检查延迟渲染并在必要时进行准备。否则，它会正常渲染。

delayRender() 函数本身会安排一个任务以每隔一段时间（在本例中为 100 毫秒）检查是否存在具有给定 ID 的元素，即检查列是否已呈现。如果不是，则返回 true 以重新安排任务。如果是，则渲染组件并返回 false 以取消任务。

我们在这个领域很幸运，所以我希望它也对你有用。

---

顺便说一句，我正在开发这个作为回答 my own question about ExtJS charting 的一部分。该线程具有我的性能测试结果。我在大多数浏览器和操作系统中以 3-4 秒的时间在网格列中渲染 168 个图表组件。我想你的滑块会渲染得比这快得多。

Answer 3

试试这样的：

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

但无论你想做什么，我都必须说 - 听起来不对 :) 我不认为网格内的一堆滑块对用户来说看起来不错。