Grid分组特性
Ext.onReady(function () {
Ext.define('personInfo', {
extend: 'Ext.data.Model',
fields: ['name', 'salary','country']
});
var datas = [//memory类型的Proxy中有一个配置项data,对应的值是可选的纪录的数组,用数组定义一条纪录中的各个item
['刘一', 2500,'China'],//因此就是利用了二维数组来定义。JS中定义数组有两种方式,利用Array定义和字面值定义,字面值
['黄小珠', 1500,'China'],//即是利用[]来定义数组变量值与Object变量的定义方式利用{}来定义是不同的。
['李凡达', 2000, 'USA'],
['柳小刀',3000,'India'],//
['杨宇',2000,'French']//
];
var firstStore = Ext.create('Ext.data.Store', {
storeId: 'store1',
groupField:'country',
model: 'personInfo',
proxy: {
type: 'memory',
data: datas,
reader: 'array'
},
autoLoad: true
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 400,
title: '表格分组特性',
frame: true,
store: Ext.data.StoreManager.lookup("store1"),
// selModel: { selType: 'checkboxmodel' },
//multiSelect: true,
tbar: [
{
text: '表格分组特性',
handler: function () {
var msg = '';
var msg1 = { hobby: "fish" };
var rows = grid.getSelectionModel().getSelection();//返回值是Ext.data.Model[]
for (var i = 0; i < rows.length; i++) {
msg = msg + rows[i].get('name') + '\n';//rows[i]是某条记录,利用Model的get函数取出记录中
}//指定字段的值。
//alert(msg);
}
}],
features: [Ext.create('Ext.grid.feature.Grouping', {
groupByText: '用本字段分组', showGroupsText: '显示分组',
groupHeaderTpl: '国籍:{name} ({rows.length})', startCollapsed: true//设置初始渲染页面时收缩分组
//groupHeaderTpl中[name}即是分组根据字段名。rows.length就是每个分组中记录个数
})],
columns: [
{
header: '姓名', dataIndex: 'name', width: 100, sortable: true
},
{
header: '薪资', dataIndex: 'salary', flex: 1
},
{header:'国籍',dataIndex:'country',flex:1}
]
});
});
Grid分组特性的更多相关文章
- Grid分组汇总
Ext.onReady(function () { Ext.define('personInfo', { extend: 'Ext. ...
- ExtJS4.2学习(11)——高级组件之Grid
大纲: 1.首先,搭建起来一个最基础的Grid组件: 2.其次,利用前边MVC架构将代码重构: 3.再者,介绍下Grid的一些特性. 一.搭建基础的Grid组件 在文章的开始,我们首先简单的搭建一个G ...
- Extjs grid 组件
表格面板类Ext.grid.Panel 重要的配置参数 columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn) 重要的配置参数 tex ...
- Asp.net Core的Swagger接口根据模块、版本分组
近期一直在学习Asp.net Core,微软的文档太难看,都是英文翻译过来的,很不友好,感谢这个博客,从壹开始前后端分离[ .NET Core2.0 +Vue2.0 ],让我入门了,刚学到这个Swag ...
- 零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」
原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的 ...
- oracle之分组函数
分组函数 5.1 最重要的五个分组函数 sum(); avg(); count(); max(); min(). 数值类型可以使用所有组函数SQL> select sum(sal) sum, a ...
- .NET Core Swagger 的分组使, 以及相同Action能被多个分组公用,同时加载出尚未分组的数据出来
1.本文章参考 点击链接跳转 改写的 一对多分组模式.需要一对一的可以参考 2.本文主要讲的是 一对多 分组公用, 同时把尚未分组的加载出来 3.效果演示GIF图: 具体操作代码如下: 1.在项目创建 ...
- 【6年开源路】海王星给你好看!FineUI v4.0正式版暨《FineUI3to4一键升级工具》发布!
去年10-28号,我发布了一篇文章<海王星给你好看!FineUI v4.0公测版发布暨<你找BUG我送书>活动开始>,标志着FineUI开始向4.0版本迈进.经过4个月3个公测 ...
- Operating System Memory Management、Page Fault Exception、Cache Replacement Strategy Learning、LRU Algorithm
目录 . 引言 . 页表 . 结构化内存管理 . 物理内存的管理 . SLAB分配器 . 处理器高速缓存和TLB控制 . 内存管理的概念 . 内存覆盖与内存交换 . 内存连续分配管理方式 . 内存非连 ...
随机推荐
- 测试C#代码执行时间
这个测试方法不是太精确,不过在同等环境下 可以测试下C#代码逻辑的执行性能吧 网上Copy来的. System.Diagnostics.Stopwatch stopwatch = new System ...
- 线程操作API
线程操作API 1.currentThread 2.getId() .getName().getPriority().getStart.isAlive().isDaemon().isInterrupt ...
- Box of Bricks最小移动砖块数目
Description Little Bob likes playing with his box of bricks. He puts the bricks one upon another and ...
- java遍历Map的几种方式
1.遍历map的几种方式:private Hashtable<String, String> emails = new Hashtable<String, String>(); ...
- MIFARE系列5《存储结构》
Mifare S50把1K字节的容量分为16个扇区(Sector0-Sector15),每个扇区包括4个数据块(Block0-Block3),我们也将16个扇区的64个块按绝对地址编号为0~63,每个 ...
- .NET开源工作流RoadFlow-快速入门
在环境搭建好之后,我们就来学习一下怎样快速创建一个流程,并执行和流转该流程(我们这里讲的只是入门,不涉及到具体流程参数设置). 创建一个流程步骤为:在数据库在创建表-->设计表单-->设置 ...
- Android--将图片存放到我们本地
代码里面有详细的解释,我就不多说了 //处理并保存图像 private File dealPhoto(Bitmap photo){ FileOutputStream fileOutputStream ...
- ios多线程的几种创建方式以及基本使用
1.第一种,NSThread方法,此方法使用很少! 2.NSOperation,面向对象的多线程技术 3. NSObject多线程技术 4.苹果推荐使用的GCD技术 5.GDC中的队列
- [译]AMQP 0-9-1 Quick Reference : basic
Basic basic.ack(delivery-tag delivery-tag, bit multiple)Support: fullAcknowledge one or more message ...
- Windows完成端口网络模型
GetQueuedCompletionStatus 比如此时端口上完成的是什么操作,数据是什么等,还有,系统如何做到自动填充上述的结构的,也就是说,系统怎么知道在Overlap->OpCode ...