由于这个比较大所以单独一文,
建议先看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 cm = new Ext.grid.ColumnModel([
- {header:'编号',dataIndex:'id'},
- {header:'性别',dataIndex:'sex'},
- {header:'名称',dataIndex:'name'},
- {header:'描述',dataIndex:'descn'}
- ]);
- cm.defaultSortable = true;
- 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,
- height:140,
- width:420
- });
- 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>
带单选框
- <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();
- <span style="BACKGROUND-COLOR: #ffff33">grid1.addListener('cellclick', cellclick);</span>
- });
- 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)。
var cm = 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
var data = [
['1','male','name1','descn1' ],
['2','male','name1','descn2' ],
['3','male','name3','descn3' ],
['4','male','name4','descn4' ],
['5','male','name5','descn5' ]
];
(2) Json Data
var people = {
'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
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();
ds要对应两个部分:proxy和reader。proxy告诉我们从哪里获得数据,reader告诉我们如何解析这个数据。
现在我们用的是Ext.data.MemoryProxy,它是专门用来解析js变量的。你可以看到,我们直接把data作为参数传递进去了。 Ext.data.ArrayReader专门用来解析数组,并且告诉我们它会按照定义的规范进行解析,每行读取三个数据,第一个叫id,第二个叫 sex,第三个叫name,第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。
记得要执行一次ds.load(),对数据进行初始化。
(2) JsonReader
var ds2 = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(people),
reader: new Ext.data.JsonReader({root: 'coders' }, [
{name: 'id' },
{name: 'sex' },
{name: 'name' },
{name: 'descn' }
])
});
ds2.load();
其中,root: 'colders'表示取数据的时候取的是'coders'这个节点的数据,而不是'musician'
(3) XmlReader
var ds3 = new Ext.data.Store({
url: 'test.xml' ,
reader: new Ext.data.XmlReader({record: 'item' }, [
{name: 'id' },
{name: 'sex' },
{name: 'name' },
{name: 'descn' }
])
});
ds3.load();
其中,record: 'item'表示每条记录对应的节点是'item',下面我会给出test.xml文件的内容,便于更好的理解
test.xml
<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>Civil Servant</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>Civil Servant</descn>
</item>
<item>
<id>5</id>
<sex>female</sex>
<name>Sophia</name>
<descn>Civil Servant</descn>
</item>
</dataset>
4. 下面组装数据,也分三个表格来显示
var grid1 = new Ext.grid.GridPanel({
el: 'grid1' ,
ds: ds1,
cm: cm
});
grid1.render();
// 对应Json
var grid2 = new Ext.grid.GridPanel({
el: 'grid2' ,
ds: ds2,
cm: cm
});
grid2.render();
// 对应Xml
var grid3 = 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)
- }
- }]