只需单击按钮即可为列设置渲染器

时间:2016-05-10 20:33:10

标签: extjs

我想创建一个按钮,当我点击它时,它会在我的网格上为renderer设置column。我正在查看专栏http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.grid.column.Column

的API

我没有看到setRenderer的方法,我怎样才能实现这个目标?

编辑:我不想在创建列时设置它(我知道有一个属性来设置渲染器)

1 个答案:

答案 0 :(得分:1)

您可以尝试简单地更改渲染器,不需要setRenderer

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields:[ 'name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name', dataIndex: 'name', 
         renderer: function (value) {
             return value + ' Simpson';
         }},
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 400,
    width: 400,
    renderTo: Ext.getBody(),
    bbar: [{
        text: 'Change First Column Renderer',
        handler: function(b) {
            var grid = b.up('grid'),
                columns = grid.getColumnManager().getColumns(),
                column = columns[0];

            column.renderer = function(value) {
                return value === 'Lisa' ? 'L Simpson' : value;
            }
            grid.view.refreshView();
        }
    }]
});

小提琴:https://fiddle.sencha.com/#fiddle/1a5e