浏览 5586 次
|
锁定老帖子 主题：Ext.grid.GridPanel_样式
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-05-15
最后修改：2010-03-13
以下是一个简单的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); } ===浏览效果见附件=== 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
