鸣谢: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表格(转)的更多相关文章

  1. ExtJS学习(三)Grid表格

    表格说明 Ext中的表格功能非常强大,包括排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能.表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xty ...

  2. ExtJS4.2学习(四)Grid表格中文排序问题(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/173.html --------------- ...

  3. ExtJS4.2学习(九)属性表格控件PropertyGrid(转)

    鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-15/178.html ------------- ...

  4. ExtJS4.2学习(12)基于表格的右键菜单(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/181.html --------------- ...

  5. ExtJS4.2学习(14)基于表格的扩展插件(2)(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-26/184.html --------------- ...

  6. ExtJS4.2学习(13)基于表格的扩展插件---rowEditing

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/182.html --------------- ...

  7. ExtJS4.2学习(10)分组表格控件--GroupingGrid(转)

    鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html ------------- ...

  8. ExtJS4.2学习(15)树形表格(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-27/185.html --------------- ...

  9. [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel

    使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将gr ...

随机推荐

  1. ASP.NET整理

      Asp.net六大对象 1.Request-->读取客户端在Web请求期间发送的值 常用方法: 1.Request.UrlReferrer请求的来源,可以根据这个判断从百度搜的哪个关键词.防 ...

  2. 消息推送SignalR

    一.什么是 SignalR ASP.NET SignalR is a library for ASP.NET developers that simplifies the process of add ...

  3. C# 使用Code First迁移更新数据库

    三步完成迁移: 1. 启用迁移: Enable-Migrations Enable-Migrations -ContextTypeName Mvc4WebSite.Models.MvcGuestboo ...

  4. 我的EntityFramework(2):简单的数据查询

    原文:我的EntityFramework(2):简单的数据查询 在上一篇博文中,已经搭建了基本的框架,接下来就进行简单的数据查询,这里主要用了Linq 常见的数据集查询 var companyList ...

  5. asp.net页面与页面之间传参数值

    一.利用POST传值 传值asp文件send.aspx  代码如下 复制代码 <form id="form1" runat="server" action ...

  6. Ant 修改项目pom.xml文件应用

    <?xml version="1.0" encoding="UTF-8"?> <project name="project" ...

  7. 3月3日[Go_deep]Populating Next Right Pointers in Each Node

    原题:Populating Next Right Pointers in Each Node 简单的链表二叉树增加Next节点信息,没什么坑.不过还是WA了两次,还是有点菜,继续做,另外leetcod ...

  8. iOS SEL的简单总结

    @interface Person : NSObject + (void)test1; - (void)test2; @end // 根据.h文件中定义的Person类和方法 执行完这行代码 在内存中 ...

  9. Js popup position which right under target item

    <div style="margin-left:600px;"> <div id="Span1" style="color:#eee ...

  10. Jxl操作excel的demo

    网上很多例子,都是用Jxl读或者写excel,本文实现的功能就是将数据源in.xls的第几行第几列数据写入到out.xls的第几行第几列,不覆盖out.xls其他原有的数据. 需要导入的包:jxl.j ...