問(wèn)題：使用Grid時(shí)，如果出現(xiàn)列標(biāo)題與復(fù)選框錯(cuò)位
使用定義樣式
.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
.ext-ie8 .x-menu-item-icon,
.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
解決
使用grid的遮罩提示時(shí)，一定要設(shè)表格的height和width。
enableColumnMove和enableColumnResize為false表示禁用拖放列和改變列寬度功能。
默認(rèn)情況下一次可以選一行或多行。
stripeRows:true顯示為斑馬線。
問(wèn)題：自主決定每列的寬度
1.手動(dòng)指定
cm(columnmudule)支持給每列設(shè)置寬度,如果不指定則默認(rèn)的寬度為100px.
var cm=new Ext.grid.columnModel({
{header:'列頭',dataIndex:'數(shù)據(jù)源索',width:寬度},....});
2.自動(dòng)填充
var gird=new Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
viewConfig:{forceFit:true}});
會(huì)按照設(shè)置的寬度之間的比例進(jìn)行顯示，而不是按照設(shè)置的寬度。
3.指定自動(dòng)填充剩余空間的列
也可以指定一列來(lái)完成該操作，但該操作要求該列必須定義時(shí)指定id值。
var cm=new Ext.grid.columnModel({
{header:'列頭',dataIndex:'數(shù)據(jù)源索',width:寬度,id:'id標(biāo)識(shí)屬性'},....});
接下來(lái)設(shè)定
Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
autoExpandColumn:'id列標(biāo)識(shí)'});
問(wèn)題：讓列支持排序
在建立列模型時(shí)指定storable:true
問(wèn)題：中文排序
1.為Ext.data.Store設(shè)置一個(gè)storeInfo:{field:'列名',direction:'ASC|DESC'}屬性。
2.重寫(xiě)Ext.data.Store的applySort函數(shù)
Ext.data.Store.prototype.applySort = function() {
if (this.sortInfo && !this.remoteSort) {
var s = this.sortInfo, f = s.field;
var st = this.fields.get(f).sortType;
var fn = function(r1, r2) {
var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
if (typeof(v1) == "string") {
return v1.localeCompare(v2);
}
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};
this.data.sort(s.direction, fn);
if(this.snapshot && this.snapshot != this.data) {
this.snapshot.sort(s.direction, fn);
}
}
};
該函數(shù)可以加在ext-all.js文件的未尾?；蛘叻旁趆tml頁(yè)面的最上面，保證在EXT初始化之后，實(shí)際代碼調(diào)用之前執(zhí)行。
問(wèn)題：顯示日期類型數(shù)據(jù)列
1.在store的reader屬性中增加type和dataFormat兩個(gè)屬性
{name: 'date',type:'date',dateFormat:'Y-j-n H:i:s'}
注意格式化字符串必須要與實(shí)際日期的內(nèi)容相對(duì)應(yīng)。
如日期為2009-5-2 12:30:58 則格式化字符串為'Y-j-n H:i:s'
如日期為2009-05-02 12:30:58 則格式化字符串為'Y-m-d H:i:s'
詳細(xì)字符串的含義見(jiàn)ext api doc之Date類
以保證能夠讀取到正確的日期值。
2.在ColumnModel中新加配置
{header: '日期',dataIndex: 'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年j月n日')}
其中renderer的格式字符串表示顯示的格式是什么。
問(wèn)題：如何在單元格時(shí)顯示紅色的字或圖片，按鈕等
在ColumnModule的相應(yīng)列的屬性中添加renderer:渲染函數(shù)
如:
var cm=new Ext.grid.ColumnModel([
{head:'列頭',dataIndex:'數(shù)據(jù)源索',renderer:渲染函數(shù)}]);
渲染函數(shù)：
function 函數(shù)名(value){
if(value==值）｛
return html+css代碼;
}
else
{
return 其它的html+css;
}
}
問(wèn)題：如何設(shè)置表格的表頭右鍵提示為漢字內(nèi)容
Ext.grid.GridPanel可以看作控制器，Ext.data.Store可以看作模型，Ext.grid.GridView可以看作視圖.在構(gòu)建Ext.grid.GridPanel實(shí)例時(shí)添加viewConfig屬性
var gid=new Ext.grid.GridPanel(
{renderTo:'grid',
store:store,
cm:cm,
viewConfig:{
columnsText:'顯示的列',
scrollOffset:30,
sortAscText:'升序',
sortDescText:'降序'
//forceFit:true
}
});
問(wèn)題：用grid實(shí)現(xiàn)分頁(yè)顯示
１.為Grid添加分頁(yè)工具條
在GridPanel中進(jìn)行設(shè)置
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight: true,
store: store,
cm: cm,
bbar: new Ext.PagingToolbar({
pageSize:3,
store: store,
displayInfo: true,
displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
emptyMsg: "沒(méi)有記錄"
})
});
store.load();
在使用分頁(yè)工具條之后，store.load()必須發(fā)生在構(gòu)造GridPanel之后.而且數(shù)據(jù)源不能使用Ext.data.SimpleStore.Grid每次都會(huì)顯示數(shù)據(jù)源中所有的數(shù)據(jù).因此數(shù)據(jù)一定要先在后臺(tái)分好.
如果要在Grid的頭部顯示分頁(yè)工具條，可以將bbar改為tbar。
２.后臺(tái)分頁(yè)
后臺(tái)jsp的做法：
①取得開(kāi)始頁(yè)號(hào)與頁(yè)大小
String start = request.getParameter("start");
String limit = request.getParameter("limit");
②訪問(wèn)數(shù)據(jù)庫(kù)取得數(shù)據(jù)
③將數(shù)據(jù)輸出為json字符串
格式為：{totalProperty:總記錄數(shù),root:[｛.....｝，｛.....｝，....]),其中root數(shù)組存放當(dāng)前頁(yè)的數(shù)據(jù).
前臺(tái)頁(yè)面的做法：
①修改Store
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:jsp的url'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
②向服務(wù)器傳參
store.load({params:{start:0,limit:10}});
Grid每次都會(huì)顯示全部在root中的數(shù)據(jù)，而不論totalProperty的值是多少，所以分頁(yè)時(shí)root數(shù)組中的數(shù)據(jù)由后臺(tái)jsp控制。
3.前臺(tái)分頁(yè)
EXT中的Grid是把得到的數(shù)據(jù)一次性顯示在表格里，并沒(méi)有直接為我們提供內(nèi)存分頁(yè)的功能，但是在Ext的examples/locale/PapingMemoryProxy.js，它可以從本地?cái)?shù)據(jù)讀取數(shù)據(jù)同，并實(shí)現(xiàn)內(nèi)存分頁(yè)。
步驟如下：
①將PagingMemoryProxy.js導(dǎo)入html
②把以前的MemroryProxy換成PagingMemoryProxy
③調(diào)用store.load({params:{start:0,limit:3}});顯示最開(kāi)始的3條記錄。
4.后臺(tái)排序
在默認(rèn)的情況下，Grid只能對(duì)當(dāng)前頁(yè)的數(shù)據(jù)進(jìn)行排序，如果對(duì)所有的數(shù)據(jù)排序，則需要將排序信息提交到后臺(tái)，由后臺(tái)將信息組裝到SQL里，然后再由后臺(tái)將處理好的數(shù)據(jù)返回給前臺(tái)。
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'09_01.jsp'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
]),
remoteSort: true
});
其中remoteSort: true表示允許后臺(tái)排序，這樣在排序時(shí)就會(huì)有變化，不會(huì)立即顯示出排序的結(jié)果，而是向后臺(tái)提交兩個(gè)參數(shù)，分別是sort和dir，表示要排序的字段與升序或降序。
jsp則進(jìn)行相應(yīng)的處理
String start = request.getParameter("start");
String limit = request.getParameter("limit");
String sort = request.getParameter("sort");
String dir = request.getParameter("dir");
再進(jìn)行數(shù)據(jù)庫(kù)分頁(yè)，并返回json格式的分頁(yè)數(shù)據(jù)。
