Ext 總結（一）

問題：使用Grid時，如果出現列标題與複選框錯位
使用定義樣式
.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的遮罩提示時，一定要設表格的height和width。
enableColumnMove和enableColumnResize為false表示禁用拖放列和改變列寬度功能。
預設情況下一次可以選一行或多行。
 
stripeRows:true顯示為斑馬線。
問題：自主決定每列的寬度
1.手動指定
cm(columnmudule)支援給每列設定寬度,如果不指定則預設的寬度為100px.
var cm=new Ext.grid.columnModel({
{header:'列頭',dataIndex:'資料源索',width:寬度},....});
2.自動填充
var gird=new Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
viewConfig:{forceFit:true}});
會按照設定的寬度之間的比例進行顯示，而不是按照設定的寬度。
3.指定自動填充剩餘空間的列
也可以指定一列來完成該操作，但該操作要求該列必須定義時指定id值。
var cm=new Ext.grid.columnModel({
{header:'列頭',dataIndex:'資料源索',width:寬度,id:'id辨別屬性'},....});
接下來設定
Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
autoExpandColumn:'id列辨別'});
問題：讓列支援排序
在建立列模型時指定storable:true
問題：中文排序
1.為Ext.data.Store設定一個storeInfo:{field:'列名',direction:'ASC|DESC'}屬性。
2.重寫Ext.data.Store的applySort函數
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);
        }
    }
};
該函數可以加在ext-all.js檔案的未尾。或者放在html頁面的最上面，保證在EXT初始化之後，實際代碼調用之前執行。
問題：顯示日期類型資料列
1.在store的reader屬性中增加type和dataFormat兩個屬性
{name: 'date',type:'date',dateFormat:'Y-j-n H:i:s'}
注意格式化字元串必須要與實際日期的内容相對應。
如日期為2009-5-2 12:30:58 則格式化字元串為'Y-j-n H:i:s'
如日期為2009-05-02 12:30:58 則格式化字元串為'Y-m-d H:i:s'
詳細字元串的含義見ext api doc之Date類
以保證能夠讀取到正确的日期值。
2.在ColumnModel中新加配置
{header: '日期',dataIndex: 'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年j月n日')}
其中renderer的格式字元串表示顯示的格式是什麼。
問題：如何在單元格時顯示紅色的字或圖檔，按鈕等
在ColumnModule的相應列的屬性中添加renderer:渲染函數
如:
var cm=new Ext.grid.ColumnModel([
{head:'列頭',dataIndex:'資料源索',renderer:渲染函數}]);
渲染函數：
function 函數名(value){
 if(value==值）｛
  return html+css代碼;
 }
 else
 {
  return 其它的html+css;
 }
}
問題：如何設定表格的表頭右鍵提示為漢字内容
Ext.grid.GridPanel可以看作控制器，Ext.data.Store可以看作模型，Ext.grid.GridView可以看作視圖.在建構Ext.grid.GridPanel執行個體時添加viewConfig屬性
var gid=new Ext.grid.GridPanel(
 {renderTo:'grid',
  store:store,
  cm:cm,
  viewConfig:{
  columnsText:'顯示的列',
  scrollOffset:30,
  sortAscText:'升序',
  sortDescText:'降序'
  //forceFit:true
 }
 });
 問題：用grid實作分頁顯示
１.為Grid添加分頁工具條
在GridPanel中進行設定
                                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: "沒有記錄"
                                    })
                                });
                                store.load();
在使用分頁工具條之後，store.load()必須發生在構造GridPanel之後.而且資料源不能使用Ext.data.SimpleStore.Grid每次都會顯示資料源中所有的資料.是以資料一定要先在背景分好.
如果要在Grid的頭部顯示分頁工具條，可以将bbar改為tbar。
 
２.背景分頁
背景jsp的做法：
①取得開始頁号與頁大小
String start = request.getParameter("start");
String limit = request.getParameter("limit");
②通路資料庫取得資料
③将資料輸出為json字元串
格式為：{totalProperty:總記錄數,root:[｛.....｝，｛.....｝，....]),其中root數組存放目前頁的資料.
前台頁面的做法：
①修改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'}
        ])
    }); 
②向伺服器傳參
store.load({params:{start:0,limit:10}});
 Grid每次都會顯示全部在root中的資料，而不論totalProperty的值是多少，是以分頁時root數組中的資料由背景jsp控制。
 
3.前台分頁
EXT中的Grid是把得到的資料一次性顯示在表格裡，并沒有直接為我們提供記憶體分頁的功能，但是在Ext的examples/locale/PapingMemoryProxy.js，它可以從本地資料讀取資料同，并實作記憶體分頁。
步驟如下：
①将PagingMemoryProxy.js導入html
②把以前的MemroryProxy換成PagingMemoryProxy
③調用store.load({params:{start:0,limit:3}});顯示最開始的3條記錄。
 4.背景排序
在預設的情況下，Grid隻能對目前頁的資料進行排序，如果對所有的資料排序，則需要将排序資訊送出到背景，由背景将資訊組裝到SQL裡，然後再由背景将處理好的資料傳回給前台。
    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表示允許背景排序，這樣在排序時就會有變化，不會立即顯示出排序的結果，而是向背景送出兩個參數，分别是sort和dir，表示要排序的字段與升序或降序。
jsp則進行相應的處理
String start = request.getParameter("start");
String limit = request.getParameter("limit");
String sort = request.getParameter("sort");
String dir = request.getParameter("dir");
再進行資料庫分頁，并傳回json格式的分頁資料。