EXT核心API详解(十九)_Ext.grid.Column-Property-ColumnModel/Grid-Grouping-View...

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()
       });       
     
        });

Ext.grid.EditorGridPanel
可编辑数据表格
Config {
clicksToEdit : Number   //点几次开始编辑,默认为2
}
方法
EditorGridPanel()
构造,应为 EditorGridPanel(Object config)
startEditing( Number rowIndex, Number colIndex ) : void
stopEditing() : void
开始停止编辑
事件
afteredit : ( Object e )
beforeedit : ( Object e )
validateedit : ( Object e )

下面我们扩展一下刚才的示例应用一下EditorGridPanel//定义数组
var arr=[
    ['Bill', 'Gardener','2007-01-02',-10,true],
    [ 'Ben', 'Horticulturalist','2007-01-03',-20.1,false],
    ['你', 'Gardener','2007-02-02',0,true],
    ['他', 'Gardener','2007-01-04',13,false],
    [ '我', 'Horticulturalist','2007-01-05',15.2,false]
    ];
var reader = new Ext.data.ArrayReader(
   ...{},
//定义数组到record的映射关系
   [
    ...{name: 'name'},       
    ...{name: 'occupation', mapping: 1},
    ...{name:'date',type: 'date',dateFormat: 'Y-m-d'}, //用指定的格式转换日期
    ...{name:'float',type:'float'},
    ...{name:'bool',type:'bool'}
   ]
);
//生成元数据
var store=new Ext.data.Store(...{
    reader:reader
    });
store.loadData(arr);

//自定义可编辑列,从ext的示例抄的,但是却要init郁闷
Ext.grid.CheckColumn = function(config)...{
    Ext.apply(this, config);
    if(!this.id)...{
    this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};
//重写了三个方法,捕捉mousedown修改数据
Ext.grid.CheckColumn.prototype =...{
init : function(grid)...{
    this.grid = grid;
    this.grid.on('render', function()...{
    var view = this.grid.getView();
    view.mainBody.on('mousedown', this.onMouseDown, this);
    }, this);
},
onMouseDown : function(e, t)...{
    if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1)...{
    e.stopEvent();
    var index = this.grid.getView().findRowIndex(t);
    var record = this.grid.store.getAt(index);
    record.set(this.dataIndex, !record.data[this.dataIndex]);
    }
},

renderer : function(v, p, record)...{
    p.css += ' x-grid3-check-col-td';
    return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
}
}

//绑定到bool字段
var checkColumn=new Ext.grid.CheckColumn(...{
   header: "布尔值",
   dataIndex: 'bool'
});
/**//*
    现在配置列信息,为了本地化日期选择器,请包含ext-lang-zh_CN.js,并修改Date.dayNames = ["日","一","二","三","四","五","六"];
    在Ext.apply(Ext.DatePicker.prototype, {...})中加入okText:"确定",cancelText:"取消";
*/
var col=new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(...{header:'序号',width:30}),
    ...{header:'姓名',sortable: true,dataIndex:'name'},
    ...{header:'职业',sortable: true,dataIndex:'occupation'},
    ...{ 
    id:'datacol',
    header:'日期',
    sortable:true,
    dataIndex:'date',renderer: Ext.util.Format.dateRenderer('Y年m月d日'),//格式化显示
    editor:new Ext.form.DateField()
     },
    ...{header:'数值 ',sortable:true,dataIndex:'float',renderer:formatFloat,align: 'right',editor:new Ext.form.NumberField()}, //自定义显示方式,右对齐
    checkColumn //这个"选择框列"看起来的确漂亮些,其实是通过修改背景图片实现的
]);

//配置视图信息
var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
view.columnsText='列显示/隐藏';
//现在我们看看可编辑的数据表格能用了吗      
var grid=new Ext.grid.EditorGridPanel(...{
    el:Ext.getBody(),
    height:200,
    width:400,
    store:store,
    cm:col,
    view:view
    });  
//为什么原例不需要init?
checkColumn.init(grid);
grid.render();

function formatFloat(val)...{
    var bgcolor;
    if(val>0)...{
    bgcolor='#FF0000';
    }else if(val<0)...{
    bgcolor='#00FF00';
    }
    else...{
    bgcolor='#000000';
    }
    return( ['<span style="color:',bgcolor,'">',val,'</span>'].join(''));
}

Ext.grid.PropertyGrid
属性表格.继承自EditorGridPanel,用习惯ide的用户都会喜欢这个简单的属性表格,
config{
   customEditors : Object   //自定义属性编辑器
      source : Object   //数据源
}
方法
PropertyGrid( Object config )
构造
getSource() : Object
setSource( Object source ) : void
得到和设置数据源
事件
beforepropertychange : ( Object source, String recordId, Mixed value,
propertychange : ( Object source, String recordId, Mixed value, Mixed
同样用一个简单的示例来完成PropertyGrid的学习
var grid=new Ext.grid.PropertyGrid(...{
    el:Ext.getBody()
    ,height:200
    ,width:400
    ,viewConfig : ...{forceFit:true}
    ,customEditors:...{
        '年龄':new Ext.grid.GridEditor(new Ext.form.NumberField())
    }
    ,source:...{
        '姓名':'blackant'
        ,'年龄':100
    }
});

grid.source['性别']='男';
grid.customEditors['性别']=new Ext.grid.GridEditor(new Ext.form.ComboBox(...{
        editable:false
        ,triggerAction: 'all'
        ,store: new Ext.data.SimpleStore(...{
            fields: ['gender'],
            data : [['男'],['女']]
        })
        ,displayField:'gender'
        ,forceSelection:true
        ,mode:'local'
}));
grid.render();

选择模式都很容易使用,略过,至于其它的扩展,有时间再慢慢研究了,第一步先以学会使用为主

评论

1 楼 xy342978297 2012-05-07  

初学extjs