extjs中创建自适应大小grid

最新推荐文章于 2024-03-09 16:46:25 发布

iteye_6233

最新推荐文章于 2024-03-09 16:46:25 发布

阅读量122

点赞数

文章标签： javascript json 数据结构与算法 ViewUI

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.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/source/locale/ext-lang-zh_CN.js"></script>

<style type="text/css">  
       html,body{  
    margin:0px;  
    height:100%;  
    }  
    #content{  
    height:100%;  
    width:100%;  
    }  
</style>  

     <script type="text/javascript">  
    var grid;  
      
    var cm;  
      
    var ds;  
      
    //性别详细  
    function renderSex(value) {  
        if (value == 'male') {  
        return "<span style='color:red;font-weight:bold;'>男</span>";  
        } else {  
        return "<span style='color:green;font-weight:bold;'>女</span>";  
        }  
    }  
      
    //描述详细  
    function renderDescn(value, cellmeta, record, rowIndex, columnIndex,store){  
        var str = (rowIndex+1)+"行|"+(columnIndex+1)+"列";  
        return str;  
    }  
      
    //页面完成后加载  
    Ext.onReady(function()  
        {  
    //对列的定义  
    cm = new Ext.grid.ColumnModel([  
        {header:'<font color="blue">编号</font>',width: Ext.get("content").getWidth()/4,sortable:true,dataIndex:'id'},//sortable 可排序，具体体现在有排序选项卡  
        {header:'<font color="blue">性别</font>',width: Ext.get("content").getWidth()/4,dataIndex:'sex',renderer:renderSex},  
        {header:'<font color="blue">名称</font>',width: Ext.get("content").getWidth()/4,dataIndex:'name'},  
        {header:'<font color="blue">描述</font>',width: Ext.get("content").getWidth()/4,dataIndex:'descn',renderer:renderDescn}  
    ]);  
      
    //二维数组的数据，Json数据结构  
    var data = [  
        ['1','male','name1','descn1'],  
        ['2','female','name2','descn2'],  
        ['3','male','name3','descn3'],  
        ['4','female','name4','descn4'],  
        ['5','male','name5','descn5']  
    ];  
      
    //解释二维数组  
    //proxy告诉我们从哪里获得数据，reader告诉我们如何解析这个数据  
     ds = new Ext.data.Store({  
        proxy: new Ext.data.MemoryProxy(data),  
        //Ext.data.ArrayReader专门用来解析数组，绑定与cm的dataIndex相对应  
        reader: new Ext.data.ArrayReader({}, [  
            {name: 'id'},  
            {name: 'sex'},  
            {name: 'name'},  
            {name: 'descn'}  
        ])  
    });  
    //加载dataStore  
    ds.load();  
    //创建grid对象  
    grid = new Ext.grid.GridPanel({  
        renderTo: 'content',//渲染到具体div  
        //获得div的宽和高，以便计算并自动伸缩比例，用来控制grid的各个列宽和整个grid的高度  
        width: Ext.get("content").getWidth(),  
        height: Ext.get("content").getHeight(),   
        //绑定ds和cm  
        store: ds,  
        cm: cm  
    });  
    });  
    //自动适应浏览器窗口调整  
    window.οnresize=function(){  
        grid.destroy();  
        cm = new Ext.grid.ColumnModel([  
        //对列进行比例分配，以便在窗口放大和缩小时候进行相对比例计算，以便自动调整grid的列宽和高度  
            {header:'<font color="blue">编号</font>',width: Ext.get("content").getWidth()/4,sortable:true,dataIndex:'id'},  
            {header:'<font color="blue">性别</font>',width: Ext.get("content").getWidth()/4,dataIndex:'sex',renderer:renderSex},  
            {header:'<font color="blue">名称</font>',width: Ext.get("content").getWidth()/4,dataIndex:'name'},  
            {header:'<font color="blue">描述</font>',width: Ext.get("content").getWidth()/4,dataIndex:'descn',renderer:renderDescn}  
        ]);  
        grid = new Ext.grid.GridPanel({  
            width: Ext.get("content").getWidth(),  
            height: Ext.get("content").getHeight(),   
            store: ds,  
            cm: cm  
        });  
        grid.render(Ext.get("content"));  
    };  
    </script> 


   
</head>

<body>
<div id="content">  
</div>  

</body>
</html>