ExtJS4.2学习(三)Grid表格(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/172.html
----------------------------------------------------------------------------------------------
Ext中的表格功能非常强大,包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xtype为grid。在EXT中,表格控件必须包含列定义信息,并指定表格的数据存储器。表格数据最起码有列、数据、转换原始数据这3项。列信息由数组columns定义,表格的数据存储器由Ext.data.Store来定义。store负责把各种各样(如二维数组、JSON对象数组、XML文本等)的原始数据转换成Ext.data.Record类型的对象。通过Ext.data.ArrayStore我们可以把任何格式的数据转化成表格可以使用的形式,这样就不需要为每种数据格式写一个对应的实现了。
制作一个简单的表格及属性说明
/*** Grid*///表格数据最起码有列、数据、转换原始数据这3项 Ext.onReady(function(){ //定义列 var columns = [ {header:'编号',dataIndex:'id'}, //sortable:true 可设置是否为该列进行排序 {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]; //定义数据 var data =[ ['1','张三','描述01'], ['2','李四','描述02'], ['3','王五','描述03'], ['4','束洋洋','思考者日记网'], ['5','高飞','描述05'] ]; //转换原始数据为“EXT可以显示的数据” var store = new Ext.data.ArrayStore({ data:data, fields:[ {name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置 {name:'name'}, {name:'descn'} ] }); //加载数据 store.load(); //创建表格 var grid = new Ext.grid.GridPanel({ renderTo:'grid', //渲染位置 store:store, //转换后的数据 columns:columns, //显示列 stripeRows:true, //斑马线效果 //enableColumnMove: false, //禁止拖放列 //enableColumnResize: false, //禁止改变列宽度 loadMask:true, //显示遮罩和提示功能,即加载Loading…… forceFit:true //自动填满表格 }); });
看见看出,相比easyui,Extjs将Gird代码进行了分离,将列、数据的定义拆分出来,这样代码看起来更加清醒。
运行结果:
ExtJS4.2学习(三)Grid表格(转)相关推荐
- ExtJS4.2学习(14)基于表格的扩展插件(2)
我曾经在第6节里讲到表格分页,还记得之前的分页组件是什么样的吗? 上面只有文字显示,我们来为其制作的更美观点,好吧,不卖关子了,讲本节的内容:进度条分页控件,这是表格扩展组件. 首先我们需要引入扩展组 ...
- ExtJS4.2学习(10)分组表格控件--GroupingGrid
分组表格控件在我们的开发中经常被用到,GroupingGrid分组表格就是在普通表格的基础上,根据某一列的数据显示表格中的数据分组的表格控件.举个例子给大家,比如某些信息用树形显示觉得有点大才小用,树 ...
- ExtJS4.2学习(10)分组表格控件--GroupingGrid(转)
鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html ------------- ...
- iView学习笔记(三):表格搜索,过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
- LaTex学习教程——简单表格(三行线、普通表格)
普通表格 \begin{table}[h] % [h]表格在文中放置的位置\centering %作用是使表格居中\begin{spacing}{1.35} %调整表格行距\caption{Natio ...
- java propertygrid_ExtJS4.2学习(九)属性表格控件PropertyGrid
PropertyGrid是在上节我们说的Editor的基础上开发的更灵活的高级表格组件,下面我们来看下它的功能和应用方式: 属性表格扩展自EditGrid,所以可以直接编辑右边的内容.注意,只有右边的 ...
- php liger 表格排序,LigerUI之grid表格点击表头标题排序实现
LigerUI之grid表格点击表头标题排序实现: 通过ajax方式加载数据之后,点击表头排序两种方式实现. 第一种: grid.set({ dataAction: 'local', url: '', ...
- 初中三年级计算机表格考试模拟,初中三年要做这些事情,三张表格说透初中三年,收藏必看...
原标题:初中三年要做这些事情,三张表格说透初中三年,收藏必看 初中三年是为中考而不断向前的日子,初中三年如何成长,如何有规划的学习? 初一大事表 ▲▲▲ 第一年,特别是第一学期,孩子刚上初中,同学间大 ...
- 3、Latex学习笔记之表格篇
目录 表格 1.基本结构 1.1框架 1.2行高 1.3标题 1.4标签 1.5居中 1.6表格 2.引用表格 3.常见表格类型 3.1三线表 3.2 斜线表头 3.3合并单元格 4.在线表格生成工具 ...
最新文章
- 使用Spring框架的好处
- Python编程基础:第二十二节 关键字参数Keyword Argument
- linux内核字符串逆序,Linux内核中常用字符串函数实现
- Visual C#设计多功能关机程序
- python中合并列表_关于python:如何将两个列表合并到一个列表中?
- Docker学习总结(43)——Docker Compose 搭建Mysql主从复制集群
- GPU成为主流 NVIDIA GRID亮相Citrix Synergy 2017
- DropDownList操作;ListBox操作;动态创建控件;Response.Write(欢迎学习ASP.NET''!);
- 笨办法学C 练习31:代码调试
- Spring的概述及主要模块
- adb for linux 工具包,Linux(Ubuntu)下配置安装adb工具
- 短信业务 ——HTTP接口文档
- windows操作系统与linux操作系统相比各有什么优缺点
- 经典C语言程序设计100例
- Python天天美味(15) - Python正则表达式操作指南(re使用)(转)
- 好好编程-物流项目21【订单管理-新增订单】
- ARM Cortex-A 系列处理器天梯图
- TLS1.3TLS1.2形式化分析
- 本人亲自整理的极客时间设计模式之美下部的硬核笔记(残缺版)最近加班太多,搞不了太多,只能尽量了xd们
- 【BI学习心得10-时间序列实战】