本節主要學習ExtJS4.2 Grid顯示行號、斑馬線效果(奇偶行背景色不一致)、複製單元格文字、禁止點擊列排序、禁止列頭部右側菜單,示例圖片:
主要內容如下:
顯示行號
斑馬線效果(奇偶行背景顏色不一致)
複製單元格問題
禁止點擊列排序
禁止列頭部右側菜單
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}