表格控件其实也就是帮我们完成了数据的填充工作而已，具体的数据源、要显示的列，列的定制、数据源中的哪条数据显示在哪个列中等属性还是需要我们自己手动配置的，所以我们分下面几步来完成网格控件的数据绑定：

1、定义表格： 定义一个表格比较简单，只需要new几个列即可，带上列的名称和要绑定的数据，定义列代码如：

var cm = new Ext.grid.ColumnModel([  { header: '编号', dataIndex: 'id' },  { header: '性别', dataIndex: 'sex' },  { header: '名称', dataIndex: 'name' },  { header: '描述', dataIndex: 'desc' }  ]);

用header指定列名，用dataIndex指定数据源，也就是字段名。这样一个基本的表格就定义好了。

2、创建数据源：

一般数据源都是以集合的形式存在，这里使用一个2维数组来实现：

var data = [  ['', '男', '张三丰', '是个作家'],  ['', '男', '石曼迪', '会武功'],  ['', '男', '姜子牙', '能捉鬼'],  ['', '女', '穆桂英', '好像是皇帝'],  ['', '男', '孙悟空', '高级程序员']  ];

如果熟悉JS或者PHP的话，对这段代码就不陌生，定义一个数组，这个数组的每一个位置又存储了一个数组。用他来作为静态数据源。

3、解析数据源：

表格创建完毕，数据源也定义完毕，接下来就需要创建他们之间的关系，即配置分组数据集，使用的是创建一个 Ext.data.Store对象，通过它我们可以把任何格式的数据转化成grid可以使用的形式。其中需要告诉他的参数比较多，先看代码，后面解释：

var ds = new Ext.data.Store({  proxy: new Ext.data.MemoryProxy(data),  reader: new Ext.data.ArrayReader({}, [  { name: 'id' }, { name: 'sex' }, { name: 'name' }, { name: 'desc' }  ])  });  ds.load();

proxy：的含义是告诉表格从哪里取数据，可选的方式有HttpProxy、DataProxy、MemoryProxy或ScriptTagProxy。本例我们告诉他从内存中取数据，数据来自名字叫data的数组。

reader：reader告诉我们如何解析这个数据，他可选的方式有Ext.data.ArrayReader，Ext.data.JsonReader。本例使用的是Ext.data.ArrayReader，第一个参数是id (可选项) 下面的行数组内提供了该记录的id（不明白什么意思，试验是有没有都一样），后面参数含义就很明确了，就是刚才创建表格时定义的字段名，他的特点是读取数据比较简单，但是有个缺点就是不支持分页。

最后千万别忘了初始化数据操作调用Store对象的load方法。

4、装配表格

表格的列模型定义好了，原始数据和数据的转换都做好了，剩下的只需要装配在一起，我们的grid就出来了，先上代码，再研究：

var grid = new Ext.grid.GridPanel({  el: 'grid',  ds: ds,  cm: cm,  height:,  width:  });  grid.render();

其实就是实例化一个表格面板控件，用来装表格。第一个参数是指定在哪里显示，这玩意总得在页面的某个部分或位置显示出来，Ext提供了控制div的做法，由于div很灵活，现在网页布局多采用他，所以需要在哪里显示出来，只需要把相应的div的id指定给他即可。下面2个参数很明白，就是我要装载的数据源叫什么，我装载到哪里去等等的。最后也别忘了调用grid.render()方法，让grid开始渲染，就是画界面等等的，这样才能显示出来。

好了，到此为止一个简单的表格控件就完成了，我们来看看完整代码：

<HTML>

 <HEAD>

  <TITLE>表格</TITLE>

 <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />

 <script type="text/javascript" src="Ext/ext-base.js"></script>

 <script type="text/javascript" src="Ext/ext-all.js"></script>

 <script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>

 </HEAD>

<script type="text/javascript">

    function GridBasic() {

        //1. 定义表格

        var cm = new Ext.grid.ColumnModel([

        { header: '编号', dataIndex: 'id', sortable: true },

        { header: '性别', dataIndex: 'sex' },

        { header: '名称', dataIndex: 'name' },

        { header: '描述', dataIndex: 'desc' }

        ]);

        //2. 创建数据源

        var data = [

        ['1', '男', '张三丰', '是个作家'],

        ['2', '男', '石曼迪', '会武功'],

        ['3', '男', '姜子牙', '能捉鬼'],

        ['4', '女', '穆桂英', '好像是皇帝'],

        ['5', '男', '孙悟空', '高级程序员']

        ];

        //3. 解析数据源

        var ds = new Ext.data.Store({

            proxy: new Ext.data.MemoryProxy(data),

            reader: new Ext.data.ArrayReader({}, [

            { name: 'id' }, { name: 'sex' }, { name: 'name' }, { name: 'desc' }

                ])

                });

        ds.load();

        //4. 装配表格

        var grid = new Ext.grid.GridPanel({

            el: 'grid',

            ds: ds,

            cm: cm,

            height:200,

            width:500

        });

        grid.render();

    }

    Ext.onReady(GridBasic); //开始执行

</script>

 <BODY>

 <div id="grid"></div>

</BODY>

</HTML>

Ext表格控件的更多相关文章

  1. Ext入门学习系列（五）表格控件（1）

    上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...

  2. Ext入门学习系列（五）表格控件（3）

    上节学习了Ext中如何绑定服务器端传递的数据.分别用asp.net和asp.net MVC.PHP.XML为例.本节主要介绍绑定之后的分页功能. 一.Ext的表格控件如何绑定? 分页是Ext自带的一个 ...

  3. Ext入门学习系列（五）表格控件（2）

    上节学习了Ext中表格控件,从创建,到定义数据源.绑定显示,大体明白了一个基本的表格控件是怎么实现的.而我们用表格控件多用于从各种数据源接收数据并显示出来,并不是写死的.本章我们就不同数据源的不同实现 ...

  4. 深入浅出ExtJS 第三章 表格控件

    3.1 表格的特性简介 >.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能; >.表格由类Ext.grid.GridPanel定义,继承自 ...

  5. ExtJS4.2学习(10)分组表格控件--GroupingGrid（转）

    鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html ------------- ...

  6. ExtJS4.2学习(九)属性表格控件PropertyGrid（转）

    鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-15/178.html ------------- ...

  7. 如何在web中实现类似excel的表格控件

    Execl功能非常强大,内置的很多函数或公式可以大大提高对数据的加工处理能力.那么在web中有没有类似的控件呢?经过一番搜寻,发现handsontable具备了基本的excel功能支持公式,同时能对数 ...

  8. 最好的Angular2表格控件

    现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求 ...

  9. C# DatrgridView表格控件的一些用法

    public class useDatrgrivView { string conn = null; string sqlComm = null; DataSet das = null; DataGr ...

随机推荐

  1. MySQL-高并发优化

    一.数据库结构的设计 1.数据行的长度不要超过8020字节,如果超过这个长度的话在物理页中这条数据会占用两行从而造成存储碎片,降低查询效率. 2.能够用数字类型的字段尽量选择数字类型而不用字符串类型的 ...

  2. Python中的json操作

    Python中的json操作 标签(空格分隔): python 编码 json 字符串前缀问题 字符串前缀可以有r,u r:表示原始(raw)字符串,比如'\n'不会被转义.常用于正则. u:表示un ...

  3. [Linux][Ubuntu18.04.1] nginx+php+MySQL环境搭建

    说在前面 今天在腾讯云的CVM服务器搭建了一下环境[主机:标准型S2,Unbuntu18.04的LST版本] 采用了nginx服务器(Nginx 静态处理性能比 Apache高3倍以上,不过apach ...

  4. 洛谷P1008三连击 题解

    题目传送门 使用dfs搜索,搜索9个数字,注意回溯...最后判断是否符合条件,输出. #include<bits/stdc++.h> using namespace std; ],a[]; ...

  5. <<Javascript Patterns>>阅读笔记 – 第3章 字面量和构造函数

    对象字面量 首先给出对象字面量的定义语法: 1. 将对象定义在一对括号中(左大括号“{”和右大括号”}”) 2. 对象中以逗号分隔属性和方法. 每个属性或方法以key-value的形式出现, key和 ...

  6. poj1040 Transportation（DFS）

    题目链接 http://poj.org/problem?id=1040 题意 城市A,B之间有m+1个火车站,第一站A站的编号为0,最后一站B站的编号为m,火车最多可以乘坐n人.火车票的票价为票上终点 ...

  7. PHP实现插入排序

    插入排序思想: 插入排序(Insertion Sort)的算法描述是一种简单直观的排序算法. 它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描, 找到相应位置并插入.插入排序 ...

  8. elementUI 学习入门之 radio 单选框

    Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio  l ...

  9. 哈尔滨理工大学第七届程序设计竞赛决赛（网络赛-高年级组）I - 没有名字

    题目描述 tabris实在是太菜了,没打败恶龙,在绿岛也只捡到一块生铁回去了,为了不在继续拉低acimo星球的平均水平逃离地球,来到了Sabi星球. 在这里tabris发现了一种神奇的生物,这种生物不 ...

  10. shell中的条件判断if和测试

    (一)条件判断 if 中-z 到 -d 的意思 [ -a file ] 若file存在,则为真. [ -b file ] 若file存在且是一个块特殊文件,则为真. [ -c file ] 若file ...