Ext.grid.ColumnModel

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

回到ColumnModel,它的構造引數是一個config組成的陣列,其中config定義為{
align : String //css中的對齊方式
dataIndex : String //要繫結的Store之Record欄位名
fixed : Boolean //如果為真列寬不能被改變
header : String //頭部顯示的名稱
hidden : Boolean //隱藏本列
id : String //主要用於樣式選擇,如果已定義此屬性,那麼列所在的單元格會定義class為 x-grid-td-id
renderer : Function //可以使用這個構造引數格式化資料
resizable : Boolean //可調節尺寸
sortable : Boolean // 可排序
width : Number //寬度
}
另外雖然未經宣告,但config事實上支援editor:Ext.form.Field屬性,這點會在Ext.grid.EditorGridPanel中看到,另外為了擴充套件grid的表現,我們通常也需要自定義列,順便提一個有趣的列,Ext.grid.RowNumberer,這是Ext為我們擴充套件好的一個簡單列,它的構造很簡單,也沒有其它的方法和屬性,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 //預設可排序
defaultWidth : Number //預設的寬度
setConfig : Object //返回構造時的config引數

方法
ColumnModel( Object config )
構造

getCellEditor( Number colIndex, Number rowIndex ) : Object
得到指定行列的編輯者
getColumnById( String id ) : Object
得到指定id的列物件
getColumnCount() : Number
得到列數
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
得到指定列的資料繫結物件在store中的序號
getIndexById( String id ) : Number
通過id找序號
getRenderer( Number col ) : Function
得到繪製器
getTotalWidth( Boolean includeHidden ) : Number
總的寬度
hasListener( String eventName ) : Boolean
有事件偵聽者?
isCellEditable( Number colIndex, Number rowIndex ) : Boolean
指定行列可編輯?
isFixed() : void
應該返回Boolean,充滿?
isHidden( Number colIndex ) : Boolean
指定列隱藏?
isResizable() : Boolean
可重寫義大小
isSortable( Number col ) : Boolean
可排序?
setColumnHeader( Number col, String header ) : void
設定指定列列頭
setColumnTooltip( Number col, String tooltip ) : void
設定指定列提示
setColumnWidth( Number col, Number width ) : void
設定指定列寬度
setConfig( Array config ) : void
重設config
setDataIndex( Number col, Number dataIndex ) : void
設定指定列的資料來源
setEditable( Number col, Boolean editable ) : void
設定指定列是否可編輯
setEditor( Number col, Object editor ) : void
為指定列設定編輯器
setHidden( Number colIndex, Boolean hidden ) : void
設定指定列隱藏
setRenderer( Number col, Function fn ) : void
為指定列設定輸出方法

事件
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而設計,構造有點不同,不過這個api文件不知道誰寫的,ext2中好象沒有grid了,
PropertyColumnModel( Ext.grid.Grid grid, Object source )

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

屬性
columnsText : String //列文字
scrollOffset : Number //滾動步行
sortAscText : String //正序文字
sortClasses : Array //正序和倒序時頭部列使用的樣式,預設為["sort-asc", "sort-desc"]
sortDescText : String //倒序文字

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

Ext.grid.GroupingView
繼承自Ext.grid.GridView,用於資料分組 ,應用於
config{
emptyGroupText : String //空的分組顯示文字
enableGroupingMenu : Boolean //允許分組選單
enableNoGroups : Boolean //允許分組/不分組顯示
groupTextTpl : String //這是個模板,分組項的內容依此顯示,語法參見模板,
hideGroupedColumn : Boolean //隱藏分組列
startCollapsed : Boolean //開始時收起,預設為假
}
另外雖然沒有在api中說明,但groupByText和showGroupsText屬性也是可以在config中指定的
方法
GroupingView( Object config )
構造
getGroupId( String value ) : void
取得指定值的分組id,為toggleGroup而準備的方法
toggleAllGroups( [Boolean expanded] ) : void
收起或展開所有的分組
toggleGroup( String groupId, [Boolean expanded] ) : void
展開或收起指定的分組,例grid.view.toggleGroup(grid.view.getGroupId('Horticulturalist'));會展開或收起分組欄位值為'Horticulturalist'的分組

Ext.onReady(function() {
//定義陣列
var arr=[ ['Bill', 'Gardener'], [ 'Ben', 'Horticulturalist'],['你', 'Gardener'],['他', 'Gardener'],[ '我', 'Horticulturalist'] ];
var reader = new Ext.data.ArrayReader(

{},
//定義陣列到record的對映關係
[
{name: 'name'},
{name: 'occupation', mapping: 1}
]
);
//生成元資料
var store=new Ext.data.Store( {
reader:reader
});
store.loadData(arr);

//現在配置列資訊
var col=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer( {header:'序號',width:30}),
{header:'姓名',sortable: true,dataIndex:'name'},
{header:'職業',sortable: true,dataIndex:'occupation'}
]);

//配置檢視資訊
var view=new Ext.grid.GridView( {forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
view.columnsText='列顯示/隱藏';

//現在我們有一個可用的grid了,別驕傲這只是第一步
var grid=new Ext.grid.GridPanel( {
el:Ext.getBody(),
height:200,
width:400,
store:store,
cm:col,
view:view
});

grid.render();


//現在我們需要一個GroupingStore
var gstore=new Ext.data.GroupingStore( {
reader:reader,
groupField:'name',
groupOnSort:true,
sortInfo: {field: 'occupation', direction: "ASC"} //使用GroupingStore時必須指定sortInfo資訊
});
gstore.loadData(arr);


//擴充套件一下我們的grid,讓他能分組當然會更酷一點
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()
});


});