ExtJS 表格自定义列-动态widget

一、需求：

表格中根据数据不同，动态渲染出不同的组件。

二、环境：

1、操作系统：

 Microsoft Windows 10 专业版

2、OS 版本:          10.0.14393 暂缺 Build 14393

3、ExtJS： ExtJS 6.2.0 gpl

4、Sencha Cmd v6.2.1.29

三、实现

1、数据列中：

在'Ext.grid.Panel'中的columns中的列中

text: "活动控制",
width: 165,
align: "center",
xtype:'widgetcolumn',
widget: {
    width: 160,
    xtype: "activitycontroloperation",//封装的要渲染的组件
    bind: '{record.status}'//绑定数据，这个一定要有，不然渲染出的组件不会排序，也不会刷新
}

2、封装的组件：

/**
 * Created by zhaojianrun on 2017/3/29.
 */
Ext.define('MyApp.view.ActivityControlOperation', {
    extend: 'Ext.container.ButtonGroup',
    xtype: 'activitycontroloperation',
    requires: [
        'MyApp.view.StatusActivityControlConfig'
    ],
    constructor: function (config) {
        this.callParent([config]);
    },
    activityControlConfig: Ext.create({
        xtype: 'statusactivitycontrolconfig'
    }),
    defaultBindProperty: 'value',//**默认绑定为传入的值
    /*在这个方法里，每次表格刷新时，对组件进行重新渲染*/
    setValue: function (value) {
        var controlOperation = this.activityControlConfig[value];
        this.removeAll();
        this.add(
            controlOperation
        );
        this.updateLayout();
    }
});

四、最终效果：

五、注解

每次排序或刷新表格，或翻页，这一列都会根据状态值的不同，渲染出不同的组件。