由于这个比较大所以单独一文,
建议先看EXT基础:
http://blog.csdn.net/21aspnet/article/details/6782028
最基本的表格:
带单选框
加表头:
var grid1 = new Ext.grid.GridPanel({ el: 'grid1', ds: ds1, cm: cm, sm: sm, title:'员工信息表', height:160, width:450 });
单击事件:
添加右键菜单:
改变数据颜色:
分页控件:
data.php 这里就不从数据库取数据了,直接模拟
{totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'}, {'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'}, {'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'}, {'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'}, {'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'}, {'id':'9','name':'name9','descn':'descn9'}]}表格被panel 控件HOLD住
===========================================================================
扩充阅读:
如何用三种基本类型的数据(Array, Json, Xml)来创建最简单的表格
最简单的表格由以下几个元素组成:
1. 列定义(ColumnModel)
首先我们知道表格肯定是二维的,横着叫行,竖着叫列。跟设计数据库,新建表一样,我们要先设置这个表有几列,每列叫啥名字,啥类型,咋显示,这个表格的骨架也就出来了。这里我们建立一个四列的表格,第一列叫编号(id),第二列叫性别(sex),第三列叫名称(name),第四列叫描述(descn)。
其中,cm.defaultSortable = true;这句话表示默认为可排序的表格,可以先不要去管它
2. 数据(Data)
有了表格的骨架,现在我们要向里边添加数据了。这个数据当然也是二维了,下面分别介绍三种数据类型的使用方法:
(1) Array Data
(2) Json Data
(3) Xml Data
Xml类型的数据一般是由一个.xml文件提供的,通过http请求的方式得到。
3. 数据的读取
定义好数据之后,我们需要将其转换为能够为grid所用的页面,ext为咱们提供了一个桥梁,Ext.data.Store,通过它我们可以把任何格式的数据转化成grid可以使用的形式,这样就不需要为每种数据格式写一个grid的实现了。现在咱们就来看看这个Ext.data.Store是如何转换三种数据的。
(1) ArrayReader
ds要对应两个部分:proxy和reader。proxy告诉我们从哪里获得数据,reader告诉我们如何解析这个数据。
现在我们用的是Ext.data.MemoryProxy,它是专门用来解析js变量的。你可以看到,我们直接把data作为参数传递进去了。 Ext.data.ArrayReader专门用来解析数组,并且告诉我们它会按照定义的规范进行解析,每行读取三个数据,第一个叫id,第二个叫 sex,第三个叫name,第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。
记得要执行一次ds.load(),对数据进行初始化。
(2) JsonReader
其中,root: 'colders'表示取数据的时候取的是'coders'这个节点的数据,而不是'musician'
(3) XmlReader
其中,record: 'item'表示每条记录对应的节点是'item',下面我会给出test.xml文件的内容,便于更好的理解
test.xml
4. 下面组装数据,也分三个表格来显示
其中,grid1和grid2中都有个el属性以及render()方法,这个意思是,当执行该方法的时候,会自动去找页面中id=xxx的标签,然后在里面插入表格;效果跟grid3中的方式是一样的。
获取单选框选择值
buttons:[{ text:'开始查询', handler: function(){ var selectedRows = grid.getSelections(); if(selectedRows.length<1){ alert("请选择事件"); return; } var eventIds = ''; for(i=0;i