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中，"Filter"功能是用来处理数据网格（Grid）中的数据过滤，它允许用户根据特定条件快速筛选和查找所需信息。表格过滤是提高用户体验和数据管理效率的重要工具，尤其在处理大量数据时。 在"ExtJs Filter ...
在EXTJS 4中，树形表格组件不仅支持基本的节点操作，如展开、折叠、拖放，还提供了丰富的数据绑定和筛选功能，是处理复杂数据结构的理想选择。 首先，让我们深入了解一下EXTJS 4树形表格组件的特性： 1. **层级...
在这个"extjs动态表格实例"中，我们将探讨如何使用ExtJS封装Grid并从Struts2框架的后台获取数据。 首先，让我们了解ExtJS中的Grid组件。Grid是ExtJS的一个关键组件，它用于展示结构化数据，并支持多种操作，如排序...
ExtJS表格Grid是一款强大的JavaScript组件，它在Web应用中用于展示和操作数据，尤其是在复杂的业务逻辑和大量数据处理中表现出色。这篇博客文章主要探讨了ExtJS Grid的全面功能，结合源码分析和实用工具，帮助开发者...
首先，动态表格的核心组件是`Ext.grid.Panel`，它是ExtJS中的表格视图。这个组件提供了多种功能，包括排序、筛选、分页、编辑等。通过设置不同的配置项，我们可以调整表格的外观和行为，例如列宽、行高、表头样式、...
#### 一、ExtJs表格超链接渲染 在ExtJs框架中，我们经常需要在表格（`Ext.grid.Panel`）中显示超链接，并且当用户点击这些超链接时，能够获取到当前行的数据。为了实现这一功能，我们可以使用`renderer`函数对...
在ExtJS中，表格（Grid）是一种常用的数据展示组件，它允许用户以网格形式查看、编辑和操作大量数据。"extjs 简单表格"这个主题，我们将探讨如何在ExtJS中创建和使用基本的表格。 首先，我们需要理解ExtJS表格的...
总之，理解并实现ExtJS 5中的Grid间数据拖放是一项技术含量较高的任务，它涉及到对ExtJS组件模型、事件系统、数据管理以及UI交互设计的深入掌握。通过实践和学习，开发者可以构建出更加动态和用户友好的Web应用程序...
总结，实现ExtJS表格合并代码的关键在于理解表格组件的结构、配置和模板机制，并能妥善处理浏览器之间的兼容性问题。通过细心的CSS调整和对盒模型的深入理解，我们可以创建出在各种浏览器下表现一致的表格应用。在...
在ExtJs框架中，Grid组件是一种非常常用的展示数据表格的方式，它提供了丰富的功能，包括数据的排序、分页、过滤以及行选择等。在实际应用中，经常需要根据用户交互来判断Grid中的行是否被选中，以便进行下一步的...
2. **Grid（网格）**: Grid组件用于展示表格数据，支持排序、分页、选择行等功能，是数据展示的重要组件。 3. **Form（表单）**: ExtJS提供了多种表单组件，如文本框、下拉框、复选框、按钮等，以及表单验证功能，...
- **Filter Model**：ExtJS Grid中的过滤功能基于Filter Model。每个列都可以有自己的过滤器，用户可以根据需要定义过滤条件。 - **Filter Types**：多种内置过滤器类型，如文本、数字、日期等，满足不同数据类型...
2. **数据导出**：在EXTJS中，数据导出功能通常涉及到将Grid中的数据显示在其他格式，如CSV、PDF或Excel中。这通常是通过编写自定义插件或者扩展Grid的功能来实现的。 3. **EXTJS 3.2.0**：这是EXTJS的一个特定版本...
在EXTJS4中，开发人员可以利用其丰富的组件库来构建功能强大的Web应用程序。这个库提供了多种组件，如树（Tree）、网格（Grid）、表单（Form）和查询（Query）功能，使得用户界面的创建变得更为便捷。下面将详细阐述...
`Grid`组件用于展示表格数据，支持排序、分页和编辑等功能。每个组件都有丰富的配置项和API，允许开发者自定义其行为。 对于源码的探索，了解组件的工作原理和内部结构是提升开发效率的关键。通过阅读ExtJS的源码，...
在ExtJS4中，我们可能有以下场景：用户在Grid中查看数据，然后希望将这些数据导出到Excel以便进一步分析或处理。 要实现这个功能，我们可以利用JavaScript库如`SheetJS`（又名`js-xlsx`），这是一个强大的开源库，...
1. 可编辑性：在ExtJS的Grid中，可编辑性是通过使用CellEditing或RowEditing插件来实现的。用户可以点击单元格直接修改数据，这些更改会实时反映到数据源中。为了创建一个可编辑的进度条列，我们需要自定义一个编辑...
1. **自定义列**：在Grid中，我们可以定义自己的Column模型，添加额外的字段或调整默认的行为。例如，我们可以通过设置`dataIndex`指定数据源字段，使用`renderer`函数来自定义单元格的显示，甚至为特定列添加自定义...
在"Extjs tree and Grid(Buffer Grid,Progress Grid)"这个主题中，我们将深入探讨这两个核心组件以及它们的特定变体——缓冲网格（Buffer Grid）和进度网格（Progress Grid）。 1. **ExtJS Tree** - 树形控件...
1. GridPanel：ExtJS中的核心组件，用于显示和操作表格数据。 2. ColumnModel：定义了GridPanel的列结构，包括列头和数据映射。 3. Store：用于存储数据的组件，可以与后端服务器进行交互。 4. Ext.Ajax.request：...