有用的ext grid 例子 收藏
<script type="text/javascript"> document.body.oncopy = function() { if (window.clipboardData) { setTimeout(function() { var text = clipboardData.getData("text"); if (text && text.length>300) { text = text + "\r\n\n本文来自CSDN博客,转载请标明出处:" + location.href; clipboardData.setData("text", text); } }, 100); } } </script><script type="text/javascript">function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>
这几天才开始真真的学习extjs,以前有听说过,现在才发现,只要看懂后,发现extjs还是非常的强大,长话短说,实践开始。
对于extjs的常用js,这里就不提供下载了。
一、首先增加一个jsp页面grid3.jsp
<? xml version="1.0" encoding="UTF-8" ?> <%
@ page language = " java " contentType = " text/html; charset=UTF-8 "
pageEncoding = " UTF-8 " %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< title > Grid3 </ title >
< link rel ="stylesheet" type ="text/css" href ="extjs/resources/css/ext-all.css" />
<!--
<link rel="stylesheet" type="text/css" href="extjs/resources/css/xtheme-gray.css" />
-->
< script type ="text/javascript" src ="extjs/adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="extjs/ext-all.js" ></ script >
< script type ="text/javascript" src ="extjs/ext-lang-zh_CN.js" ></ script >
</ head >
< body >
< script type ="text/javascript" src ="grid3.js" ></ script >
< div id ="grid3" style ="width: 100%;height: 100%" >
</ div >
</ body >
</ html >
二、增加一个js grid3.js
/* * * @author fox
*/
Ext.onReady( function ()
{
Ext.BLANK_IMAGE_URL = ' extjs/resources/images/default/s.gif ' ;
Ext.QuickTips.init();
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header: ' 编号 ' ,dataIndex: ' id ' ,sortable: true } ,
{header: ' 名称 ' ,dataIndex: ' name ' } ,
{header: ' 描述 ' ,dataIndex: ' descn ' }
]);
// proxy直接去读取josn数据
var ds = new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy(
{url: ' gridjson.jsp ' } ),
reader: new Ext.data.JsonReader(
{
totalProperty: ' totalProperty ' ,
root: ' root ' ,
successProperty : ' success '
} , [
{name: ' id ' ,mapping: ' id ' ,type: ' int ' } ,
{name: ' name ' ,mapping: ' name ' ,type: ' string ' } ,
{name: ' descn ' ,mapping: ' descn ' ,type: ' string ' }
])
} );
var grid = new Ext.grid.GridPanel(
{
el: ' grid3 ' ,
ds: ds,
sm: sm,
cm: cm,
width: 700 ,
height: 280 ,
bbar: new Ext.PagingToolbar(
{
pageSize: 10 ,
store: ds,
displayInfo: true ,
displayMsg: ' 显示第 {0} 条到 {1} 条记录,一共 {2} 条 ' ,
emptyMsg: " 没有记录 "
} )
} );
// el:指定html元素用于显示grid
grid.render(); // 渲染表格
ds.load(
{params:
{start: 0 , limit: 10 } } );
} );
三、因为grid3.js里的数据是通过url: ' gridjson.jsp ' 来读取的(实例用jsp比较方便),所以新建一个gridjson.jsp来产生json格式的数据
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
这样,一个grid就出现了,值得注意的是,在grid.js里的
totalProperty: 'totalProperty',
root: 'root',
需要与gridjson.jsp里的相对应,要不然会出错
totalProperty是所有数据的条数