`

Ext4 表格分组和组标题的设置

    博客分类:
  • JS
 
阅读更多

 

 

 

	        Ext.create('Ext.data.Store', {
	            storeId:'trainDataStore',
	            fields:['type', 'no', 'checkitem', 'result'],
	            groupField: 'type',
	            sorters:['no'],
	            data:{'items':[
	                { 'type': '1)飞行前',  "no":"1",  "checkitem":"设备考试(口试或笔试)",  "result":""  },
	                { 'type': '1)飞行前',  "no":"2",  "checkitem":"飞行前检查",  "result":"通过" },
	                { 'type': '1)飞行前',  "no":"3",  "checkitem":"启动发动机,动力系统检查",  "result":"通过"  },
	                { 'type': '1)飞行前',  "no":"4",  "checkitem":"滑行、进出停机位程序",  "result":"通过"  },
	                
	                { 'type': '2)起飞',  "no":"5",  "checkitem":"正常起飞(仪表条件)",  "result":"通过"  },
	                { 'type': '2)起飞',  "no":"6",  "checkitem":"侧风起飞",  "result":"通过" },
	                { 'type': '2)起飞',  "no":"7",  "checkitem":"V1后发动机失效时的起飞",  "result":"通过"  }
	            ]},
	            proxy: {
	                type: 'memory',
	                reader: {
	                    type: 'json',
	                    root: 'items'
	                }
	            }
	        });
	        var trainListGrid = Ext.create('Ext.grid.Panel', {
	            region:'center',
	            forceFit: true,
	            split: true,
	            selType: 'cellmodel',
	            store: Ext.data.StoreManager.lookup('trainDataStore'),
	            features: [{ftype:'grouping',groupHeaderTpl: '{name}'}],
	            labelAlign:'top',
	            columns: [
	                {
	                	text: "序号",
	                	width:50,
	                	dataIndex: 'no'
	                },
	                {
	                	text: "检查项目",
	                	width:300,
	                	dataIndex: 'checkitem'
	                },
	                {
	                	text: "检查结果", 
	                	width:80,
	                	dataIndex: 'result'
	                }
	            ]
	        });
	        

 

 

 

 

分享到:
评论

相关推荐

    ext 双层表格 grid(附带图片)

    在EXT JS框架中,双层表格,也称为嵌套表格或多级表格,是一种用于展示层次数据的强大工具。EXT JS的Grid组件是实现这一功能的主要组件,它允许开发者以清晰、交互的方式展示复杂的数据结构。以下是对EXT JS双层表格...

    Bootstrap树型表格和多标题表格

    针对这一需求,开发者们创建了各种插件来增强Bootstrap表格的功能,比如“Bootstrap树型表格和多标题表格”。 这个插件是对Bootstrap原生表格的扩展,旨在实现类似EXT JS中的TreeGrid的效果。TreeGrid是一种特殊的...

    Ext 添加功能form表单实例

    字段集(`fieldset`)是一种特殊的容器,用于分组相关的字段,并可以添加标题和折叠功能,如`{xtype:'fieldset', title:'角色信息', labelWidth:20, id:'rolesList', name:'rolesList', collapsible:true, autoHeight:...

    EXT 复杂表头插件

    在EXT Grid中,表头(Header)是显示列标题的部分,而“复杂表头”则是指具有多层次、多维度展示数据的表头,可以更直观地组织和显示复杂的数据关系。 "EXT 复杂表头插件"是为了扩展EXT Grid的功能,使其能够支持...

    Ext 3.4 多表头 列锁定

    在这个特定的场景中,我们关注的是"多表头"和"列锁定"功能,这两者都是Ext JS表格视图中的高级特性。 多表头(Multi-Level Headers)允许在表格中创建层次化的列标题,这在处理复杂数据时非常有用。通过多表头,...

    Ext-plugins

    标题 "Ext-plugins" 指的是 ExtJS 插件,这是一种在 Ext JS 框架中用于扩展和增强组件功能的特殊模块。Ext JS 是一个流行的JavaScript库,用于构建富客户端Web应用程序,提供了丰富的组件库,如表格、面板、菜单等。...

    EXT piechart,grid,和chart的实例

    EXT Grid是EXT中非常重要的组件,它用于展示和操作表格数据。EXT Grid提供了很多功能,如排序、分页、过滤、行编辑等。以下是一些关键配置项: - `columns`: 定义网格列的配置,包括标题、字段名、对齐方式、宽度等...

    Ext grid 简单实例

    3. **配置Column Model**: 创建一个Ext.grid.ColumnModel,定义每列的属性,如text(列标题)、dataIndex(与Model字段关联)和width。 4. **创建Grid Panel**: 创建一个Ext.grid.Panel实例,将Store、Model和...

    Ext3.4.0复杂(多行)表头+锁定多列例子

    3. 定义多行表头,创建多个HeaderContainer,设置它们的布局和嵌套关系。 4. 使用LockingView或LockingGridPanel,指定哪些列需要被锁定。 5. 配置列模型(column model),定义列的宽度、标题、数据绑定等属性。 6....

    Ext Js权威指南(.zip.001

    8.4.4 状态管理:ext.state.manager、ext.state.provider、ext.state.local-storageprovider和ext.state.cookieprovider / 426 8.5 综合实例 / 426 8.5.1 使用子模板 / 426 8.5.2 递归调用模板 / 428 8.6 本章...

    ExtJs6 导出excel(包含分组、分组合计行、二重表头)

    二重表头则是为了在表格的顶部设置多个层次的列标题,以表示更复杂的数据关系。 实现这个功能的关键在于使用ExtJS的Export插件或者自定义脚本来处理数据网格的渲染和导出。描述中提到的“改了改官方提供的js”,...

    Extjs 4.2分组小计

    用户可以通过拖动列标题来重新排序,ExtJS会自动更新分组和小计。如果你需要在运行时更改分组或小计的配置,可以调用`store.setGroupField`和`column.setSummaryType`方法。 5. **性能优化** 当数据量较大时,...

    extjs3合并表头 rowspan

    4. **Custom View**: 如果`GroupingView`不能满足需求,你可以创建一个自定义的视图类,继承自`Ext.grid.GridView`,然后重写`renderUI`和`onRender`方法,以便控制单元格的合并逻辑。 5. **Renderer Function**: ...

    Ext JS框架 经验之作2000页

    - **代码**:通过设置分组配置来实现自动分组功能。 - **GroupedHeaderGridPanel头部分组后的网格面板** - **效果**:在表头区域进行分组,使得表头更加清晰易读。 - **代码**:配置表头分组逻辑以适应不同的...

    ext学习之路

    ### ext学习之路:深入解析ExtJS 4.20的核心组件与应用 #### 构建与源码(build & source) 在深入探索ExtJS 4.20之前,理解其构建方式与源码结构至关重要。ExtJS的构建过程通常涉及将源代码编译成适合生产环境的...

    Ext扩展整理后吐血奉献

    标题中的“Ext扩展整理后吐血奉献”表明这是一篇关于ExtJS框架中扩展组件的深入解析文章。ExtJS是一个广泛使用的JavaScript库,用于构建富客户端Web应用,它提供了丰富的UI组件,包括表格、面板、窗口等。"吐血奉献...

    JavaScript的Ext JS框架中的GridPanel组件使用指南

    JavaScript的Ext JS框架中的GridPanel组件是一个强大的表格展示和管理工具,它允许开发者高效地处理大量数据,并提供了诸如数据排序、分组、编辑等多种功能。GridPanel与TreePanel虽然都有表格展示的功能,但...

    ext 做的书目系统Demo

    【标题】:“ext 做的书目系统Demo”是一个基于EXTJS开发的图书管理系统演示项目,EXTJS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计。它提供了丰富的用户界面组件,如数据网格、表格、选项卡面板...

    ExtJS-3.4.0系列目录

    - `Ext.form.FieldSet`:字段集,用于组织和分组表单元素。 5. **面板及布局** - **面板(Panel)**:作为内容容器,可以包含其他组件。面板支持多种布局方式。 - **布局类**: - `Auto`:自动布局,根据内容...

Global site tag (gtag.js) - Google Analytics