这里从一个最简单的grid表格开始讲起!
grid其实就是实现数据显示的表格，但其功能比HTML中的table功能要强很多，具体强在那里，接下来会一一介绍！
grid中最重要最常用的属性主要有以下几个：store,autoExpandColumn ,cm(colModel ) ,columns ,disableSelection ,enableColumnHide ,enableHdMenu, loadMask ,sm(selModel) ,stripeRows ,trackMouseOver ,view ,viewConfig ....相对来说属性设置项比较多，我们下面就从一个简单的例子来说明gridPanel的最简单的用法
grid_01.js
Ext.onReady(function(){
var data = [['1','you','you_5214@sina.com'],//数据内容信息
['2','wen','you_5214@sina.com'],
['3','xing','you_5214@sina.com']];
var fields = ['id','name','email'];
var store = new Ext.data.SimpleStore({
fields:fields
});
store.loadData(data);
function changeColor(val){
if('2'==val){
return '<span style="color:red;">' + val + '</span>';
}else{
return val;
}
};
var panel = new Ext.grid.GridPanel({
title:'grid表格用法用',
applyTo :Ext.getBody(),
store:store,//设置数据源
enableDragDrop :true,//是够允许拖拽
autoExpandColumn :'0',//默认延伸的字段，在这里0表示的ID所在的列的宽度自动适应整个表格的宽度
enableHdMenu :false,//是够隐藏视图菜单信息
stripeRows :true,//是否隔行显示不同的背景颜色!
frame : true,
columns:[//表格的列模式，即表格的现实方式，对应表格字段信息和显示的信息，renderer表示渲染函数
//header表示列显示信息，dataIndex对应的数据列字段
{header:'id',width:40,dataIndex:'id',renderer:changeColor},
{header:'用户名',width:100,dataIndex:'name'},
{header:'E-mail',width:200,dataIndex:'email'}],
width:400,
autoHeight:true
})
})
grid_01.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>grid_01.html</title>
<style type="text/css">
body{background-color:#777777}
</style>
<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Ext/ext-all.js"></script>
<script type="text/javascript" src="grid_01.js"></script>
</head>
<body>
</body>
</html>
代码很简单，先把最最简单的例子运行起来看看效果！
分享到：
相关推荐
#### 一、Ext组件概览 Ext是一个功能丰富的JavaScript框架，用于构建桌面级Web应用程序。它提供了大量的组件和工具，使得开发者能够快速且高效地构建用户界面。对于初学者而言，理解这些组件的基础概念和使用方法是...
对于GridPanel中拖动选中行排序的实现，网上有不少ExtJs实现的例子，但是没有找到使用Ext.net实现的，正好最近有个需求要使用，干脆来写一个。 DEMO功能说明： 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
GridPanel 是 ExtJS（Ext.NET 的基础）中的一个重要组件，用于展示数据表格。在这个场景中，我们将深入探讨如何使用Ext.NET代码动态创建GridPanel，并在各种窗口中灵活展示。 1. **动态创建GridPanel**： 在Ext...
在Ext JS这个强大的JavaScript框架中，GridPanel是一个非常重要的组件，用于展示数据表格。然而，在实际应用中，可能会遇到一个常见的问题：当GridPanel需要进行第二次加载时，数据或者功能可能会丢失。这个问题主要...
在Tapestry 4.02中封装Ext的GridPanel组件，意味着开发者将ExtJS的GridPanel功能集成到Tapestry应用中，使Tapestry应用能够利用GridPanel的强大功能。这个过程通常涉及到以下几个关键步骤： 1. **引入ExtJS库**：...
Ext GridPanel 是该框架中的一个重要组件，常用于展示表格数据。本文将详细介绍如何在 Ext GridPanel 中实现加链接操作，包括基本原理、代码实现及注意事项。 #### 一、Ext GridPanel 基础 在了解如何添加链接之前...
`Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。对于初学者或者希望深入理解`GridPanel`特性的Web开发人员来说，掌握其...
EXT GridPanel是EXT JS库中的一个核心组件，用于创建数据密集型的表格视图。它在Web应用程序中常用于展示大量结构化数据，并提供多种交互功能，如排序、分页、筛选和编辑等。在EXT GridPanel中，获取某一单元格的值...
首先，Ext2.2的GridPanel是用于展示数据的组件，具有强大的功能，如排序、分组、筛选等。分页功能可以通过配置`pagingToolbar`实现，它提供了一种用户友好的界面来控制数据的显示页数。以下是一个基本的配置示例： ...
### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**：Box Component 是一个非常基本的 Ext 组件，主要用于定义具有边框和其他布局属性的...
ExtJS是一个强大的JavaScript框架，它提供了丰富的组件和功能，用于构建复杂的Web应用程序。RowExpander插件是ExtJS中一个非常有用的特性，允许我们在GridPanel的每一行中添加一个可展开的区域，展示更多的详细信息...
它提供了一整套组件，包括GridPanel，这是一个强大的数据展示工具，能够处理大量数据并支持各种交互功能。"ext gridpanel 跨行"这个主题主要涉及到在GridPanel中实现单元格或行的跨行显示，这在展示复杂数据或需要...
"Ext Form GridPanel"是Ext JS库中的一个重要组件，它结合了表格（Grid）和表单（Form）的功能，提供了一种强大而灵活的方式来显示和编辑数据。在Web应用程序开发中，这种组件常用于数据录入和展示，尤其适用于处理...
EXTJS的核心是其组件模型，GridPanel就是其中一种非常重要的组件，常用于展示数据表格。这个实例"EXTJSEXT实例GridPanel"旨在教授如何在EXTJS中创建并使用GridPanel。 GridPanel是EXTJS中的一个核心组件，它允许...
后来公司让改变一个Gridpanel的展现方式，要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久，也没有找到框架的相应控制方法，然后在网上找了很久，也没有找到有人给去示例，无奈就只能自己写JS来控制...
JavaScript的Ext JS框架中的GridPanel组件是一个强大的表格展示和管理工具，它允许开发者高效地处理大量数据，并提供了诸如数据排序、分组、编辑等多种功能。GridPanel与TreePanel虽然都有表格展示的功能，但...
1. **GridPanel.xdc**：GridPanel是ExtJS中的核心组件之一，用于展示表格数据。自定义的GridPanel可能包含对默认功能的扩展，如更复杂的排序、分页、过滤功能，或者自定义列渲染，甚至集成拖放操作等。自定义...
1. **组件化设计**：EXT3.0提供了一系列可重用的UI组件，如表格、面板、表单、树形视图、菜单、工具栏、窗口等。这些组件都有详细的配置选项，可以根据需求进行定制，大大简化了页面布局和元素创建。 2. **数据绑定...
1. **EXT GridPanel的基本结构**：EXT GridPanel由一系列配置选项和列定义组成。配置选项可以包括数据源（如Store）、列宽、行高、分页设置等。列定义则包含了列的标题、数据字段映射、对齐方式、是否可排序等属性。...
1. 首先，创建一个Ext JS的PagingToolbar实例，并将其与相应的Store和GridPanel关联。 2. 在PagingToolbar的配置中，添加PageResizer组件，指定其行为（如下拉菜单或滑动条）和可选的每页记录数。 3. 编写必要的事件...