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

四、最终效果：

五、注解

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

ExtJS 表格自定义列-动态widget相关推荐

7.2DIY可视化后台表格自定义列显示类型
后台表格自定义列显示类型本教程均在第一节中项目启动下操作后台表格自定义列显示类型前言一.图片格式内容显示: 二. 效果展示: http://localhost:9999/#/hdp 三:自定义 ...
EasyExcel动态跨行合并和自定义列宽的策略
1. 动态表头 2.自定义跨行合并的策略 3.自定义列宽的策略下载表格的代码 new 出合并单元格的对象第一个参数写入需要合并的列的字符串列表,会根据相同自动合并第二个参数写入要合并单元格是第几 ...
elementUI表格组件：自定义列模板（完整案例）
elementUI表格组件:自定义列模板(含效果图) 所谓的自定义列模板,你也可以理解为自定义td的格式. 官方文档地址 :查看地址页面· 效果图 · 对比 : 代码块1 · 对比:<temp ...
Element-UI 表格自定义序号列
Element-UI 表格自定义序号列注:el-table-column可通过type="index" 设置为表格序号列,但是设置label属性无效 <el-table : ...
LayUI表格在线编辑动态修改列数据
LayUI表格在线编辑动态修改列数据每次只能修改指定属性是 edit 定义的列 {field:'aname', width:80, title: '昵称', minWidth: 100, edit ...
LaTeX表格自定义行高+自定义列宽+大表格自适应页面宽度
一.自定义行高默认行高效果自定义行高效果:看起来更美观.大方些实现方式:在LaTeX表格中的\begin{table}和\begin{tabular}之间插入命令\renewcommand\ar ...
java设置表格第一列长度_java 画pdf用itext调整表格宽度、自定义各个列宽的方法...
ps:我用的版本是7.0.5 场景: 左侧第一列宽度不够,导致数据换行. table table = new table(new float[2]); new 一个table之后,setwidthpe ...
table表格的使用(动态数据展示)
# table表格的使用(动态数据展示) ## 第一种方式<el-table :data="tableDataalllist" border style="widt ...
为 ASP.NET Datagrid 创建自定义列
Marcie Robillard DatagridGirl.com 2003 年 9 月简介不得不承认,为 Microsoft® ASP.NET 编写 Datagrid 代码包括大量的重复工作.尽 ...

ExtJS 表格自定义列-动态widget

ExtJS 表格自定义列-动态widget相关推荐

最新文章

热门文章