Extjs4 中的 setRenderer() 方法

Question

Extjs 3.3.1 有方法 setRenderer() 现在

/**
  * Sets the rendering (formatting) function for a column. 
  */
setRenderer( Number col, Function fn ) : void

我在 ExtJS 4 的 setRenderer 中没有得到任何方法代码>.那么如何在 ExtJS 4 中运行时格式化网格列。

Answer 1

当您创建网格时，您可以在每一列上定义渲染器...

Ext.create('Ext.grid.Panel', {
    title: 'Grid Sample',
    store: Ext.data.StoreManager.lookup('yourStore'),
    columns: [
        {header: 'Product Description',  dataIndex: 'description'},
        {header: 'Cost', dataIndex: 'cost', renderer: nameOfRenderFunction },
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

然后您可以在全局范围内定义您的函数...

function nameOfRenderFunction(v) {
    //do something to v
    return v;
}

Answer 2

我所做的是事后设置渲染器。在我的应用程序启动后，我获得了实例化的组件，并在控制器的 onLaunch() 函数中添加了一个渲染器，如下所示：

    // An example renderer
    var myComponentsRenderer = function( value ){
        return value++;
    };

    // Get the instantiated component
    var myComponent = Ext.ComponentQuery.query( "#myComponent" )[0];

    // Attach the renderer
    Ext.override( myComponent, {
        renderer : myComponentsRenderer,
    });

我喜欢这种方法的原因是因为我能够将渲染器函数放入我的控制器中并将逻辑保留在我的视图之外。它帮助我更好地组织我的代码。

Answer 3

看起来在传递 sencha 论坛上的这篇文章。

您可以使用网格的重新配置方法< /a> 交换不同的列列表（以及渲染器），但这确实有一个主要缺点，您必须完全重新指定整个列。

你找到更好的方法了吗？我真的不喜欢这样的事实：它迫使您将渲染器放在无法测试且无法以非静态方式访问状态的地方。

然而，在这种情况下，治疗似乎比疾病更糟糕，因为您最终会将非常明确的视图代码从视图中删除。

有时感觉他们并没有真正考虑过这些东西的设计:(