Метод setRenderer () в Extjs4

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

Что я сделал, так это установил рендерер по факту. После запуска моего приложения я получил созданный экземпляр компонента и добавил рендерер в функцию 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 2

похоже, способ упоминания попутно упоминается в этом посте на форуме sencha .

Вы можете использовать метод перенастройки сетки , чтобы поменять местами другой список столбцов (вместе с визуализаторами), однако это имеет существенный недостаток, заключающийся в том, что вам придется полностью задавать столбцы целиком.

Ты нашел лучший способ? Мне действительно не нравится тот факт, что это заставляет вас размещать средства рендеринга в месте, где они не могут быть проверены и не могут получить доступ к состоянию в статическом режиме.

Однако в этом случае лечение кажется хуже, чем болезнь, поскольку в конечном итоге вы берете то, что совершенно определенно рассматривает код вне поля зрения.

Иногда кажется, что они не особо задумывались над дизайном этих вещей: (* ​​1013 *

Answer 3

Когда вы создаете свою сетку, вы можете определить визуализатор для каждого столбца ...

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