1.界面修改(css style)：
Extjs中界面風(fēng)格與我們產(chǎn)品本身的風(fēng)格有很大不同，從邊框、選中行的顏色到鼠標(biāo)移動(dòng)到的行的顏色、菜單等，幾乎都不同。Extjs對(duì)這些樣式的設(shè)置都是由css完成的。如：
選中行的顏色就可用如下設(shè)置完成：
.x-grid3-row-selected{background:#c6e2ff!important;}
其他的都類似，只要找到對(duì)應(yīng)的class, 然后設(shè)置要修改的部分即可。

2. 屬性的作用(About Ext.grid. GroupingView, EditorGridPanel):
Extjs的grid功能強(qiáng)大，如排序、隱藏列或移動(dòng)列等，這些都有一些屬性與其對(duì)應(yīng)，可以選擇要還是不要。其中一些的屬性和其作用如下：
*. EditorGridPanel:
border: false, //grid的邊界
autoHeight: true, //grid的高度是否要用指定的高度
enableColumnMove: false, //grid的列是否可以移動(dòng)
enableHdMenu: false, //在列的header是否要有下拉菜單
trackMouseOver: true, //當(dāng)鼠標(biāo)移過行時(shí)，行是否要highlight
stripeRows: true, //讓grid相鄰兩行背景色不同
*. GroupingView:
在要顯示的數(shù)據(jù)中，根據(jù)它們的某個(gè)數(shù)據(jù)點(diǎn)進(jìn)行分組，分組顯示。這個(gè)數(shù)據(jù)點(diǎn)由*.GroupingStore中的groupField決定。*.GroupingView設(shè)置這個(gè)分組顯示的grid的一些關(guān)于組的顯示屬性。如：
forceFit:true, //是否根據(jù)grid的寬度調(diào)整列的寬度，防止水平scrollbar的出現(xiàn)
enableGroupingMenu: false, //控制header的下拉菜單中是否有g(shù)roup的選項(xiàng)(Group By This Field, Show in Groups(checkbox))
showGroupName: true,
//用來分組的數(shù)據(jù)點(diǎn)這一列的header是否要隨group name一起顯示
hideGroupedColumn: true, //用來分組的數(shù)據(jù)點(diǎn)這一列是否要顯示
startCollapsed: false, //一開始進(jìn)到grid這頁(yè)，它的group是合起還是展開
scrollOffset: -1, //為垂直的scrollbar留下的space(默認(rèn)是19px)

3.在單元格中添加圖片：
在Ext.grid.ColumnModel中對(duì)應(yīng)于加圖片的列，用它的render鏈接到一個(gè)函數(shù)進(jìn)行添加。如：
var colModel = new Ext.grid.ColumnModel([
{header:”com”, render: AddImgs.createDelegate(this)},
{header:”test”, width:200, sortable:false}
]);
響應(yīng)函數(shù)如下：
AddImgs = function(value,p,record){
if(record.data.descrip != "")
{
p.attr='ext:qtip="Add to playlist" style="background-image:url(/imgs/icn_view.gif) !important; background-position: center 2px; background-repeat: no-repeat;cursor: pointer;"';
}
}
函數(shù)中的record.data是grid的數(shù)據(jù),而著色的就是要添加的圖片的路徑和圖片名。

4.當(dāng)顯示內(nèi)容的字?jǐn)?shù)超過單元格可以顯示的字?jǐn)?shù)時(shí)，如何讓其自動(dòng)換行(how to wrap text when the length of characters is more than the width of the column):
設(shè)置這些單元格的所用類的css即可。 如：
.x-grid3-cell-inner{
white-space:normal;
overflow:visible;
}
需要注意的是：overflow的默認(rèn)值是hidden. 當(dāng)加上white-space之后，本來wrap就可以了，但是單元格的高度還是一行的高度，所以數(shù)據(jù)除了第一行，其它都看不到。只有把overflow的值改為visible后，單元格所在行的高度才會(huì)隨著數(shù)據(jù)的行數(shù)而調(diào)整。

5.當(dāng)一開始進(jìn)入頁(yè)面時(shí)，讓所有的group除了第一個(gè)group展開(collapsed)外，其它的group都合上(folded):
首先通過設(shè)置屬性startCollapsed讓所有g(shù)roup都合上: startCollapsed:true;
然后在store.load({callback: function(records,o,s) {ToggleFirstGroup();} })中調(diào)用函數(shù)把第一個(gè)group展開:
//gridView是該grid所用的view, 如(var gv = new Ext.grid.GroupingView({});).

6.date format: 數(shù)據(jù)為9/24/2008
1).這種format的結(jié)果是：Web Sep 24 00:00:00 UTC+0800 2008
{
header: dHeader,
width: 90,
sortable: true,
dateFormat: 'Y-m-d', //dateFormat是'm/d/Y'的話，得到的結(jié)果一樣
dataIndex: 'date'
},
2). 這種format的結(jié)果是: 2008-09-24
{
header: dHeader,
width: 90,
sortable: true,
renderer: Ext.util.Format.dateRenderer('Y-m-d'), //format是'm/d/Y'，結(jié)果是”09/24/2008”
dataIndex: 'date'
},
找到的一些關(guān)于Class Date的format及其輸出的描述(http://extjs.com/deploy/ext/docs/output/Date.html):
****************************
Format Output Description
------ ---------- --------------------------------------------------------------
d 10 Day of the month, 2 digits with leading zeros
D Wed A textual representation of a day, three letters
j 10 Day of the month without leading zeros
l Wednesday A full textual representation of the day of the week
S th English ordinal day of month suffix, 2 chars (use with j)
w 3 Numeric representation of the day of the week
z 9 The julian date, or day of the year (0-365)
W 01 ISO-8601 2-digit week number of year, weeks starting on Monday (00-52)
F January A full textual representation of the month
m 01 Numeric representation of a month, with leading zeros
M Jan Month name abbreviation, three letters
n 1 Numeric representation of a month, without leading zeros
t 31 Number of days in the given month
L 0 Whether it's a leap year (1 if it is a leap year, else 0)
Y 2007 A full numeric representation of a year, 4 digits
y 07 A two digit representation of a year
a pm Lowercase Ante meridiem and Post meridiem
A PM Uppercase Ante meridiem and Post meridiem
g 3 12-hour format of an hour without leading zeros
G 15 24-hour format of an hour without leading zeros
h 03 12-hour format of an hour with leading zeros
H 15 24-hour format of an hour with leading zeros
i 05 Minutes with leading zeros
s 01 Seconds, with leading zeros
O -0600 Difference to Greenwich time (GMT) in hours
T CST Timezone setting of the machine running the code
Z -21600 Timezone offset in seconds (negative if west of UTC, positive if east)
**********************************
下面是一些format的格式及其對(duì)應(yīng)結(jié)果：數(shù)據(jù)同上,用renderer: Ext.util.Format.dateRenderer(format)
“Y-m-d” --> 2008-09-24
“y-m-d” --> 08-09-24
“F j, Y” --> September 24, 2008
“F j, y” --> September 24, 08
“F j, Y, g:i A” --> September 24, 2008, 12:00 AM

最新評(píng)論