Ext.grid.ColumnModel
用于定義Grid的列
用例
var colModel = new Ext.grid.ColumnModel([
    {header: "Ticker", width: 60, sortable: true},
    {header: "Company Name", width: 150, sortable: true}
    ]);

回到ColumnModel,它的構(gòu)造參數(shù)是一個(gè)config組成的數(shù)組,其中config定義為{
    align : String    //css中的對(duì)齊方式
    dataIndex : String    //要綁定的Store之Record字段名
    fixed : Boolean    //如果為真列寬不能被改變
    header : String    //頭部顯示的名稱
    hidden : Boolean    //隱藏本列
    id : String    //主要用于樣式選擇,如果已定義此屬性,那么列所在的單元格會(huì)定義class為 x-grid-td-id
    renderer : Function    //可以使用這個(gè)構(gòu)造參數(shù)格式化數(shù)據(jù)
    resizable : Boolean    //可調(diào)節(jié)尺寸
    sortable : Boolean    // 可排序
    width : Number    //寬度
}
另 外雖然未經(jīng)聲明,但config事實(shí)上支持editor:Ext.form.Field屬性,這點(diǎn)會(huì)在Ext.grid.EditorGridPanel 中看到,另外為了擴(kuò)展grid的表現(xiàn),我們通常也需要自定義列,順便提一個(gè)有趣的列,Ext.grid.RowNumberer,這是Ext為我們擴(kuò)展好 的一個(gè)簡單列,它的構(gòu)造很簡單,也沒有其它的方法和屬性,Ext.grid.RowNumberer({ header : String, sortable : Boolean, width : Number})如果使用它,上例可改為
var colModel = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    {header: "Ticker", width: 60, sortable: true},
    {header: "Company Name", width: 150, sortable: true}
    ]);
屬性
defaultSortable : Boolean    //默認(rèn)可排序
defaultWidth : Number    //默認(rèn)的寬度
setConfig : Object    //返回構(gòu)造時(shí)的config參數(shù)

方法
ColumnModel( Object config )
構(gòu)造

getCellEditor( Number colIndex, Number rowIndex ) : Object
得到指定行列的編輯者
getColumnById( String id ) : Object
得到指定id的列對(duì)象
getColumnCount() : Number
得到列數(shù)
getColumnHeader( Number col ) : String
得到列頭部文本
getColumnId( Number index ) : String
得到列id
getColumnTooltip( Number col ) : String
得到列提示
getColumnWidth( Number col ) : Number
列寬
getColumnsBy( Function fn, [Object scope] ) : Array
通過fn找到指定的列
getDataIndex( Number col ) : Number
得到指定列的數(shù)據(jù)綁定對(duì)象在store中的序號(hào)
getIndexById( String id ) : Number
通過id找序號(hào)
getRenderer( Number col ) : Function
得到繪制器
getTotalWidth( Boolean includeHidden ) : Number
總的寬度
hasListener( String eventName ) : Boolean
有事件偵聽者?
isCellEditable( Number colIndex, Number rowIndex ) : Boolean
指定行列可編輯?
isFixed() : void
應(yīng)該返回Boolean,充滿?
isHidden( Number colIndex ) : Boolean
指定列隱藏?
isResizable() : Boolean
可重寫義大小
isSortable( Number col ) : Boolean
可排序?
setColumnHeader( Number col, String header ) : void
設(shè)置指定列列頭
setColumnTooltip( Number col, String tooltip ) : void
設(shè)置指定列提示
setColumnWidth( Number col, Number width ) : void
設(shè)置指定列寬度
setConfig( Array config ) : void
重設(shè)config
setDataIndex( Number col, Number dataIndex ) : void
設(shè)置指定列的數(shù)據(jù)源
setEditable( Number col, Boolean editable ) : void
設(shè)置指定列是否可編輯
setEditor( Number col, Object editor ) : void
為指定列設(shè)置編輯器
setHidden( Number colIndex, Boolean hidden ) : void
設(shè)置指定列隱藏
setRenderer( Number col, Function fn ) : void
為指定列設(shè)置輸出方法

事件
columnmoved : ( ColumnModel this, Number oldIndex, Number newIndex )
configchanged : ( ColumnModel this )
headerchange : ( ColumnModel this, Number columnIndex, String newText )
hiddenchange : ( ColumnModel this, Number columnIndex, Boolean hidden )
widthchange : ( ColumnModel this, Number columnIndex, Number newWidth )

Ext.grid.PropertyColumnModel
繼承自Ext.grid.ColumnModel,專為Ext.grid.PropertyGrid而設(shè)計(jì),構(gòu)造有點(diǎn)不同,不過這個(gè)api文檔不知道誰寫的,ext2中好象沒有g(shù)rid了,
PropertyColumnModel( Ext.grid.Grid grid, Object source )

Ext.grid.GridView
為GridPanel提供視圖支持
config{
    autoFill : Boolean
    enableRowBody : Boolean
    forceFit : Boolean
}

屬性
columnsText : String    //列文本
scrollOffset : Number    //滾動(dòng)步行
sortAscText : String    //正序文本
sortClasses : Array    //正序和倒序時(shí)頭部列使用的樣式,默認(rèn)為["sort-asc", "sort-desc"]
sortDescText : String    //倒序文本

方法
GridView( Object config )
構(gòu)造
focusCell( Number row, Number col ) : void
指定第row行第col列得到焦點(diǎn)
focusRow( Number row ) : void
選中第row行
getCell( Number row, Number col ) : HtmlElement
得到指定行列的htmlelement對(duì)象
getHeaderCell( Number index ) : HtmlElement
得到指定列的表單頭對(duì)象
getRow( Number index ) : HtmlElement
得到指定行的htmlelement對(duì)象
getRowClass( Record record, Number index, Object rowParams, Store ds ) : void
//得到指定行的樣式?郁悶的是沒有能在GridView.js中找到此方法的定義
refresh( [Boolean headersToo] ) : void
涮新顯示
scrollToTop() : void
滾動(dòng)到頭部

Ext.grid.GroupingView
繼承自Ext.grid.GridView,用于數(shù)據(jù)分組 ,應(yīng)用于
config{
emptyGroupText : String        //空的分組顯示文本
enableGroupingMenu : Boolean    //允許分組菜單
enableNoGroups : Boolean    //允許分組/不分組顯示
groupTextTpl : String        //這是個(gè)模板,分組項(xiàng)的內(nèi)容依此顯示,語法參見模板,
hideGroupedColumn : Boolean    //隱藏分組列
startCollapsed : Boolean    //開始時(shí)收起,默認(rèn)為假
}
另外雖然沒有在api中說明,但groupByText和showGroupsText屬性也是可以在config中指定的
方法
GroupingView( Object config )
構(gòu)造
getGroupId( String value ) : void
取得指定值的分組id,為toggleGroup而準(zhǔn)備的方法
toggleAllGroups( [Boolean expanded] ) : void
收起或展開所有的分組
toggleGroup( String groupId, [Boolean expanded] ) : void
展開或收起指定的分組,例grid.view.toggleGroup(grid.view.getGroupId('Horticulturalist'));會(huì)展開或收起分組字段值為'Horticulturalist'的分組
Ext.onReady(function()...{
           
//定義數(shù)組
        var arr=[ ['Bill', 'Gardener'], [ 'Ben', 'Horticulturalist'],['', 'Gardener'],['', 'Gardener'],[ '', 'Horticulturalist'] ];
       
var reader = new Ext.data.ArrayReader(
      
           
...{},
       
//定義數(shù)組到record的映射關(guān)系
           [
            
...{name: 'name'},        
            
...{name: 'occupation', mapping: 1}   
           ]
        );
       
//生成元數(shù)據(jù)
         var store=new Ext.data.Store(...{
                reader:reader
            }
);
        store.loadData(arr);
      
       
//現(xiàn)在配置列信息   
        var col=new Ext.grid.ColumnModel([
            
new Ext.grid.RowNumberer(...{header:'序號(hào)',width:30}),
            
...{header:'姓名',sortable: true,dataIndex:'name'},
            
...{header:'職業(yè)',sortable: true,dataIndex:'occupation'}
        ]);     
       
//配置視圖信息
        var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
        view.columnsText
='列顯示/隱藏';
       
//現(xiàn)在我們有一個(gè)可用的grid了,別驕傲這只是第一步       
        var grid=new Ext.grid.GridPanel(...{
            el:Ext.getBody(),
            height:
200,
            width:
400,
            store:store,
            cm:col,
            view:view
            }
);   
          
        grid.render();  
           
//現(xiàn)在我們需要一個(gè)GroupingStore
         var gstore=new Ext.data.GroupingStore(...{
          reader:reader,
          groupField:
'name',
          groupOnSort:
true,
           sortInfo:
...{field: 'occupation', direction: "ASC"} //使用GroupingStore時(shí)必須指定sortInfo信息
       }
);
       gstore.loadData(arr);   
             
       
//擴(kuò)展一下我們的grid,讓他能分組當(dāng)然會(huì)更酷一點(diǎn)    
        var ggrid = new Ext.grid.GridPanel(...{
            ds: gstore,
            cm:col,
             view:
new Ext.grid.GroupingView(...{
                forceFit:
true,
                sortAscText :
'正序',
                sortDescText :
'倒序',
                columnsText:
'列顯示/隱藏',
                groupByText:
'依本列分組',
                showGroupsText:
'分組顯示',
                groupTextTpl:
'{text} ({[values.rs.length]} 條記錄)'
            }
),
            frame:
true,
            width:
400,
            height:
300,
            collapsible:
true,
            animCollapse:
false,
            renderTo:Ext.getBody()
       }
);        
      
        }
);

ExtJS教程- Hibernate教程-Struts2 教程-Lucene教程