Ext.grid.ColumnModel
http://hi.baidu.com/%5Follie/blog/item/ced16f299552b6fa98250a1e.html用于定义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'的分组
|