Question

如何有效地将组件渲染到网格的摘要行？

summaryRenderer仅返回原始值，然后将其放入模板中。所以这是我的摘要渲染器：

summaryRenderer:function(summaryValue, values, dataIndex) {
    return summaryValue + '<br><div id="btn-' + dataIndex + '">';
}

不知何故，我必须在渲染器通过后插入一个组件。我曾尝试在store.load回调中执行此操作，但渲染器仅在加载后完成。

me.getStore().load({
  callback:function(records, operation, success) {
    Ext.each(me.getColumns(),function(column) {
      Ext.create('Ext.Button',{
        text:'Use this column',
        handler:function() {
          me.createEntryFromColumn(column);
        }
      }).render('btn-'+column.dataIndex);
      // throws "Uncaught TypeError: Cannot read property 'dom' of null", 
      // because the div is not yet in the dom.
    });     
  }
});

我可以附加哪个事件，仅在summaryRenderer通过后触发？

Answer 1

也许你可以这样做：

init: function () {
    this.control({
        'myGrid': {
            afterrender: this.doStuff
        }
    });
},

doStuff: function (myGrid) {
    var self = this;

    myGrid.getStore().on({
        load: function (store, records) {
            // do stuff
        }
    });

    myGrid.getStore().load();
}

Answer 2

我建议检查：组件模板（http://skirtlesden.com/ux/ctemplate）以进行组件渲染。

我没有检查自己，只是查看代码：https://docs.sencha.com/extjs/6.0/6.0.1-classic/source/Column2.html#Ext-grid-column-Column-method-initComponent（ExtJs 6.0.1），您可以看到摘要是通过函数呈现的。见initComponent

me.setupRenderer('summary');

然后在setupRenderer

// Set up the correct property: 'renderer', 'editRenderer', or 'summaryRenderer'
me[me.rendererNames[type]] = me.bindFormatter(format);

并bindFormatter生成一个函数。

所以我想，你可以扩展列，并扩展initComponent，在this.callParent()之后，你可以覆盖me[me.rendererNames[type]]并把自己的函数放在参数中取v（值）并返回CTemplate的产品。像

这样的东西

me["summaryRenderer"] = function(v) { return ctpl.apply({component:c, value:v})}

我认为@CD ..设置小提琴的建议是一个好主意。

将组件渲染到摘要行

2 个答案: