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

Question

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

最终目标是记录的type属性具有"双"或"整数"值的记录向用户提供他们可以调整的滑块,而一种"字符串"只是呈现一些只读文本.

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

我已经使用下面的代码使"字符串"正常工作,但是我在如何动态创建和渲染列中更复杂的滑块控件方面苦苦挣扎.

这个简化的例子只是试图在其中呈现一个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组件,并将其渲染到gridpanel中的列？

Answer 1

有几种方法我已经看到了这一点.由于网格列不是Ext容器,因此不能像其他容器组件那样将Ext组件作为子组件作为任何配置的一部分.需要发布网格渲染逻辑才能将Ext组件添加到单元格.

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

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

此示例仅包含对Sencha示例的足够修改以显示实现想法.它缺乏独立的视图和控制器逻辑.

这是从这里修改的

 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以取消该任务.

我们在这个领域运气很好,所以我希望它对你也有用.

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