<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>中国Java开源产品及团队</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
</head>
<body>
<script>
Ext.onReady(function(){
//定义数据二维数组
var data=[
['1','male', 'nam1','descn1'],
['2', 'female','nam2','descn2'],
['3', 'male','nam3','descn3'],
['4', 'female','nam4','descn4'],
['5', 'male','nam5','descn5'],
];
function renderSex(value) {
if(value == 'male'){
return "<span style='color:red:font-weight:bold:'>红男</span>";
} else {
return "<span style='color:green:font-weight:bold:'>绿女</span>";
}
}
//整理数据定义3列的索引为id,name,descn
var store=new Ext.data.SimpleStore({
data:data,fields:['id','sex','name','descn']
});
//定义勾选框，不需要可不必定义
var sm = new Ext.grid.CheckboxSelectionModel();
//定义列,在这里定义每列的宽度
var colM=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//增加自动编号，不需要可不必定义
sm,//勾选框，不需要可不必定义
{header:'编号',dataIndex:'id',width:170,sortable:true},// 生成列，sortable为列排序，不需要设置为false，默认false，renderer为该列增加自定义函数
{header:'性别',dataIndex:'sex',width:170,renderer:renderSex}, // sortable进行排序
{header:'名称',dataIndex:'name',width:170,sortable:true},
{header:'描述',dataIndex:'descn',width:170}
]);
//生成表格
var grid = new Ext.grid.GridPanel({
renderTo:'show',
title:"中国Java开源产品及团队",
height:200,
width:600,
cm:colM,
sm:sm,
store:store,
viewConfig: {
forceFit:true
},
bbar: new Ext.PagingToolbar({
pageSize:10,
store:store,
displayInfo:true,
displayMsg: '显示第{0}条到{1}条记录,一共{2}条',
emptyMsg:'没有记录'
})
});
});
</script>
<div id="show"></div>
</body>
</html>
放在extjs包下,就可以运行,注意指定:ext-all.css;ext-base.js;ext-all.js文件的路径.
分享到：
相关推荐
4. **Grid组件**：EXTJS 2.0的Grid组件是其一大亮点，支持分页、排序、过滤和拖放功能，可处理大量数据并提供高效的显示效果。源码分析有助于理解其背后的性能优化策略。 5. **表单元素**：EXTJS 2.0提供了丰富的...
ExtJS是一种基于JavaScript的开源富客户端框架，特别适用于构建企业级的Web应用程序。...文档《ExtJs2.0学习系列.doc》应包含了关于这些主题的详细教程和示例，是学习ExtJS 2.0不可或缺的参考资料。
由于无法直接查看图像内容，我将基于标题、描述和标签的内容，为您提供关于ExtJs2.0中文手册的知识点概述。 ExtJs是一个强大的JavaScript框架，用于创建富互联网应用（RIA）。它提供了一套丰富的组件和工具来构建...
在ExtJS 2.0版本中，智能提示（Intelligent Hinting）是一项关键特性，它增强了开发人员的编码体验，提高了开发效率。智能提示功能提供了自动补全、代码提示以及类库方法和属性的快速参考，使得编写ExtJS代码更为...
ExtJS 是一个很不错的Ajax 框架，可以用来开发带有华丽外观的富客户端应用，ExtJS 是一个用javascript 编写，与后台技术无关的前端ajax 框架...本教程主要是针对ExtJS2.0 进行介绍，全部代码、截图等都是基于ExtJS2.0。
ExtJS 2.0是一个基于JavaScript的开源AJAX框架，专为构建富互联网应用程序（RIA）而设计。它提供了一套完整的组件模型、数据绑定机制、丰富的用户界面控件和强大的API，使得开发者能够轻松创建功能强大且交互性强的...
这个"ExtJS2.0.rar"压缩包包含了关于如何使用ExtJS 2.0的资源，特别是"ExtJS2.0实用简明教程.chm"，这是一份详细的指导文档，可以帮助开发者快速掌握该框架的核心概念和技术。 ExtJS 2.0的主要特点包括： 1. **...
4. **事件处理**：GridPanel 提供了多种事件，如 cellClick、rowDblClick 等，可以绑定事件处理器函数以响应用户交互。 5. **排序和分页**：通过设置 GridPanel 的 sortableColumns 和 pagingToolbar 属性，可以...
在本资源包中，我们重点关注的是ExtJS的2.0版本及其相关的API文档和实用开发指南，这对于初学者理解并掌握这个框架至关重要。 首先，ExtJS 2.0是该框架的一个早期版本，虽然现在已经有了更新的版本，但每个版本都有...
最近我们在几个应用都使用到了ExtJS，对公司以前开发的一个OA系统也正在使用ExtJS2.0进行改造，使得整个系统在用户体验上有了非常大的变化。本教程记录了前段时间本人学习ExtJS的一些心得及小结，希望能帮助正在学习...
EXTJS2.0是一款强大的JavaScript框架，主要用于构建富客户端应用程序，尤其在企业级Web应用的前端界面设计上表现卓越。这个项目是利用EXTJS2.0来开发的一个派出所的网站和后台管理系统，它展示了EXTJS在实现高效、...
ExtJS 2.0 是一个历史悠久的...通过研究和实践这些例子，你将能够熟练地运用ExtJS 2.0开发出功能丰富、用户友好的Web应用。虽然ExtJS已经发展到更高版本，但2.0版的基础知识对于理解后续版本仍然是至关重要的。
ExtJS表格面板（GridPanel）是Sencha Ext JS框架中的一个核心组件，它用于展示大量结构化数据。在本文中，我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例，以及与其相关的源码和工具。 首先，让我们...
这个"ExtJS2.0中文API珍藏版"提供了一套完整的文档，使开发者能够更方便地理解和使用ExtJS 2.0版本的功能。API（Application Programming Interface）是软件开发中的一个重要概念，它定义了开发者如何与库或框架进行...
ExtJS 2.0 是一个基于 JavaScript 的前端框架，用于构建富互联网应用程序（RIA）。它提供了丰富的组件库，包括各种用户界面元素，如表格、窗口、菜单和表单控件等。在本例中，我们将重点讨论如何在 ExtJS 2.0 中实现...
本教程主要聚焦于ExtJS 2.0版本的核心API，帮助开发者深入理解和运用这个框架。 **一、ExtJS基本概念** 1. **组件（Components）**: ExtJS的核心是其组件系统，包括按钮、表格、面板、窗口等，这些组件构建了整个...
4. **表格功能**：EXTJS 2.0 的表格组件（GridPanel）是其一大亮点，支持分页、排序、过滤、拖放等功能，并且可以与后台数据源无缝对接。此外，行编辑和列编辑让数据操作更加直观高效。 5. **表单组件**：EXTJS ...
EXTJS 2.0的官方范例，离线html格式！
EXTJS 2.0 是一个历史悠久的JavaScript框架，由Sencha公司开发，它以其强大的组件化、可定制性和丰富的用户界面而闻名。这个版本包含了17套不同的主题皮肤，为开发者提供了更多的选择来满足不同项目的需求，使得应用...