1. 程式人生 > >如何改變extjs中gridpanel單元格邊框,上下邊框

如何改變extjs中gridpanel單元格邊框,上下邊框

看了一下Extjs中html程式碼會知道,extjs中gridpanel中的表格是通過<div><table><tbody><tr><td><div>content式的結構書寫的。要改變單元格邊框的樣式就要改變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啦