`
jsczxy2
  • 浏览: 1255315 次
  • 性别: Icon_minigender_1
  • 来自: 常州
文章分类
社区版块
存档分类
最新评论

EXT 3.x 使用详解之Ext.grid.GridPanel(二)

    博客分类：
  • ext
EXTjsonJavaScriptCSS数据结构 
阅读更多

本篇主要讲解了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>
2
顶
0
踩
分享到：
| EXT 3.x 使用详解之Ext.grid.GridPanel(一 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics