zoukankan      html  css  js  c++  java
  • Extjs grid设置单元格字体颜色,及单元格背景色 子曰

    上面这种是最简单的,设定固定的某单元格中字体颜色。

      //--------------------------------------------------列头
        var cm = new Ext.grid.ColumnModel([
    		sm,
               new Ext.grid.RowNumberer(), //自动添加行号
        //         {
        //		    header: "序号",
        //		    dataIndex: "id",
        //		    tooltip: "ID",
        //		    //列不可操作
        //		    //menuDisabled:true,
        //		    //可以进行排序
        //		    sortable: true
        //		} , 
            {
            header: "房间编号",
            tooltip: "房间编号",
            dataIndex: "RoomNumber",
            //可以进行排序
            sortable: true
        }, {
            header: "面积(M²)",
            tooltip: "房间面积",
            dataIndex: "area",
            //可以进行排序
            sortable: true
        }, {
            header: "单价(元/M²)",
            tooltip: "单价",
            dataIndex: "singlePrice",
            //可以进行排序
            sortable: true,
            editor: new Ext.grid.GridEditor(new Ext.form.NumberField({
                allowBlank: false
            }))
    
    
        }, {
            header: "总价(元)",
            tooltip: "总价",
            dataIndex: "totalPrice",
            //可以进行排序
            sortable: true
    
        }, {
            header: "面积(M²)",
            dataIndex: "mianjiCC",
            //可以进行排序
            sortable: true
    
        }, {
            header: "单价(元/M²)",
            dataIndex: "priceCCS",
            //可以进行排序
            sortable: true,
            editor: new Ext.grid.GridEditor(new Ext.form.NumberField({
                allowBlank: false
            }))
    
        }, {
            header: "总价(元)",
            dataIndex: "totalPriceCCS",
            //可以进行排序
            sortable: true
    
        }, {
            header: "",
            tooltip: "销售状态",
            dataIndex: "status",
            //可以进行排序
            sortable: true
        }]);
        //-----------------------------------------------------设置颜色
    
        cm.setRenderer(7, getColor);
        cm.setRenderer(4, getColor);
        function getColor(val) {
            if (val != "") {
                return '<font color=blue></font><span style="color:red;">' + Ext.util.Format.usMoney(val) + '</span>';
            }
        }


    第二种效果设置背景色的单元背是不固定的,需要程序根据数据来判断。且加入mouseover和mouseout事件,背景色会根据鼠在移动到不同行而相应的改变。

     除上面的代码外,还要加入事件处理。

    注意:由于加入mouseover和mouseout事件,所以只能是EditorGridPanel,Gridpanel无法响应鼠标事件!

      //数据加载,根据条件改变单元格背景色
        grid.getStore().on('load', function (s, records) {
            var girdcount = 0;
            s.each(function (r) {
                if (r.get('status') == '未售') {
                    grid.getView().getCell(girdcount, 2).style.backgroundColor = '#CCCCCC'; //填充单元格颜色
                    // grid.getView().getCell(girdcount,13).disabled=true; 
                } else if (r.get('status') == '已售') {
                    grid.getView().getCell(girdcount, 2).style.backgroundColor = '#990033';
                } else if (r.get('status') == '大定') {
                    grid.getView().getCell(girdcount, 2).style.backgroundColor = '#FF9900';
                } else if (r.get('status') == '小定') {
                    grid.getView().getCell(girdcount, 2).style.backgroundColor = '#009900';
                } else if (r.get('status') == '保留') {
                    grid.getView().getCell(girdcount, 2).style.backgroundColor = '#6633FF';
                }
                girdcount = girdcount + 1;
            });
        }); 


     

     //添加mouseover事件
     grid.on('mouseover',function(e){
      var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置
      if(index!==false){//当取到了正确的列时,(因为如果传入的target列没有取到的时候会返回false)
     var colour=grid.getView().getCell(index,2).style.backgroundColor;
     grid.getView().getRow(index).style.backgroundColor=colour;    
    
      }
       });
       
       //添加mouseout事件
     grid.on('mouseout',function(e){
      var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置
      if(index!==false){//当取到了正确的列时,(因为如果传入的target列没有取到的时候会返回false)
    
     var colour='';
    
     grid.getView().getRow(index).style.backgroundColor=colour;    
    
      }
       });


     

  • 相关阅读:
    Maybe You Don't Know ! 如何比较两个引用是否指向同一个对象?
    记录一点项目心得...
    SharePoint 站点模版
    ObjectSpaces,See you in 2006...
    CLR如何实现线程同步
    Using 1.1, Waiting 2.0 & EasyThread
    在SharePoint中的Workflow引擎开发完成
    ViewState
    《WalkThrough WebPart 入门指南二》完成
    隐藏在.NET中的IoC?
  • 原文地址:https://www.cnblogs.com/suixufeng/p/3336094.html
Copyright © 2011-2022 走看看