Ext.onReady(function(){
//数组
var data = [[1,'张三',24],[2,'李四',30],[3,'王五',22]];
//创建记录类型Person,mapping值为字段值对应数组中的索引位置
var Person = Ext.data.Record.create([
{name: 'personId',mapping: 0},
{name: 'personName',mapping: 1},
{name: 'personAge',mapping: 2}
])
//创建每一列的header
var cm = new Ext.grid.ColumnModel([
{header : 'id',width : 50 , dataIndex: 'personId' ,sortable : true},
{header : '姓名',width : 60 ,dataIndex: 'personName' ,sortable : true},
{header : '年龄',width : 60 ,dataIndex: 'personAge',sortable : true}
]);
//grid面板
var grid = new Ext.grid.GridPanel({
title : '简单grid示例',
applyTo: 'grid',
width : 250,
height : 150,
frame : true,
store : new Ext.data.Store({
reader : new Ext.data.ArrayReader({},Person),
data : data
}),
cm : cm
});
});
index.html
<html>
<head>
<title></title>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="js/grid.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
分享到：
相关推荐
extjs树型表格组件的使用示例,详细说明可以参见http://blog.csdn.net/snail_spoor/article/details/39698037
第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree...
第十四讲: EXTJS4.0的高级组件Grid补充01选择模式Selection和表格特性Feature 第十五讲: EXTJS4.0的高级组件Grid补充02插件和其他相关知识 第十六讲: EXTJS4.0的高级组件Tree上 第十七讲: EXTJS4.0的高级组件Tree下 ...
实现extjs4 的树、grid、form、query等大部分组件的功能
第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree下 ...
第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree下 ...
对于GridPanel中拖动选中行排序的实现，网上有不少ExtJs实现的例子，但是没有找到使用Ext.net实现的，正好最近有个需求要使用，干脆来写一个。 DEMO功能说明： 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
ExtJs最开始基于YUI技术，由开发人员 JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是 一款不可多得的JavaScript客户端技术的精品。 ...
深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...
extjs提供了方便的表格组件grid供使用，但是默认情况下表格中的文本是不能被选中的，自然也是无法复制的，下面就为大家介绍下选择复制功能如何启用，感兴趣的朋友可以了解下
本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
第十九章：叹为观止的表格组件——GridPanel 132 一、表格、表格面板 132 二、列模型与数据 132 三、加强版的列模型 135 四、小结 138 第二十章：行模型与Grid视图 139 一、行选择模型 139 二、Grid视图 143 三、小...
本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
前言 第1章 认识ExtJS 1.1 ExtJS的精彩表现 ...第12章 Grid组件 第13章 Tree组件 第14章 ExtJS与服务端框架的整合 第15章 主题 第16章 Ext.Direct 第17章 Draw图形 第18章 Chart图表 附录A
因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员 JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的...
这是对ExtJS学习的一个小总结，做成了一...部分案例通过ExtJS页面直接操作后台数据，还包括了poi,jxl生成Excel表格的操作，以及grid在前台导出表格的实现，适合有一定JavaScript基础的人用来作为学习ExtJS框架的参考。
………..35 第六章 使用表格控件Grid……….………………………………………………………………………………..……36 6.1 基本表格GridPanel……….…………………………………………………………………………...
浮动组件（代码） 数据绑定/控制器 用React绑定（代码） 使用Redux处理应用程序状态（代码） 使用MobX处理应用程序状态（代码） 资料储存库 使用React （代码） 加载，排序和过滤数据 使用Redux处理数据（代码...
Panel里包含2个组件，在2个组件间传递参数显示数据。 三、开发工具和采用技术 1、开发工具：Eclipse、MyEclipse和其他IDE。 2、采用Spring 3中最新最稳定的Spring MVC 3.2.8版本。 3、采用Hibernate 4.1.7。Spring...