Ext.grid.GridPanel_样式
以下是一个简单的grilPanel,并且做了一些样式,做的不好,请包涵!
有什么意见可留言相告!谢谢!
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.blist {
background-image: url(img/add16.gif)!important;
}
</style>
<title>表格显示</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<%-- <link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-green.css">--%>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<%-- <link rel="stylesheet" href="ext/resources/css/visual/grid.css" type="text/css"></link></head>--%>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
//Ext.util.CSS.swapStyleSheet("theme","ext/resources/css/xtheme-gray.css");
var data=[
{id:"1",name:"王孟",sex:"男",age:"20"},
{id:"2",name:"王山",sex:"女",age:"18"},
{id:"3",name:"王孟",sex:"男",age:"20"},
{id:"4",name:"杨占峰",sex:"男",age:"23"},
{id:"5",name:"王孟",sex:"男",age:"20"},
{id:"6",name:"赵鹏",sex:"男",age:"24"},
{id:"7",name:"王孟",sex:"男",age:"20"},
{id:"8",name:"知州",sex:"男",age:"20"},
{id:"9",name:"吴真",sex:"男",age:"24"},
{id:"10",name:"一见如故",sex:"女",age:"20"},
{id:"11",name:"旋",sex:"女",age:"16"},
{id:"12",name:"如如",sex:"女",age:"20"},
{id:"13",name:"三星",sex:"男",age:"18"}
];
var store=new Ext.data.JsonStore({
data:data,
fields:["id","name","sex","age"]
});
//定义表格编号
var rowNumber=new Ext.grid.RowNumberer({
width:30,
sortable:true
//header:"序号"
});
var sm=new Ext.grid.CheckboxSelectionModel();//实例化一个多选框
//根据条件用来转换年龄的字体颜色
function pctChange(val){
if(val <20){
return '<span style="color:green;">' + val + '</span>';
}else if(val > 20){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
//定义列
var colum=new Ext.grid.ColumnModel(
[
rowNumber,
sm,
{
header:"编号",
dataIndex:"id",//绑定字段
sortable:true,//是否排序
width:100
},
{
header:"姓名",
dataIndex:"name",
sortable:true,
width:100
},
{
header:"性别",
dataIndex:"sex",
sortable:true,
width:100
},
{
header:"年龄",
dataIndex:"age",
sortable:true,
renderer:pctChange,//设置年龄显示的颜色
width:100
}
]);
//设置显示列为中文
var viewC=new Ext.grid.GridView({
columnsText:"请选择显示的列",
sortAscText:"升序",
sortDescText:"降序",
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
});
//定义搜索控件
var tbar=new Ext.Toolbar({
items:[
"请输入查询信息:",
"-",
{
xtype:"textfield",
name:"message",
id:"message",
emptyText:"==请输入==",
allowBlank:false,
validateOnBlur:true,//失去焦点验证
blankText:"请输入要查询的信息",
msgTarget:"side"
},
"-",
{
id:"btnS",
text:"查询",
iconCls:"blist",
handler:function(){
Ext.MessageBox.alert("输入:",Ext.getCmp("message").getValue())//Ext.getCmp("message").getValue()根据Id得到控件里的值或Ext.get("message").dom.value
}
}
]
});
//定义分页按钮
var bbar=new Ext.PagingToolbar({
pageSize:4,
store:store,
displayInfo:true,
lastText:"尾页",
nextText:"下一页",
beforePageText:"当前",
refreshText:"刷新",
afterPageText:"页，共{0}页",
displayMsg: '显示 {0} - {1} 共 {2}',
emptyMsg:"对不起，没有您查询的信息"
//plugins:new Ext.ux.SlidingPager()
});
//定义grid面板
var gridP=new Ext.grid.GridPanel(
{
id:"grids",
title:"基本信息列表",
width:500,
height:300,
cm:colum,
store:store,
viewConfig:viewC,
renderTo:Ext.getBody(),
iconCls:"dd",
tbar:tbar,//设置搜索控件
//loadMask:true,//加载效果
stripeRows:true,//设置斑马颜色
bbar:bbar,//设置分页栏
stripeRows: true,
loadMask:{
msg:"数据正在加载中...."
},
buttons:[
{
id:"btnSave",
text:"添加",
iconCls:"blist",//使用自定义样式
renderTo:'btn',
handler:function(){
save();
}
},
{
id:"btnUpdate",
icon: "img/dd-10.gif",
cls: "x-btn-text-icon",
text:"修改"
},
{
id:"btnDel",
text:"删除"
}
]
//overCls:"active"
});
//点击后使该行的背景色该为红色
gridP.addListener('rowclick',function(gridP, rowIndex, e){
var s=gridP.getStore();
var x=s.getAt(rowIndex);
//alert(x.get('id'));
gridP.getView().getRow(rowIndex).style.backgroundColor="red";
});
gridP.render();//重新加载
<%-- store.load({//加载数据--%>
<%-- params:{start:0,limit:4}--%>
<%-- });--%>
});
</script>
<body>
<div id="panles"/>
</body>
</html>
-----------在ext-all.css修改代码如下---------
.x-grid3-row {
border-color:#ffaaee;//改变grid边框颜色
border-top-color:#fff;
}
.x-grid3-row-alt{
background-color:#ddeeaa;//改变 行的颜色
}
.x-grid3-row-over {
border-color:#ddd;
background-color:#ee1166;//鼠标移上去改变行的底色
background-image:url(../images/default/grid/row-over.gif);
}
===浏览效果见附件===
有什么意见可留言相告!谢谢!
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.blist {
background-image: url(img/add16.gif)!important;
}
</style>
<title>表格显示</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<%-- <link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-green.css">--%>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<%-- <link rel="stylesheet" href="ext/resources/css/visual/grid.css" type="text/css"></link></head>--%>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
//Ext.util.CSS.swapStyleSheet("theme","ext/resources/css/xtheme-gray.css");
var data=[
{id:"1",name:"王孟",sex:"男",age:"20"},
{id:"2",name:"王山",sex:"女",age:"18"},
{id:"3",name:"王孟",sex:"男",age:"20"},
{id:"4",name:"杨占峰",sex:"男",age:"23"},
{id:"5",name:"王孟",sex:"男",age:"20"},
{id:"6",name:"赵鹏",sex:"男",age:"24"},
{id:"7",name:"王孟",sex:"男",age:"20"},
{id:"8",name:"知州",sex:"男",age:"20"},
{id:"9",name:"吴真",sex:"男",age:"24"},
{id:"10",name:"一见如故",sex:"女",age:"20"},
{id:"11",name:"旋",sex:"女",age:"16"},
{id:"12",name:"如如",sex:"女",age:"20"},
{id:"13",name:"三星",sex:"男",age:"18"}
];
var store=new Ext.data.JsonStore({
data:data,
fields:["id","name","sex","age"]
});
//定义表格编号
var rowNumber=new Ext.grid.RowNumberer({
width:30,
sortable:true
//header:"序号"
});
var sm=new Ext.grid.CheckboxSelectionModel();//实例化一个多选框
//根据条件用来转换年龄的字体颜色
function pctChange(val){
if(val <20){
return '<span style="color:green;">' + val + '</span>';
}else if(val > 20){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
//定义列
var colum=new Ext.grid.ColumnModel(
[
rowNumber,
sm,
{
header:"编号",
dataIndex:"id",//绑定字段
sortable:true,//是否排序
width:100
},
{
header:"姓名",
dataIndex:"name",
sortable:true,
width:100
},
{
header:"性别",
dataIndex:"sex",
sortable:true,
width:100
},
{
header:"年龄",
dataIndex:"age",
sortable:true,
renderer:pctChange,//设置年龄显示的颜色
width:100
}
]);
//设置显示列为中文
var viewC=new Ext.grid.GridView({
columnsText:"请选择显示的列",
sortAscText:"升序",
sortDescText:"降序",
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
});
//定义搜索控件
var tbar=new Ext.Toolbar({
items:[
"请输入查询信息:",
"-",
{
xtype:"textfield",
name:"message",
id:"message",
emptyText:"==请输入==",
allowBlank:false,
validateOnBlur:true,//失去焦点验证
blankText:"请输入要查询的信息",
msgTarget:"side"
},
"-",
{
id:"btnS",
text:"查询",
iconCls:"blist",
handler:function(){
Ext.MessageBox.alert("输入:",Ext.getCmp("message").getValue())//Ext.getCmp("message").getValue()根据Id得到控件里的值或Ext.get("message").dom.value
}
}
]
});
//定义分页按钮
var bbar=new Ext.PagingToolbar({
pageSize:4,
store:store,
displayInfo:true,
lastText:"尾页",
nextText:"下一页",
beforePageText:"当前",
refreshText:"刷新",
afterPageText:"页，共{0}页",
displayMsg: '显示 {0} - {1} 共 {2}',
emptyMsg:"对不起，没有您查询的信息"
//plugins:new Ext.ux.SlidingPager()
});
//定义grid面板
var gridP=new Ext.grid.GridPanel(
{
id:"grids",
title:"基本信息列表",
width:500,
height:300,
cm:colum,
store:store,
viewConfig:viewC,
renderTo:Ext.getBody(),
iconCls:"dd",
tbar:tbar,//设置搜索控件
//loadMask:true,//加载效果
stripeRows:true,//设置斑马颜色
bbar:bbar,//设置分页栏
stripeRows: true,
loadMask:{
msg:"数据正在加载中...."
},
buttons:[
{
id:"btnSave",
text:"添加",
iconCls:"blist",//使用自定义样式
renderTo:'btn',
handler:function(){
save();
}
},
{
id:"btnUpdate",
icon: "img/dd-10.gif",
cls: "x-btn-text-icon",
text:"修改"
},
{
id:"btnDel",
text:"删除"
}
]
//overCls:"active"
});
//点击后使该行的背景色该为红色
gridP.addListener('rowclick',function(gridP, rowIndex, e){
var s=gridP.getStore();
var x=s.getAt(rowIndex);
//alert(x.get('id'));
gridP.getView().getRow(rowIndex).style.backgroundColor="red";
});
gridP.render();//重新加载
<%-- store.load({//加载数据--%>
<%-- params:{start:0,limit:4}--%>
<%-- });--%>
});
</script>
<body>
<div id="panles"/>
</body>
</html>
-----------在ext-all.css修改代码如下---------
.x-grid3-row {
border-color:#ffaaee;//改变grid边框颜色
border-top-color:#fff;
}
.x-grid3-row-alt{
background-color:#ddeeaa;//改变 行的颜色
}
.x-grid3-row-over {
border-color:#ddd;
background-color:#ee1166;//鼠标移上去改变行的底色
background-image:url(../images/default/grid/row-over.gif);
}
===浏览效果见附件===