`
xiaojianbo
  • 浏览: 34481 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Extjs4设置Ext.grid.Panel设置row颜色和高度

阅读更多
viewConfig : {
		forceFit : true,
		getRowClass : function(record, index) {
			if (index % 2 == 0)
				return "red";
			else
				return "green";
		}
},

 

<style type="text/css">
.red .x-grid-cell {
	background-color: #FFFFDD;
	height: 30px;
}

.green .x-grid-cell {
	background-color: #CED9E7;
	height: 30px;
}

 

分享到:
评论

相关推荐

    ExtJs表格点击超链接获取行的值

    在ExtJs框架中,我们经常需要在表格(`Ext.grid.Panel`)中显示超链接,并且当用户点击这些超链接时,能够获取到当前行的数据。为了实现这一功能,我们可以使用`renderer`函数对单元格进行自定义渲染。 **代码示例*...

    Ext Js权威指南(.zip.001

    10.2.5 设置行的背景颜色 / 532 10.2.6 列标题的分组 / 533 10.2.7 使用锁定列 / 534 10.2.8 grid的配置项、属性、方法和事件 / 535 10.3 grid的附加功能 / 537 10.3.1 概述 / 537 10.3.2 附加功能基类:ext....

    Extjs4.2 根据不同的数值设置tabpanel行的背景颜色

    ### Extjs4.2 根据不同的数值设置 TabPanel 行的背景颜色 #### 一、引言 在Web应用程序开发中,为了提高用户体验并使数据呈现更加直观易懂,开发者常常需要根据数据的不同状态来调整UI元素的样式。例如,在使用...

    Extjs4前台前台grid导出excel

    首先,我们需要了解`Ext.grid.Panel`,这是ExtJS中的核心组件之一,用于创建数据网格。它能够动态加载数据,提供排序、过滤、分页等功能,并且可以自定义列样式和行为。在ExtJS4中,我们可能有以下场景:用户在Grid...

    ExtJS_grid.rar_Grid javascript_extjs grid

    它由Sencha公司开发,是Ext JS库的核心部分,广泛应用于企业级应用的前端开发,提供丰富的功能和高度的可定制性。这个"ExtJS_grid.rar"压缩包包含了关于学习ExtJS Grid的教程资源,特别是"第三节_ExtJS表格控件和树...

    extjs4 record mapping参数解释

    var grid = Ext.create('Ext.grid.Panel', { id: 'grid', store: store, columns: [ { text: 'Row No.', dataIndex: 'rowNO' }, { id: 'linkmannameID', header: '联系人', width: 60, sortable: true, ...

    EXT GridPanel获取某一单元格的值

    EXT GridPanel是EXT JS库中的一个核心组件,用于创建数据密集型的表格视图。它在Web应用程序中常用于展示大量结构化数据,并提供多种交互功能,如排序、分页、筛选和编辑等。在EXT GridPanel中,获取某一单元格的值...

    关于extjs4如何获取grid修改后的数据的问题

    var grid = Ext.create('Ext.grid.Panel', { // ...其他配置项... store: myStore, listeners: { 'edit': function(editor, e) { // 这里处理编辑事件 } } }); ``` 在`edit`事件的回调函数中,我们可以通过...

    php extjs grid 装载数据

    4. **配置Grid面板(Grid Panel)** 最后,创建Grid Panel并指定Store和Column配置。例如: ```javascript Ext.create('Ext.grid.Panel', { title: '用户列表', store: store, columns: [ {header: 'ID', ...

    Extjs 表格

    创建一个ExtJS表格首先需要定义一个`Ext.grid.Panel`实例,设置其配置项,包括数据源、列定义、存储配置等。例如: ```javascript var grid = Ext.create('Ext.grid.Panel', { store: store, // 数据源 columns...

    ExtJS4.0下的文件上传方式代码filesupload

    `row-editing.js`就是这个插件的源代码文件,它允许你在数据网格(Grid Panel)中进行行内编辑。这在处理文件列表或者文件元数据时非常有用,用户可以直接在表格中查看、编辑或删除文件信息。 文件上传通常涉及到...

    extjs完成用户增删改查

    7. **行编辑(Row Editing)**:为了实现用户列表的直接编辑,可以使用`Ext.grid.plugin.RowEditing`插件。点击行时激活编辑模式,编辑完成后自动提交到Store,Store再通过Proxy更新服务器。 8. **分页(Paging)**...

    改变gridpanel的行颜色

    ExtJS提供了内置的颜色渲染功能,其中最常见的就是让偶数行和奇数行有不同的背景色。这可以通过简单的配置选项实现。 ```javascript // 在grid配置中设置stripeRows为true { xtype: 'grid', stripeRows: true, /...

    ExtJS GridPanel 根据条件改变字体颜色

    具体到代码层面,我们需要定义一个Ext.grid.GridPanel对象,并在其中配置一个GridView。然后,在GridView配置中通过GetRowClassFn指向一个函数(例如setRowBg),该函数负责根据条件动态返回行的样式。 例如,当...

    extjs4 treepanel动态改变行高度示例

    通过定义类选择器`.x-row-class`并设置`line-height`为30px,我们便可以改变TreePanel中每行的高度。这使得TreePanel中的行高不再局限于默认值,可以根据实际需求进行调整。例如,如果TreePanel中需要显示较多的文字...

    Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法

    extend:'Ext.grid.Panel', alias:'widget.receiptlist', id:'receiptlist', selModel:{ selType:'checkboxmodel', mode:'SIMPLE', checkOnly:true, renderer:function(v,p,record){ if(record.data.XR0003=...

    extjs表格文本启用选择复制功能具体实现

    Ext.create('Ext.grid.Panel', { title: 'gridexample', store: gridStore, // 确保在定义之前已经创建好了 width: 600, height: 300, features: [selectFeature], columns: [{ text: 'name', dataIndex: '...

    JavaScript的ExtJS框架中表格的编写教程

    ExtJS中的表格是通过`Ext.grid.GridPanel`类实现的,它继承自`Ext.Panel`类,意味着表格本身就是一个面板组件。`xtype`属性值为`grid`,它是表格组件的唯一标识,可以在需要时通过xtype快速引用。 表格的列信息由`...

    简单的两种Extjs formpanel加载数据的方式

    在ExtJS中,`Ext.form.Panel`(或简称为`formpanel`)是一种非常重要的组件,用于创建表单来收集用户输入的数据。本文将详细介绍两种在ExtJS formpanel中加载数据的方法,以供开发者参考。 ### 方法一:使用`...

Global site tag (gtag.js) - Google Analytics