`

设置Ext.grid.gridPanel样式

 
阅读更多
一:修改头样式
 
1:直接修改样式
 
     监听gridpanel的'afterrender' 事件
 
listeners : {
         'afterrender' : function(){
               var elments = Ext.select(".x-grid3-header");//.x-grid3-hd   
                elments.each(function(el) {   
                           el.setStyle("background-color", '#CBBC82');// 设置不同的颜色  
                           el.setStyle("background-image", 'none');
                        }, this) ;       
            }
        }
 
2:修改viewConfig的模板
 
      var viewConfig={ 
          templates:{   
 
            //  在模板中引入自己定义的样式。使用这个view的grid的header的样式就修改了。   
              header:new Ext.Template( 
                  ' <table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">', 
                  ' <thead> <tr id="my-grid-head">{mergecells} </tr>' + 
                  ' <tr id="x-grid3-hd-row">{cells} </tr> </thead>', 
                  " </table>" 
                  ), 
             mhcell: new Ext.Template( 
                  ' <td id="myrow" colspan="{mcols}"> <div align="center"> <b>{value} </b> </div>', 
                  " </td>" 
                  )   
          } 
      };
 
grid.view=new Ext.grid.GridView(viewConfig);

 

二:修改列样式
 
1:修改Ext.grid.ColumnModel的css属性值
 
         {
               header   : 'Last Updated', 
                width    : 85,  
                align : 'center',
                css:'height:27px; vertical-align:middle; font-size:12;color:red;',
                renderer : Ext.util.Format.dateRenderer('m/d/Y'), 
                dataIndex: 'lastChange'
 
 
 
          }
 
如果需要修改所有行的样式可以使用columnModel的default属性设置css属性值
 
var cm =  new Ext.grid.ColumnModel({
         defaults: {
             css : 'height:27px; vertical-align:middle; font-size:12;background-color :#EDEEF0;background-                      image:none;'
         },
         columns:[]
 
      })
 
这样就改变整个grid的行列的样式
 
 
 
2:加载数据时改变列的颜色
 


首先定义一个样式如下
 
 .x-grid-back-red { 
background: #FF0000; 
} 

定义改变颜色的列:
 
 {header:'摘要',dataIndex:'zhaoyao',align:'left',width:150,
         renderer : function(v,m){
               m.css='x-grid-back-red'; 
               return v; 
          }
 }

 

三:修改行样式
 
1:指定某一行的背景色,鼠标移过行的背景色以及选中行的背景色设置
 
 使用gridView属性的设置这些样式,首先定义好样式
 
 viewConfig : {
         rowOverCls : 'my-row-over',//鼠标移过的行样式
         selectedRowClass : "my-row-selected",//选中行的样式
         getRowClass : function(record,rowIndex,rowParams,store){  //指定行的样式
           if(rowIndex ==2){
            return "my-row";
           }
          }
        }
 
2:加载数据完成后调用方法改变行的颜色
 
首先要解决的一个问题是如果判断数据已经加载完毕,最简单的方法是给grid的store添加onload事件。
如果你想有条件地改变某行的背景颜色,则还需要遍历gird的store,这里有个简单的方法即store的
each方法。
 
  grid.getStore().on('load',function(s,records){
          var girdcount=0;
          s.each(function(r){
                  if(r.get('zy')=='本期合计'){
                         grid.getView().getRow(girdcount).style.backgroundColor='#FFFF00';
                  }else if(r.get('zy')=='本年累计'){
                         grid.getView().getRow(girdcount).style.backgroundColor='#FF1493';
                  }else if(r.get('zy')=='期初余额'){
                         grid.getView().getRow(girdcount).style.backgroundColor='#DCDCDC';
                  }
                 girdcount=girdcount+1;
             });
      });
通过这些样式的自定义可以修改grid的行高,字体背景色等属性啦。

 

分享到:
评论

相关推荐

    Ext.grid.GridPanel属性祥解

    综上所述,`Ext.grid.GridPanel`提供了非常全面且强大的功能,使得开发者能够根据实际需求灵活定制表格的样式和交互。通过深入了解这些配置选项和方法,可以更高效地利用ExtJS框架实现复杂的前端表格功能。

    GridPanel中的单元格不能选中复制的解决方法

    解决Ext.grid.GridPanel中的单元格不能选中复制的问题需要从两个方面入手:添加新的CSS样式和修改Ext.grid.GridPanel的protoType。这些解决方案可以帮助开发者解决这个棘手的问题,提高用户体验。

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    var grid = new Ext.grid.GridPanel({ store: store, // 绑定数据存储 columns: [/* 定义列 */], plugins: [editor], // 使用 RowEditor 作为插件 title: 'My Grid', width: 500, height: 300, renderTo: ...

    Ext grid panel 滚动条位置不变

    ### Ext grid panel 滚动条位置不变 在前端开发领域,特别是在使用Ext JS框架时,保持滚动条位置不变是一个非常实用的功能。特别是在处理实时数据更新的场景下,这一功能可以确保用户在数据刷新后仍然停留在之前...

    Ext表格列锁定+多表头插件

    这个插件主要用于改进Ext Grid的用户体验,特别是处理大量数据时,通过列锁定和多表头功能,使得用户能够更有效地浏览和操作数据。 首先,"列锁定"是Ext Grid中一个非常实用的功能,特别是在显示宽广、多列的数据表...

    ExtJs GridPanel双击事件获得双击的行

    GridPanel由Store(数据存储)和ColumnModel(列模型)组成,它们定义了数据源和显示样式。在创建GridPanel时,我们需要配置这两个部分,例如: ```javascript var store = Ext.create('Ext.data.Store', { fields...

    extjs单元格无法复制

    解决 ExtJS GridPanel 单元格无法选中复制的问题需要两个步骤:添加新的 CSS 样式和修改 Ext.grid.GridPanel 的 prototype。通过这些步骤,我们可以使得单元格的内容可以被选中和复制,从而提高用户体验。

    Ext组件描述,各个组件含义

    **2.6 Grid Panel (Ext.grid.GridPanel)** - **xtype**: `grid` - **功能描述**:Grid Panel 是一个用于展示表格数据的组件。 - **主要用途**:展示结构化数据,支持排序、过滤等功能。 **2.7 Paging Toolbar (Ext...

    Ext Grid表格的自动宽度及高度的实现

    在这个示例中,`grid`对象是一个`Ext.grid.GridPanel`实例,它包含了数据存储(`store`)、列定义以及样式配置等。值得注意的是`width`和`height`属性的设置方式,正是我们前面讨论的动态尺寸调整策略。 ### 小结 ...

    ext表格布局小例子

    其表格组件(`Ext.grid.GridPanel`)是其最具特色的功能之一,广泛应用于数据展示和管理。 #### 二、代码分析 在本例中,我们首先引入了必要的 ExtJS 相关文件,包括样式表、脚本等资源。 ```html ...

    给Extjs的GridPanel增加“合计”行

    - 首先,我们需要创建一个继承自EXTJS的`Ext.grid.GridView`的自定义View类。这个类将覆盖默认的渲染逻辑,以便在表格底部插入合计行。 - 在`GridSummary.js`文件中,我们可以定义这个类,并重写`onRender`方法,...

    Ext修改GridPanel数据和字体颜色、css属性等

    Ext修改GridPanel数据和字体颜色等,不是单指EditGridPanel 首先获取选中的行(当然也可以获取单元格): 代码如下: var selectedRow = grid.getSelectionModel().getSelected(); 修改设置: 代码如下: selectedRow....

    extjs动态表头,绝对的好东西啊

    这个"extjs动态表头"的资源很可能是一个插件或组件,名为`Ext.ux.grid.DynamicGridPanel.js`,它扩展了ExtJS的标准GridPanel,增加了动态调整列的能力。 动态表头的核心功能包括: 1. **实时编辑**:用户可以在...

    解决ext下拉列表全选和去全选功能

    EXTJS的`GridPanel`提供了`selModel`属性来管理选择,你可以通过`selModel.selectAll()`和`selModel.deselectAll()`方法来实现全选和去全选。 标签中的“源码”意味着你需要理解EXTJS的底层工作原理,而“工具”则...

    ExtJs框架系列之ProgressGrid进度条

    ProgressColumn是Ext.ux.grid的一个扩展,它允许你在ExtJs的GridPanel中添加一列专门用于显示进度条。这对于监控任务进度、数据加载状态或者任何需要实时反馈的情况非常有用。下面,我们将详细介绍如何使用...

    extjs单元格合并

    在配置GridPanel时,需要设置view属性为Ext.ux.grid.RowspanView对象,并将cls属性设置为'rowspan-grid'。同时,还需要在列模型中配置合并行的列,例如: ``` { dataIndex: 'xxx', header: 'xxx', rowspan: 3 } //...

    ExtJs学习资料28-Ext.data.JsonStore数据存储器.doc

    var grid=new Ext.grid.GridPanel({ title:"个人信息表(JsonStore 读取数据)", iconCls:"icon", renderTo:Ext.getBody(), width:320, height:140, frame:true, collapsible:true, titleCollapse:true, ...

    Ext JS 删除的代码

    每个按钮都有自己的`text`和`iconCls`属性,分别设置按钮的文字和图标样式。 `add_rent.show();`表示当点击“添加月租金”按钮时,将会显示一个名为`add_rent`的弹出窗口或者对话框。而“删除”按钮则有一个`...

    ExtJS 自定义分页控件---- PM3PagingToolbar.js

    var grid = new Ext.grid.GridPanel({ bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, displayMsg: '显示 {0} - {1} 行 总数 {2} 行', emptyMsg : '没有数据显示' }) }); store...

    扩展GridPanel,附带分页选中状态,实现快速构建一个功能齐全的Grid

    6. **自定义样式**: 如果扩展还包括界面样式调整,可能还会在`cgrid.js`中包含CSS类名的定义,或者引用外部CSS文件来改变GridPanel的外观。 7. **实例化和使用`: 创建`MyCustomGrid`实例并在页面中使用。这可能涉及...

Global site tag (gtag.js) - Google Analytics