有用的ext grid 例子

有用的ext grid 例子 收藏

<script type="text/javascript"> document.body.oncopy = function() { if (window.clipboardData) { setTimeout(function() { var text = clipboardData.getData(&quot;text&quot;); if (text &amp;&amp; text.length&gt;300) { text = text + &quot;\r\n\n本文来自CSDN博客，转载请标明出处：&quot; + location.href; clipboardData.setData(&quot;text&quot;, 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)+'&amp;u='+escape(d.location.href)+'&amp;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格式的数据

<%
String start  =  request.getParameter( " start " );
String limit  =  request.getParameter( " limit " );
try   {
     int  index  =  Integer.parseInt(start);
     int  pageSize  =  Integer.parseInt(limit);

    String json  =   " {totalProperty:100,root:[ " ;
     for  ( int  i  =  index; i  <  pageSize  +  index; i ++ )  {
        json  +=   " {id: "   +  i  +   " ,name:'name "   +  i  +   " ',descn:'descn "   +  i  +   " '} " ;
         if  (i  !=  pageSize  +  index  -   1 )  {
            json  +=   " , " ;
        }
    }
    json  +=   " ]} " ;
    response.getWriter().write(json);
}   catch (Exception ex)  {
}
%>

这样，一个grid就出现了，值得注意的是，在grid.js里的
 totalProperty: 'totalProperty',
      root: 'root',
需要与gridjson.jsp里的相对应，要不然会出错
totalProperty是所有数据的条数