EXT表格

最新推荐文章于 2023-04-18 21:25:34 发布

iteye_14001

最新推荐文章于 2023-04-18 21:25:34 发布

阅读量174

点赞数

文章标签： json 数据库 javascript ViewUI

由于这个比较大所以单独一文，

建议先看EXT基础：

http://blog.csdn.net/21aspnet/article/details/6782028

最基本的表格：

带单选框

<html> <head> <title>开始EXT</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script src="extjs/adapter/ext/ext-base.js"></script> <script src="extjs/ext-all-debug.js"></script> <script src="extjs/build/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = false; var data = [ ['1','男','甲','descn1'], ['2','女','乙','descn2'], ['3','女','丙','descn3'], ['4','男','丁','descn4'], ['5','女','戊','descn5'] ]; var ds1 = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'descn'} ]) }); ds1.load(); var grid1 = new Ext.grid.GridPanel({ el: 'grid1', ds: ds1, cm: cm, sm: sm, height:160, width:450 }); grid1.render(); }); </script> </head> <body><div id="hello"></div> <h1>表格示例</h1> <div id="grid1"></div><br/> <div id="grid2"></div><br/> <div id="example-grid"></div> </body> </html>

加表头：

var grid1 = new Ext.grid.GridPanel({ el: 'grid1', ds: ds1, cm: cm, sm: sm, title:'员工信息表', height:160, width:450 });

单击事件：

<html> <head> <title>开始EXT</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script src="extjs/adapter/ext/ext-base.js"></script> <script src="extjs/ext-all-debug.js"></script> <script src="extjs/build/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = false; var data = [ ['1','男','甲','descn1'], ['2','女','乙','descn2'], ['3','女','丙','descn3'], ['4','男','丁','descn4'], ['5','女','戊','descn5'] ]; var ds1 = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'descn'} ]) }); ds1.load(); var grid1 = new Ext.grid.GridPanel({ el: 'grid1', ds: ds1, cm: cm, sm: sm, title:'员工信息表', height:160, width:450 }); grid1.render(); grid1.addListener('cellclick', cellclick); }); function cellclick(grid, rowIndex, columnIndex, e) { var record = grid.getStore().getAt(rowIndex); //Get the Record var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name var data = record.get(fieldName); Ext.MessageBox.alert('提示','当前选中的数据是：'+data); } </script> </head> <body><div id="hello"></div> <h1>表格示例</h1> <div id="grid1"></div><br/> <div id="grid2"></div><br/> <div id="example-grid"></div> </body> </html>

添加右键菜单：

<html> <head> <title>开始EXT</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script src="extjs/adapter/ext/ext-base.js"></script> <script src="extjs/ext-all-debug.js"></script> <script src="extjs/build/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = false; var data = [ ['1','男','甲','descn1'], ['2','女','乙','descn2'], ['3','女','丙','descn3'], ['4','男','丁','descn4'], ['5','女','戊','descn5'] ]; var ds1 = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'descn'} ]) }); ds1.load(); var grid1 = new Ext.grid.GridPanel({ el: 'grid1', ds: ds1, cm: cm, sm: sm, title:'员工信息表', height:160, width:450 }); grid1.render(); grid1.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分 var rightClick = new Ext.menu.Menu({ id:'rightClickCont', //在HTML文件中必须有个rightClickCont的DIV元素 items: [ { id: 'rMenu1', handler: rMenu1Fn,//点击后触发的事件 text: '右键菜单1' }, { //id: 'rMenu2', //handler: rMenu2Fn, text: '右键菜单2' } ] }); function rightClickFn(grid,rowindex,e){ e.preventDefault(); rightClick.showAt(e.getXY()); } function rMenu1Fn(){ Ext.MessageBox.alert('right','rightClick'); } }); </script> </head> <body><div id="rightClickCont"></div> <h1>表格示例</h1> <div id="grid1"></div><br/> <div id="grid2"></div><br/> <div id="example-grid"></div> </body> </html>

改变数据颜色：

<html> <head> <title>开始EXT</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script src="extjs/adapter/ext/ext-base.js"></script> <script src="extjs/ext-all-debug.js"></script> <script src="extjs/build/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex',renderer:changeSex}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = false; var data = [ ['1','男','甲','descn1'], ['2','女','乙','descn2'], ['3','女','丙','descn3'], ['4','男','丁','descn4'], ['5','女','戊','descn5'] ]; var ds1 = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'descn'} ]) }); ds1.load(); var grid1 = new Ext.grid.GridPanel({ el: 'grid1', ds: ds1, cm: cm, sm: sm, height:160, width:450 }); grid1.render(); }); function changeSex(value){ if (value == '男') { return "<span style='color:red;font-weight:bold;'>男</span>"; } else { return "<span style='color:green;font-weight:bold;'>女</span>"; } } </script> </head> <body><div id="hello"></div> <h1>表格示例</h1> <div id="grid1"></div><br/> <div id="grid2"></div><br/> <div id="example-grid"></div> </body> </html>

分页控件：

<html> <head> <title>开始EXT</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script src="extjs/adapter/ext/ext-base.js"></script> <script src="extjs/ext-all-debug.js"></script> <script src="extjs/build/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.BLANK_IMAGE_URL="resources/images/default/s.gif" Ext.onReady(function(){ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = true; var ds = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'data.php'}), reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root' }, [ {name: 'id'}, {name: 'name'}, {name: 'descn'} ]) }); ds.load({params:{start:0,limit:10}}); var grid = new Ext.grid.GridPanel({ el: 'grid3', ds: ds, cm: cm, sm: sm, height:320, width:500, title: '分页演示', bbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', emptyMsg: "没有记录" }), tbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', emptyMsg: "没有记录" }) }); grid.render(); }) </script> </head> <body><div id="hello"></div> <h1>表格示例</h1> <div id="grid1"></div><br/> <div id="grid2"></div><br/> <div id="grid3"></div><br/> <div id="example-grid"></div> </body> </html>

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住

<html> <head> <title>开始EXT</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script src="extjs/adapter/ext/ext-base.js"></script> <script src="extjs/ext-all-debug.js"></script> <script src="extjs/build/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.BLANK_IMAGE_URL="resources/images/default/s.gif" Ext.onReady(function(){ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = true; var ds = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'data.php'}), reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root' }, [ {name: 'id'}, {name: 'name'}, {name: 'descn'} ]) }); ds.load({params:{start:0,limit:10}}); var grid = new Ext.grid.GridPanel({ el: 'grid3', ds: ds, cm: cm, sm: sm, height:320, width:500, title: '分页演示', bbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', emptyMsg: "没有记录" }), tbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', emptyMsg: "没有记录" }) }); grid.render(); var panel = new Ext.Panel({ renderTo: 'panel', title:'panel', collapsible:true, width:500, height:400, items:[grid] //管理grid }); }) </script> </head> <body><div id="panel"></div> <div id="grid1"></div><br/> <div id="grid2"></div><br/> <div id="grid3"></div><br/> <div id="example-grid"></div> </body> </html>

===========================================================================

扩充阅读：

如何用三种基本类型的数据（Array, Json, Xml）来创建最简单的表格
最简单的表格由以下几个元素组成：
1. 列定义(ColumnModel)
首先我们知道表格肯定是二维的，横着叫行，竖着叫列。跟设计数据库，新建表一样，我们要先设置这个表有几列，每列叫啥名字，啥类型，咋显示，这个表格的骨架也就出来了。这里我们建立一个四列的表格，第一列叫编号(id)，第二列叫性别(sex)，第三列叫名称(name)，第四列叫描述(descn)。

//定义一个ColumnModel
varcm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id' },
{header:'性别',dataIndex:'sex' },
{header:'名称',dataIndex:'name' },
{header:'描述',dataIndex:'descn' }
]);
cm.defaultSortable=true ;

其中，cm.defaultSortable = true;这句话表示默认为可排序的表格，可以先不要去管它

2. 数据(Data)
有了表格的骨架，现在我们要向里边添加数据了。这个数据当然也是二维了，下面分别介绍三种数据类型的使用方法：
(1) Array Data

//ArrayData
vardata= [
['1','male','name1','descn1' ],
['2','male','name1','descn2' ],
['3','male','name3','descn3' ],
['4','male','name4','descn4' ],
['5','male','name5','descn5' ]
];

(2) Json Data

//JsonData
varpeople= {
'coders' :[
{'id':'1','sex':'male','name':'McLaughlin','descn':'brett@newInstance.com' },
{'id':'2','sex':'male','name':'Hunter','descn':'jason@servlets.com' },
{'id':'3','sex':'female','name':'Harold','descn':'elharo@macfaq.com' }
],
'musicians' :[
{'id':'1','name':'Clapton','descn':'guitar' },
{'id':'2','name':'Rachmaninoff','descn':'piano' }
]
}

(3) Xml Data
Xml类型的数据一般是由一个.xml文件提供的，通过http请求的方式得到。

3. 数据的读取
定义好数据之后，我们需要将其转换为能够为grid所用的页面，ext为咱们提供了一个桥梁，Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。现在咱们就来看看这个Ext.data.Store是如何转换三种数据的。
(1) ArrayReader

//ArrayReader
vards1=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id' },
{name:'sex' },
{name:'name' },
{name:'descn' }
])
});
ds1.load();

ds要对应两个部分：proxy和reader。proxy告诉我们从哪里获得数据，reader告诉我们如何解析这个数据。
现在我们用的是Ext.data.MemoryProxy，它是专门用来解析js变量的。你可以看到，我们直接把data作为参数传递进去了。 Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，每行读取三个数据，第一个叫id，第二个叫 sex，第三个叫name，第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。
记得要执行一次ds.load()，对数据进行初始化。

(2) JsonReader

//JsonReader
vards2=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(people),
reader:newExt.data.JsonReader({root:'coders' },[
{name:'id' },
{name:'sex' },
{name:'name' },
{name:'descn' }
])
});
ds2.load();

其中，root: 'colders'表示取数据的时候取的是'coders'这个节点的数据，而不是'musician'

(3) XmlReader

//XmlReader
vards3=new Ext.data.Store({
url:'test.xml' ,
reader:newExt.data.XmlReader({record:'item' },[
{name:'id' },
{name:'sex' },
{name:'name' },
{name:'descn' }
])
});
ds3.load();

其中，record: 'item'表示每条记录对应的节点是'item'，下面我会给出test.xml文件的内容，便于更好的理解

test.xml

<?xmlversion="1.0"encoding="UTF-8"?>
<dataset>
<results>2</results>
<item>
<id>1</id>
<sex>male</sex>
<name>Taylor</name>
<descn>Coder</descn>
</item>
<item>
<id>2</id>
<sex>female</sex>
<name>Sophia</name>
<descn>CivilServant</descn>
</item>
<item>
<id>3</id>
<sex>male</sex>
<name>Taylor</name>
<descn>Coder</descn>
</item>
<item>
<id>4</id>
<sex>female</sex>
<name>Sophia</name>
<descn>CivilServant</descn>
</item>
<item>
<id>5</id>
<sex>female</sex>
<name>Sophia</name>
<descn>CivilServant</descn>
</item>
</dataset>

4. 下面组装数据，也分三个表格来显示

//对应Array
vargrid1=new Ext.grid.GridPanel({
el:'grid1' ,
ds:ds1,
cm:cm
});
grid1.render();

//对应Json
vargrid2=new Ext.grid.GridPanel({
el:'grid2' ,
ds:ds2,
cm:cm
});
grid2.render();

//对应Xml
vargrid3=new Ext.grid.GridPanel({
renderTo:'example-grid' ,
ds:ds3,
cm:cm,
title:'HelloWorld' ,
autoHeight:'true'
})

其中，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<selectedRows.length;i++){ eventIds+= selectedRows[i].data.name+','; } alert(eventIds) } }]