您的位置：首页 > Web前端 > CSS

CSS学习系列七:颜色和背景样式

2010-03-17 09:34 597 查看

这里从一个最简单的grid表格开始讲起!
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','you_5214@sina.com'],//数据内容信息
['2','wen','you_5214@sina.com'],
['3','xing','you_5214@sina.com']];
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>

代码很简单，先把最最简单的例子运行起来看看效果！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航