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

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

提问by Ted Naleid

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.

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

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

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

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 Panelwith a date control in it as if I can get that going, I can figure out the rest of the slider stuff.

这个简化的例子只是试图渲染一个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
    }
});

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

我的问题真的是，我如何才能Ext.create将组件渲染到网格面板中的一列中？

采纳答案by Johnny Rice

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.

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

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.

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

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.

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

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

本示例仅对 Sencha 示例进行了足够的修改，以展示实现思路。它缺乏分离的视图和控制器逻辑。

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

     }
 });

回答by Brandan

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.

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

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 delayedRenderToconfig 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.

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

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.

因此，在 期间initComponent()，我们检查延迟渲染并在必要时进行准备。否则，它呈现为正常。

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.

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

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.

顺便说一下，我正在开发这个作为回答我自己关于 ExtJS 图表的问题的一部分。该线程具有我的性能测试结果。我在大多数浏览器和操作系统中在 3-4 秒内在网格列中渲染了 168 个图表组件。我想你的滑块会比这快得多。

回答by sha

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.

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