Grid.js文件
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
//这是ColumnModel的默认实现,在Grid中使用。 该类与一个列配置对象数组一起被初始化。
//dataIndex: grid中 Ext.data.Store 的Ext.data.Record 定义字段名称...
//renderer(可选) 一个用来根据单元格数值,为单元格产生HTML标签的函数。 参见setRenderer. 如果不指定...
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //自动显示行号
sm,
{header:'编号',dataIndex:'id',width:50,sortable:true},
{header:'名称',dataIndex:'name'},
{header:'颜色',dataIndex:'color'},
{header:'性别',dataIndex:'sex',renderer:renderSex}, //设置文字颜色和图片
{header:'描述',dataIndex:'descn',renderer:renderDesc} //添加按钮
]);
//数据
var data=[
['1','name1','#FBF8BF','男','descn1'],
['2','name2','#99CC99','男','descn2'],
['3','name3','#F5C0C0','女','descn3'],
['4','name4','#FFFFFF','男','descn4'],
['5','name5','#99CC99','女','descn5']
];
//Store类封装了Record 对象的客户端缓存,它负责向GridPanel 、ComboBox 或者DataView 这类组件提供数据输入。
//Store对象将使用配置 的DataProxy的实现类来加载数据,除非你直接调用loadData 方法并传入你的数据。
//Store对象不知道Proxy返回的数据的格式是什么。
//Store对象使用它配置的 DataReader 的实现类从数据对象创建Record 实例。这些Record将被缓存,可以通过访问函数访问。
var store=new Ext.data.Store({
//proxy:new Ext.data.MemoryProxy(data),
proxy:new Ext.data.PagingMemoryProxy(data),//配置了分页工具条时必须改成这句
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'color'},
{name:'sex'},
{name:'descn'}
])
});
var grid=new Ext.grid.GridPanel({
enableColumnMove:true, //True表示启动对Column顺序的拖拽,反之禁用
enableColumnResize:true, //设置为false可以禁止这个表格的列改变宽度 (默认值为 true).
stripeRows : true, //True表示使用不同颜色间隔行,默认为false.
autoHeight: true,
loadMask:true, //读取数据时的遮罩和提示功能,默认为false
renderTo:'grid', //该值可以是一个节点的id、一个DOM节点或者一个已存在的元素, 组件将会被渲染到其中
store:store, //Grid使用Ext.data.Store 作为自己的数据源(必需).
cm:cm, //由于展现grid的Ext.grid.ColumnModel对象,列定义的model (必需).
//sm:sm, //任何AbstractSelectionModel的子类都可以作为grid的选择模型(selection model)
sm:new Ext.grid.RowSelectionModel({singleSelect:true}), //只能选中其中一行
//bbar : Object/Array panel底部的工具栏。 可以是 Ext.Toolbar 对象
bbar:new Ext.PagingToolbar({ //创建分页工具条
pageSize:3, //每页显示几条数据
store:store,
displayInfo:true, //是否显示数据信息
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录" //没有数据时显示的信息
}),
viewConfig:{ //一个用于gird ui 视图的配置对象.Ext.grid.GridView中所有的配置项都可以设置...
forceFit:true, //Ture表示自动扩展或缩小列的宽度以适应grid的宽度,从而避免出现水平滚动条.
enableRowBody:true, //True表示在每一行的下面增加第二个TR元素,第二个TR元素用于在行数据的下面提供一个行主体
getRowClass: GetRowClass //重写这个函数可以在展现的时候应用自定义的CSS类.
}
});
//getSelectionModel() : SelectionModel 返回grid的SelectionModel。
//getSelections() : Array 返回所有选中的记录
grid.on('click', function() {
var selections = grid.getSelectionModel().getSelections();
for (var i = 0; i < selections.length; i++) {
var record = selections[i];
Ext.Msg.alert('提示', record.get("id") + "," + record.get("name") + "," + record.get("descn"));
}
});
//使用配置的Reader从Proxy中加载Record缓存。
//如果配置了分页工具条,那么store.load就必须在Grid以后执行
store.load({params:{start:0,limit:3}});
});
function renderSex(value){
if(value=='男'){
return "<span style='color:red;font-weight:bold;'>红男</span><img src='user_male.png' />";
}else{
return "<span style='color:green;font-weight:bold;'>绿女</span><img src='user_female.png' />";
}
}
function renderDesc(value,cellmeta,record,rowIndex,columnIndex,store){
var str="<input type='button' value='查看详细信息' onclick='alert(\""+
"这个单元格的值是:"+value+"\\n"+"这个单元格的配置是:{cellId:"+
cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}\\n"+
"这个单元格对应行的record是:"+record+",一行的数据都在里边\\n"+
"这是第"+rowIndex+"行\\n"+
"这是第"+columnIndex+"列\\n"+
"这个表格对应的ext.data.Store在这里:"+store+",随便用吧!"+
"\")'>";
return str;
}
//改变每行的背景颜色
function GetRowClass(record,rowIndex,p,ds){
var cls = 'white-row';
switch (record.data.color) {
case '#FBF8BF' :
cls = 'yellow-row'
break;
case '#99CC99' :
cls = 'green-row'
break;
case '#F5C0C0' :
cls = 'red-row'
break;
}
return cls;
}
html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简单的Grid使用</title>
<link href="../extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="Grid.css" rel="stylesheet" type="text/css" />
<script src="../extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../extjs/ext-all.js" type="text/javascript"></script>
<script src="PagingMemoryProxy.js" type="text/javascript"></script>
<script src="Grid.js" type="text/javascript"></script>
</head>
<body>
<script src="../ext-3.0.0/examples/shared/examples.js" type="text/javascript"></script>
<div id="grid">
</div>
</body>
</html>
Grid.css文件
.white-row{ background-color: white; }
.red-row{ background-color: #F5C0C0 !important; }
.yellow-row{ background-color: #FBF8BF !important; }
.green-row{ background-color: #99CC99 !important; }
分享到:
相关推荐
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...
在"Extjs tree and Grid(Buffer Grid,Progress Grid)"这个主题中,我们将深入探讨这两个核心组件以及它们的特定变体——缓冲网格(Buffer Grid)和进度网格(Progress Grid)。 1. **ExtJS Tree** - 树形控件...
ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——动态grid Extjs4开发笔记(四)——实现登录功能 Extjs4开发笔记(一)——准备工作 ...
"浅谈JavaScript库——jQuery,ExtJs的对比研究.pdf" 本文简要介绍了目前流行的JavaScript库,并对其中较为流行的两个库jQuery和ExtJs进行了较详细的介绍和对比研究。本文首先简要介绍了JavaScript库的概念和特点,...
根据给定的文件信息,我们可以深入探讨两个关键的Extjs组件——Tab Panel(标签页控件)和Grid(表格控件)。这两个控件是Extjs框架中非常实用且功能丰富的部分,广泛应用于Web应用程序的界面设计与交互逻辑构建。 ...
在本文中,我们将深入探讨`ExtJS`框架中的两个关键组件——`Ext日期时间控件`和`Spinner控件`,以及它们在`Grid`中的应用。`ExtJS`是一款强大的JavaScript库,专用于构建富客户端应用程序,尤其适用于创建复杂的、...
- **开始组件学习之旅**: 引导读者进入Extjs组件的学习之旅。 - **被设计得面目全非的按钮**: 介绍了Extjs中按钮组件的灵活性和可定制性。 - **日期选择器Ext.DatePicker**: 详细介绍了日期选择器组件的使用方法,...
首先,我们要了解EXTJS 3.0 的基础——面板(Panel)。面板是EXTJS 中最常用的组件,它可以包含其他组件,如表格、表单、按钮等,形成复杂的布局。面板支持多种布局模式,如fit、form、border等,能够灵活地适应不同...
在EXTJS教材和教程中,初学者会接触到EXTJS的核心组件之一——Grid Panel,这是一个功能强大的数据展示和操作工具。以下是对EXTJS Grid Panel的详细知识点解析: 1. **EXTJS Grid Panel的功能特性** - **丰富的...
### ExtJs教程_完整版 —— 第一章起步(1)关键知识点详解 #### 一、ExtJS概述 **1.1 极致的用户体验** ExtJS是一个强大的JavaScript框架,专为Web应用开发而设计。它以其优雅的API、丰富的组件集合以及出色的跨...
描述中的“extjs实例中文查询帮助文档”强调了文档的语言特性——中文,这对中国和亚洲其他地区的开发者来说是一大便利,因为中文文档能降低语言障碍,提高学习效率。同时,文档包含“所有函数及示例”,意味着它...
为了更好地学习和使用ExtJS,可以参考以下资源: - **官方网址**:http://extjs.com/,这里提供了最新的文档、教程和社区支持。 - **JS堂**:http://jstang.5d6d.com/index.php,这是一个中文社区,涵盖了大量关于...
3. 学习价值:"myextjs3demo"不仅展示了EXTJS3的基本使用,还参考了GitHub上的开源项目"iExtJs3",因此可以作为EXTJS3学习者的参考模板,帮助理解EXTJS3的实践应用。 四、EXTJS3与现代前端框架对比 虽然EXTJS3已有...
通过学习这些内容,一个ExtJS的新手开发者可以迅速地从入门到熟悉,并能够开始使用ExtJS创建出功能丰富、界面友好的Web应用程序。教程提供了大量的实例和代码段,有助于理解ExtJS的各种组件和类的用法。同时,教程也...
### ExtJS 中文手册2 —— 深度解析及应用实例 #### 一、ExtJS简介 ExtJS 是一种广泛应用于创建前端用户界面的强大工具,它作为一个与后台技术无关的前端 AJAX 框架,提供了丰富的功能和高度定制化的选项。在众多...