Ext组件之gridPanel一
这里从一个最简单的grid表格开始讲起!
grid其实就是实现数据显示的表格，但其功能比HTML中的table功能要强很多，具体强在那里，接下来会一一介绍！
grid中最重要最常用的属性主要有以下几个：store,autoExpandColumn ,cm(colModel ) ,columns ,disableSelection ,enableColumnHide ,enableHdMenu, loadMask ,sm(selModel) ,stripeRows ,trackMouseOver ,view ,viewConfig ....相对来说属性设置项比较多，我们下面就从一个简单的例子来说明gridPanel的最简单的用法
grid_01.js
grid_01.html
代码很简单，先把最最简单的例子运行起来看看效果！
grid其实就是实现数据显示的表格，但其功能比HTML中的table功能要强很多，具体强在那里，接下来会一一介绍！
grid中最重要最常用的属性主要有以下几个：store,autoExpandColumn ,cm(colModel ) ,columns ,disableSelection ,enableColumnHide ,enableHdMenu, loadMask ,sm(selModel) ,stripeRows ,trackMouseOver ,view ,viewConfig ....相对来说属性设置项比较多，我们下面就从一个简单的例子来说明gridPanel的最简单的用法
grid_01.js
Ext.onReady(function(){
var data = [['1','you','[email protected]'],//数据内容信息
['2','wen','[email protected]'],
['3','xing','[email protected]']];
var fields = ['id','name','email'];
var store = new Ext.data.SimpleStore({
fields:fields
});
store.loadData(data);
function changeColor(val){
if('2'==val){
return '<span style="color:red;">' + val + '</span>';
}else{
return val;
}
};
var panel = new Ext.grid.GridPanel({
title:'grid表格用法用',
applyTo :Ext.getBody(),
store:store,//设置数据源
enableDragDrop :true,//是够允许拖拽
autoExpandColumn :'0',//默认延伸的字段，在这里0表示的ID所在的列的宽度自动适应整个表格的宽度
enableHdMenu :false,//是够隐藏视图菜单信息
stripeRows :true,//是否隔行显示不同的背景颜色!
frame : true,
columns:[//表格的列模式，即表格的现实方式，对应表格字段信息和显示的信息，renderer表示渲染函数
//header表示列显示信息，dataIndex对应的数据列字段
{header:'id',width:40,dataIndex:'id',renderer:changeColor},
{header:'用户名',width:100,dataIndex:'name'},
{header:'E-mail',width:200,dataIndex:'email'}],
width:400,
autoHeight:true
})
})
grid_01.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>grid_01.html</title>
<style type="text/css">
body{background-color:#777777}
</style>
<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" src="grid_01.js"></script>
</head>
<body>
</body>
</html>
代码很简单，先把最最简单的例子运行起来看看效果！