renderDynamicTable: function(dataset,type, tab) {
var resultSetId = type === 'control' ? '#controlResultSet' : '#testResultSet';
var ctlSet = dataset;
if(Ext.isArray(ctlSet) && ctlSet.length > 0){
var ctlData = [];
var fields = [];
//根据数据集动态创建store fields及行数据
ctlSet.forEach(function(row,index){
var rowData = {};
if(row && row.length > 0){
if(fields.length === 0){
for(var i=0;i<row.length;i++){
fields.push('col' + i);
}
}
row.forEach(function(value,index){
rowData[fields[index]] = value;
});
ctlData.push(rowData);
}
});
var columns = [];
//根据数据集动态创建列
fields.forEach(function(name,index){
columns.push({
text: name,
dataIndex: name,
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
if(!Ext.isEmpty(value)){
metaData.tdAttr = 'data-qtip="' + value + '"';
}
return value;
}});
});
//创建内存store,绑定数据及fields
Ext.create('Ext.data.Store', {
storeId:'ctlStore',
fields:fields,
data: ctlData,
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
//给表格重写配置store和列
tab.down(resultSetId).reconfigure(Ext.data.StoreManager.lookup('ctlStore'),columns);
}
}
分享到:
相关推荐
动态生成表格是ExtJS中的一个重要功能,它允许开发者根据需求灵活地构造表格结构和数据。 首先,我们需要了解ExtJS中的核心组件之一——GridPanel。GridPanel是一个显示二维数据的组件,通常用于展示大量结构化的...
6. **动态列生成**:根据后台返回的列信息动态创建和配置Grid的列,这通常涉及到解析JSON数据中的列头信息。 7. **优化性能**:考虑使用分页(Paging)和延迟加载(Lazy Loading)来优化大数据量的加载,提高用户...
1. **创建表格**:创建一个基本的表格需要定义列模型(`columns`)和数据源(`store`)。列模型包含了每一列的属性,如字段名、标题、宽度等。数据源通常是`Ext.data.Store`对象,它管理着表格的数据,可以与后台...
在DataGrid组件中,动态数据绑定是指将表格的数据源与服务器上的数据实时连接,当数据发生变化时,DataGrid会自动更新显示。这种特性在处理大量或频繁更新的数据时非常有用,因为它减少了不必要的页面刷新,提高了...
4. **Grid组件**:Grid是ExtJS中的表格控件,用于显示和编辑表格数据。测试类可能涉及如何配置列、行,以及如何绑定数据存储进行动态加载和编辑。 5. **文件上传**:ExtJS提供了文件上传组件,如`Ext.form....
EXTJS的Grid Panel支持动态分页和列排序,用户可以通过配置`Ext.grid.plugin.PagingToolbar`实现分页,通过设置`sortable`属性对列进行排序。 5. **权限与角色管理**:对于后台系统,权限控制必不可少。EXTJS可以...
在实现"ExtJs Filter 表格过滤"的Demo中,开发者通常会创建一个数据网格,配置每个列的过滤器,然后通过用户界面或代码触发过滤操作。通过分析和学习这个Demo,你可以理解如何集成过滤功能到自己的应用程序中,从而...
对于行列转换的情况,可能需要根据后台返回的数据动态创建模型,确保能够正确映射到每列的数据。 2. **列模型配置**:EXTJS的列模型(ColumnModel)定义了Grid中的列,包括列的标题、宽度、对齐方式等。在行列转换...
在示例中,可能展示了如何创建一个基本的Grid,配置列模型,加载数据,以及实现基本的交互操作。 3. **Panel的使用**:Panel是ExtJS中的一个基础组件,可以理解为带有标题、边框和内容区域的容器。Panel可以包含...
EXTjs4.2中的图表组件得到了显著提升,提供了丰富的图表类型,包括柱状图、饼图、线图等,可以动态展示和交互,为数据分析和可视化提供了强大的工具。此外,4.2版本还改进了表格组件,增加了行编辑、列拖动等功能,...
动态添加数据字段是指在运行时根据需求增加或减少表格列。这在处理动态数据结构或者用户自定义视图时非常有用。在ExtJS中,可以通过创建新的ColumnModel实例并将其添加到grid的columns数组来实现。 **7. 示例代码...
10. **API文档**:提供的中文API文档详细列出了每个类、方法、属性及其用法,是学习和使用ExtJS 2.0的关键参考资料。 通过深入学习这些知识点,开发者能够熟练掌握ExtJS 2.0,创建出高效、动态且用户友好的Web应用...
以下是一段创建表格控件的示例代码: ```javascript renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }]); var grid = new Ext.grid.Grid('grid-example', { ds: ds, cm: colModel });...
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,推拽...
总结来说,ExtJS4表格的嵌套rowExpander应用主要涉及表格组件的定义、数据存储和模型的配置、动态内容的处理、事件监听和处理、以及子表格的创建和销毁。通过实现这一功能,可以向用户提供更加丰富和详细的数据展示...
- GridPanel是Extjs中用于显示表格数据的组件。 - 支持分页、排序、过滤等多种功能。 - **列模型与数据** - 列模型定义了表格的列结构,包括列名、宽度、对齐方式等。 - 数据通常通过Store加载到表格中。 - **...
通过阅读文档,你可以了解到如何创建和配置组件,如何处理用户交互,以及如何利用ExtJS的数据模型和数据存储进行数据操作。 在开发过程中,ExtJS允许你使用MVC(Model-View-Controller)架构模式,这是一种常见的...
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,拖拽...
它提供了丰富的组件库,包括数据网格、表格、图表等,使得开发者可以创建出功能强大且用户界面友好的网页应用。Struts,则是Java EE平台上的一款开源MVC框架,主要用于处理后端逻辑和服务端的业务流程。 本入门实例...