表格一般由:ColumnModel和Store两部分组成。
<!-- Grid由Store和ColumnModel组成 -->
<!--
store的组成：
1、Record
2、Proxy和Data
3、DataReader
-->
<HTML>
<HEAD>
<TITLE>ʹ��EXT���HelloWorld</TITLE>
<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="grid001.js"></script>
</HEAD>
<body>
</body>
</HTML>
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([{
header: 'id',
dataIndex: 'id'
},{
header: '姓名',
dataIndex: 'name'
},{
header: 'email',
dataIndex: 'email'
},{
header: '性别',
dataIndex: 'sex'
},{
header: '年龄',
dataIndex: 'age'
}]);
var fields = ["id","name","email","sex","age"];
var data = [["1","chen","chen@sina.com","0","20"],
["2","chen","chen@sina.com","0","20"],
["3","chen","chen@sina.com","0","20"],
["4","chen","chen@sina.com","0","20"],
["5","chen","chen@sina.com","0","20"]];
var store = new Ext.data.SimpleStore({
fields: fields,
data: data
});
var grid = new Ext.grid.GridPanel({
title: 'SimpleGrid列表示例',
width: 500,
height: 150,
store: store,
cm: cm
});
grid.render(Ext.getBody());
});
分享到：
相关推荐
产品特点没有数据库，所有客户端（仅是简单HTML，CSS和Javascript） 轻巧快速税率计算无限的产品属性运输多种货币支付网关（Paypal，Google Checkout，Amazon Payments） 有关更多功能，请查看外挂程式Google表格...
在这个例子中，`data` 变量定义了一个二维数组来表示表格中的数据，`store` 变量创建了一个 `SimpleStore` 来存储这些数据。`grid` 变量则创建了一个 `GridPanel`，其中包含了列的信息和数据存储器的引用。 ##### ...
SimpleStore是ExtJS中用于存储数据的简单内存数据存储方式，适用于数据量不大且不需要远程加载的场景。而CheckboxSelectionModel允许用户在Grid中为每行添加一个复选框，实现多选功能。本文将详细介绍如何在ExtJS ...
- `SimpleStore` 用于创建一个简单的数据存储，其字段由`field`数组定义，然后加载`records`中的数据。 5. **创建Grid面板（Grid Panel）**： - `grid` 是EXTJS GridPanel的一个实例，它配置了数据存储`store`、...
其中SimpleStore是用于处理简单数据（比如二维数组）的最基础的Store类型。 在ExtJS中创建一个基础的GridPanel示例代码如下： ```javascript Ext.onReady(function(){ var data = [ [1, 'EasyJWeb', 'EasyJF', '...
无论是简单的数据展示还是复杂的数据交互，ExtJS的表格组件都能够满足需求。开发人员需要熟悉这些基础知识，并在实践中不断探索和应用，才能充分利用ExtJS框架的优势，开发出高质量的Web应用程序。
HelloWorld是编程语言中最经典的入门示例之一，其目的是让初学者快速熟悉开发环境的基本配置和运行方式。在ExtJS中，可以使用`Ext.MessageBox.alert`方法来显示一个简单的消息框： ```javascript Ext.onReady...
它提供了一系列丰富的UI组件，如表格、树、面板等，并支持拖拽操作、Ajax数据加载等功能。ExtJS通过其强大的功能和灵活性，使得开发者能够快速地构建出高度交互式的用户界面。 #### jxl jxl（Java Excel）是一个...
而数据存储器如JsonStore、SimpleStore或GroupingStore则用于存放表格数据，它们基于不同的数据源进行解析。 以下是一个简单的示例，展示了如何在GridPanel中实现单元格编辑： ```javascript { xtype: 'gridpanel...
- **SimpleStore**：创建一个简单的数据存储对象，用于存储图表所需的数据。这里定义了两个字段`name`和`data1`，其中`name`作为分类名称，`data1`作为数值。 ##### 3. 创建图表窗口 ```javascript var win = Ext...
Grid是ExtJS中最常用的组件之一，用于展示表格数据。 ##### 8.1 从内存中加载数据 - **效果**：展示一个简单的表格，其中的数据是从内存中加载的。 - **JS文件**： ```javascript var store = new Ext.data....
- **概述**：简单的存储类，适用于小数据集。 - **常用方法**: - `Ext.data.SimpleStore.load(data)`: 加载数据。 - `Ext.data.SimpleStore.add(record)`: 添加数据记录。 #### 38. Ext.data.Tree 类 (P.34) - **...