ExtJS4.2 Grid知識點七：顯示行號、斑馬線效果（奇偶行背景色不一致）、複製單元格文字、禁止點擊列排序

本節主要學習ExtJS4.2 Grid顯示行號、斑馬線效果（奇偶行背景色不一致）、複製單元格文字、禁止點擊列排序、禁止列頭部右側菜單，示例圖片：

在線演示  /  在線演示

主要內容如下：

1. 顯示行號

2. 斑馬線效果（奇偶行背景顏色不一致）

3. 複製單元格問題

4. 禁止點擊列排序

5. 禁止列頭部右側菜單

1.顯示行號

在Grid中增加行號列，xtype指定爲rownumberer。

{header: 'NO',xtype: 'rownumberer',width: 40,sortable: false}

2.斑馬線效果（奇偶行背景色不一致）

在Grid中viewConfig屬性，並將stripeRows指定爲true。

viewConfig:{
    stripeRows:true,//在表格中顯示斑馬線
    enableTextSelection:true //可以複製單元格文字
}

3.複製單元格文字

同上，在Grid中viewConfig屬性，並將enableTextSelection指定爲true。

viewConfig:{
    stripeRows:true,//在表格中顯示斑馬線
    enableTextSelection:true //可以複製單元格文字
}

4.禁止點擊列排序

將每個column定義屬性sortable指定爲false，實例中將“Name”列設定爲不可排序。

{header: 'Name',  dataIndex: 'name',  width:100,sortable: false}

5.禁止顯示列頭部右側菜單

將每個column定義屬性menuDisabled指定爲true，實例中將“Idno”列設定爲不顯示列頭部右側菜單。

{header: 'Idno', dataIndex: 'idno', width:150,menuDisabled:true}