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()
});
});
用于定义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()
});
});
