Extjs GridPanel 本地数据

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liyanlei5858/article/details/17239515
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
       <title>Ext</title>
       <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
       <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
       <script type="text/javascript" src="ext/ext-all.js"></script>
       <script type="text/javascript">
       Ext.BLANK_IMAGE_URL = 'img/s.gif';
       </script>

       <script type="text/javascript">
       Ext.onReady( function() {
           function renderSex(value){
                if(value == 'male'){
                    return "<span style='color:red;font-weight:bold;'>红男</span><img src='user_male.png'/>";
                }else{
                    return "<span style='color:green;font-weight:blod;'>绿女</span><img src='user_female.png'/>";
                }
           }

           var cm = new Ext.grid.ColumnModel([
                new Ext.grid.RowNumberer(),
                new Ext.grid.CheckboxSelectionModel(),
                {header:'编号',dataIndex:'id',width:50,sortable:true},
                {header:'姓名',dataIndex:'name',width:80,sortable:true},
                {header:'性别',dataIndex:'sex',width:80,sortable:true,renderer:renderSex},
                {header:'描述',dataIndex:'descn',width:200,sortable:true}
           ]);

           var data = [['1','name1','male','descn1'],
                        ['2','name2','female','descn2'],
                        ['3','name3','male','descn3']];

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

            var grid = new Ext.grid.GridPanel({
               title:'GridPanel',
               renderTo: Ext.getBody(),
               height:500,
               autoWidth:true,
               ds:ds,
               cm:cm,
               bbar:new Ext.PagingToolbar({
                  pageSize:10,
                  store:ds,
                  displayInfo:true,
                  displayMsg:'显示第{0}条到{1}条记录,共{2}条',
                  emptyMsg:'没有记录'})
           });
          
          
       });
       </script>
   </head>

   <body>
       <div id='grid'></div>
   </body>
</html>
展开阅读全文

没有更多推荐了,返回首页