如何改变extjs中gridpanel单元格边框,上下边框

如题所述

第1个回答  2012-12-09
看了一下Extjs中html代码会知道,extjs中gridpanel中的表格是通过<div<table<tbody<tr<td<divcontent式的结构书写的。要改变单元格边框的样式就要改变Ext-all.css中.x-grid3-row这个样式。这个样式是应用到最外层div上的。
全局改变只需改变Ext-all.css里面的.x-grid3-row样式
比如你想去掉边框可以这样:
一、.x-grid3-row{cursor:default;border:0px solid #fff;border-top-color:#fff;width:100%;}
如果想个性一点,自己要定义一个样式然后应用到特定的行如:
一、.my-x-grid3-row{cursor:default;border:0px solid #ccc,border-top-color:#fff;width:100%;}
二、应用样式,获取div
var view=grid.getView();
var rows=view.getRows();//获取所有的行
var row=rows[0];//获取单行,就是你想改变的那一行,rows[1],rows[2].....都可以,就看你有多少列了
var cls= Ext.get(row);//获取ext中外层div对象
cls.removeClass("x-grid3-row");//去掉原来的样式
cls.addClass("my-x-grid3-row");//加上自己的样式
这样你会发现原来的边框不见了。大家可以举一反三改变其他样式。
ps:extjs中css中核心的部分是Ext-all.css,所以大家要是想改变样式直接改变里面的东西就ok啦本回答被提问者采纳

如何改变extjs中gridpanel单元格边框,上下边框
全局改变只需改变Ext-all.css里面的.x-grid3-row样式 比如你想去掉边框可以这样:一、.x-grid3-row{cursor:default;border:0px solid #fff;border-top-color:#fff;width:100%;} 如果想个性一点,自己要定义一个样式然后应用到特定的行如:一、.my-x-grid3-row{cursor:default;border:0px soli...

如何设置extjs gridpanel 行的 高度
\/\/增加CSS样式即可达到效果 .x-grid3-row td,.x-grid3-summary-row td{ line-height:18px;\/\/控制GRID高度 vertical-align:top;\/\/垂直居中 border-right: 1px solid #eceff6 !important;\/\/控制列线 border-top: 1px solid #eceff6 !important;\/\/控制行线 ...

Extjs4.0中 在 grid.Panel里添加复选框,但是如何可以取消那个可以全选的...
先根据类名把一组元素找出来,然后第一个元素就是那个你要去掉的复选框,对第一个元素设置样式就行了,代码如下。思路是这样的,我用的是Extjs6 \/\/把头部的复选框去掉 var check = grid.getEl().select('div.x-column-header-text-wrapper');check.elements[0].style.display = "none";...

EXTJS中如何调整Grid的长度,根据浏览器(谷歌)自动调整?
一般在EXT中 , 会把组件都放到viewport中 , viewport 是一个自动适应浏览去整个区域的一个容器...可以把其他的组件都放到viewport中...比如你上面的grid..可以放到viewport中 , 然后viewport设置 layout = fit 就可以...具体可以去查看一下API.\/\/下面代码是直接从API的例子中复制的..可以看一下Ext...

如何用Extjs进行下面的布局,整体是个panel 内部3个子panel 并且还可以拆...
简单来说,就是hbox或column横向布局,再用vbox纵向布局 代码如下:Ext.onReady(function () { Ext.create('Ext.panel.Panel',{layout:{ type:'column'},default:{ xtype:'panel'},border:1,width:600,height:400,padding:10,items:[{ margin:'30px', width:150, height:...

ExtJs实现刷新Grid单个单元格
楼上的基本对了。如果是gridpanel的话就这么改,如果是editorGridpanel直接修改不就好了吗?然后加一个commit就ok了

extjs 如何实现定义的grid的第一列2列可以带那种伸开和收缩的
extjs ajax ---解决方案--- gridpanel增加id,使用 var store=Ext.getCmp('grid的id').getStore()得到数据源,然后你要怎么操作都行了 store.getAt(0).get('your field name')

extjs的panel组件怎么使用
renderTo: Ext.getBody(),\/\/x,y,renderTo:Ext.getBody()初始化panel的位置 floating: true,\/\/true frame: true,\/\/圆角边框 width: 400,height: 200,draggable:true }).show();\/\/在这里也可以不show()但是还不能拖到其他的地方,我们需要改写draggable:draggable: { insertProxy: false,\/\/...

extjs中在GridPanel上添加一个搜索框 (文本框+按钮)怎么实现啊。。_百...
直接配置到工具条tbar里就行了:var grid = new Ext.grid.GridPanel({ id: "grid1",title: "GridPanel实例",renderTo: "div1",width: 500,height: 300,frame: true,tbar: [{xtype:'label',text:'请输入关键词:'},{xtype:'textfield',id:'KeyWord'},{text:'搜索',handler:function...

extjs GridPanel怎么添加ComboBox,TextField等form控件?
就是用extjs键表格。。。 用grid吧。。给你个例子 Ext.onReady(function(){ \/ Handler specified for the 'Available' column renderer param {Object} value \/ function formatDate(value){ return value ? value.dateFormat('M d, Y') : '';} \/\/ shorthand alias var fm = Ext.form;...

相似回答
大家正在搜