Ext.grid.GridPanel_样式 -

wangmengbk

浏览: 292363 次
性别:
来自: 上海

最近访客更多访客>>

yeming471114363

yonge812

zlbmm007

changfengwuhen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ext.grid.GridPanel_样式

博客分类：

EXT CSS 三星

以下是一个简单的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="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);

}

===浏览效果见附件===