EXT 3.x 使用详解之Ext.grid.GridPanel(二)
本篇主要讲解了grid如何自动调整大小，以便在我们窗口发生变化的时候grid能够自动调整。主要看代码吧，注释很清楚了!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
html,body{
margin:0px;
height:100%;
}
#content{
height:100%;
width:100%;
}
</style>
</head>
<body style="height:100%">
<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.onresize=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>
<div id="content">
<div>
</body>
</html>