<!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>无标题文档</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=[
['EasyJWeb', 'EasyJF','www.easyjf.com'],
['jfox', 'huihoo','www.huihoo.org'],
['jdon', 'jdon','www.jdon.com'],
['springside', 'springside','www.springside.org.cn']
];
//自定义列
function check(value)
{
if (value=='列1内容2')
{
return '<span style="color:red;font-weight:bold;">自定义列</span>';
}
else
{
return value;
}
}
//整理数据定义3列的索引为con1,con2,con3
var store=new Ext.data.SimpleStore({
data:data,fields:['name','organization','homepage']
});
//定义勾选框，不需要可不必定义
var sm = new Ext.grid.CheckboxSelectionModel();
//定义列
var colM=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//增加自动编号，不需要可不必定义
sm,//勾选框，不需要可不必定义
{header:'项目名称',dataIndex:'name',width:170,sortable:true,renderer:check},// 生成列，sortable为列排序，不需要设置为false，默认false，renderer为该列增加自定义函数
{header:'开发团队',dataIndex:'organization',width:170,sortable:true},
{header:'网址',dataIndex:'homepage',width:170}
]);
//生成表格
var grid = new Ext.grid.GridPanel({
renderTo:'show',
title:"我的表格",
height:200,
width:600,
cm:colM,
sm:sm,
store:store
});
});
</script>
<div id="show"></div>
</body>
</html>
这是我本人,用extjs2.0做的第一个表格,呵呵!!
分享到：
相关推荐
ExtJS 2.0的核心特性之一是组件化开发。它包含了一系列预定义的UI组件，如表格、面板、窗口、菜单、按钮等，这些组件可以像积木一样组合使用，构建复杂的Web界面。每个组件都有自己的属性、方法和事件，方便定制和...
GridPanel 是 ExtJS 中的核心组件之一，它能够展示表格数据，并提供了排序、分页、筛选等多种功能。在 ExtJS 2.0 中，GridPanel 的配置和使用涉及到以下知识点： 1. **创建 GridPanel**：首先，你需要定义数据源，...
4. **表格功能**：EXTJS 2.0 的表格组件（GridPanel）是其一大亮点，支持分页、排序、过滤、拖放等功能，并且可以与后台数据源无缝对接。此外，行编辑和列编辑让数据操作更加直观高效。 5. **表单组件**：EXTJS ...
14. **GridPanel**：网格面板是Ext.js中的复杂组件之一，用于展示二维数据表格。文档详细介绍了如何使用GridPanel及其列模型、行模型和分页功能。 15. **GridPanel扩展**：除了基础功能之外，Ext.js还允许开发者对...
**ExtJS2.0实用简明教程** **一、ExtJS简介** ExtJS是一个JavaScript库，专注于构建富客户端Web应用程序。在2.0版本中，它提供了丰富的组件库，包括表格、面板、菜单、对话框等，使得开发者可以构建功能强大、用户...
在EXTJS 2.0中，组件是构建应用程序的基本单元，它们可以是简单的按钮、表格，也可以是复杂的窗体和面板。UML模型图通常会使用类图（Class Diagram）来表示这些组件，类图会显示类的属性、操作以及它们之间的关系。...
2. **组件库**：ExtJS 2.0提供了众多预定义的组件，如表格（GridPanel）、表单（FormPanel）、树形视图（TreePanel）、菜单（Menu）等。教程会详细介绍这些组件的用法，包括配置项、事件监听、数据绑定等。 3. **...
在ExtJS 2.0中，导出功能是一项重要的特性，它允许用户将数据显示在表格或其他组件中，并将其导出为常见的文件格式，如CSV、Excel或PDF，以便于进一步处理或分享。 在ExtJS 2.0中实现导出功能通常涉及以下几个关键...
### ExtJs2.0简明教程 #### 一、ExtJS简介 ExtJS是一款基于JavaScript的前端框架，它提供了一套完整的用户界面解决方案，能够帮助开发者快速构建高性能、跨浏览器的Web应用程序。ExtJS2.0是该框架的一个重要版本，...
在"extjs2.0 画的一个带查询条件和查询结果的页面"这个主题中，我们主要探讨如何使用ExtJS 2.0版本来设计一个具有搜索功能的用户界面。这个界面包括查询条件输入区域和展示查询结果的区域。 首先，我们需要了解...
20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与服务器交互 27)Record 28)Store 29)TreePanel基本使用 30)使用树控件TreeNode 31)使用树控件...
对于GridPanel中拖动选中行排序的实现，网上有不少ExtJs实现的例子，但是没有找到使用Ext.net实现的，正好最近有个需求要使用，干脆来写一个。 DEMO功能说明： 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
同时，"extjs2.0例子"提供了示例代码，有助于理解和应用所学知识。 通过深入学习"掏钱学EXTJS完全版"，开发者不仅能掌握EXTJS 2.0的核心技术，还能建立起对Web前端开发的深入理解，为后续EXTJS的升级学习或其他前端...
5. **表格组件**：如Ext.grid.GridPanel，用于显示和编辑表格数据，支持分页、排序、过滤等功能。 6. **树形组件**：如Ext.tree.TreePanel，用于展示和操作树形数据结构。 7. **菜单和工具栏**：如Ext.menu.Menu和...
组件是EXT的基本构建块，可以是按钮、表格、面板等，它们都继承自EXT的基础组件类。EXT提供了丰富的组件库，允许开发者创建复杂且交互性强的用户界面。布局管理器则负责在容器中安排这些组件，确保它们在不同屏幕...
例如，可以通过ExtJS的GridPanel展示数据，使用FormPanel处理用户输入，结合Store和Proxy进行数据的加载和保存。此外，还可以利用布局管理器实现灵活的界面布局，以及利用ExtJS的事件系统实现组件间的通信。 总的来...