欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

有用的ext grid 例子 - 菜菜

更新时间: 2015-05-04 00:00:00 责任编辑: Author_N14

 

有用的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)  {
}

%>
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2015-05-04 00:00:00
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1674375/
本文WWW.DOC100.NET DOC100.NET版权所有。