grid---样式

最新推荐文章于 2024-09-14 07:51:00 发布

sjwzb

最新推荐文章于 2024-09-14 07:51:00 发布

阅读量1.1k

点赞数

分类专栏： extjs4.1 文章标签： header 修改颜色可编辑

本文链接：https://blog.csdn.net/sjwzb/article/details/49278317

版权

extjs4.1 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

修改header的颜色

可编辑的标记为明显色，在组件初始化时，设置header的tdCls：(gridbgcolor是css的class名)

Ext.define('Ext.grid.UserGridPanel', {
    extend: 'Ext.grid.GridPanel',
    alias: 'widget.UserGridPanel',
    initComponent : function() {
	if(this.bcellEditingGrid){
		var column = this.columns;
		for(var i = 0;i < column.length;i++){
			if(column[i] && column[i].field && column[i].field.xtype){
				column[i].tdCls = 'gridbgcolor';
				column[i].baseCls = 'gridbgcolor';
			}
		}
	}
     }
})

但是当column动态生成时，因为是初始化后，才添加的column，所以颜色将不变化，如果想让可编辑的背景色也修改，方法：

<pre name="code" class="html">style: {},
baseCls:'gridbgcolor',

<strong>注：stype:{} 一定要有。</strong>

另外

<pre name="code" class="html">style: {
<span style="white-space:pre">	</span>backgroundColor: 'white',
},
cls:'backgroundColor:white',
baseCls:'backgroundColor:white',

可修改为任意颜色。

</pre><pre name="code" class="html">

header为可编辑框

创建grid实例时，加插件Ext.ux.grid.plugin.HeaderFilters，使用时用fiter

1.插件

var HeaderFilters = Ext.create('Ext.ux.grid.plugin.HeaderFilters',{
		enableTooltip: false,
	})
gris的插件设置：plugins : [HeaderFilters,CellEditing],

<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">2.使用

<span style="font-family: Arial, Helvetica, sans-serif;">{</span>

    header : key+'销售调整',
    width : 150,
    dataIndex : key+'_adjustPercent',
    filter:{
	xtype:'numberfield',
    }

grid添加按钮列

{
     header:  '',
     dataIndex: '',
     renderer: function(val){
          var returnStr= '<INPUT type="button"          value="打印">'
          return returnStr;

     }
}

点击触发的事件监听在grid的cellclick

//打码- 打印
			cellclick: function(table,td,cellIndex,record,tr,rowIndex,e){
				 var btn= e.getTarget().type;    
				 if(btn=='button'){             <span style="font-family: Arial, Helvetica, sans-serif;">//判断点击的是否是按钮</span>
//					 window.productTeams= [['lpgid1','11','lpgname1','','num1','','printNum1','','sno','11'],
//							                      ['lpgid2','22','lpgname2','','num2','','printNum2','','sno','22'],
//							                      ['lpgid3','33','lpgname3','','num3','','printNum3','','sno','33']];
					 var productTeams= window.productTeams;
					 var recordData= record.data;
					 var firstCell= 12,
					 	 multiple= (cellIndex-firstCell)/5;
					 var lpgid= record.get(productTeams[multiple][0]),
					 	 lpgname= record.get(productTeams[multiple][2]),
					 	 num= record.get(productTeams[multiple][4]),
					 	 printNum= record.get(productTeams[multiple][6]),
					 	 sno= record.get(productTeams[multiple][8]);
					 var w = window.open('?do=printCodeByGroup&lgid='+recordData.lgid+ '&lgname='+recordData.lgname+ '&sno='+recordData.sno+
							 '&num='+num+ '&printnum='+printNum+ '&lpgid='+lpgid+ '&lpgname='+lpgname+ '&lpgsno='+sno);
					 w.print();
						 
				 };
			}