extjs4 grid

ExtJS4－Grid使用

一、grid的例： 

//配置表格列
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "组长", width: 50, dataIndex: 'leader',
    xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列
    trueText: '是',
    falseText: '否'
},
{header: "生日", width: 100, dataIndex: 'birthday',
    xtype : 'datecolumn',//Ext.grid.column.Date日期列
    format : 'Y年m月d日'//日期格式化字符串
},
{header: "薪资", width: 50, dataIndex: 'salary',
    xtype: 'numbercolumn',//Ext.grid.column.Number数字列
    format:'0,000'//数字格式化字符串
}

xtype: 'actioncolumn',//Ext.grid.column.Action动作列
items: [{
    icon: 'images/edit.gif',//指定编辑图标资源的URL
    handler: function(grid, rowIndex, colIndex) {
        //获取被操作的数据记录
        var rec = grid.getStore().getAt(rowIndex);
        alert("编辑 " + rec.get('name'));
    }
},{
    icon: 'images/del.gif',//指定编辑图标资源的URL
    handler: function(grid, rowIndex, colIndex) {
        var rec = grid.getStore().getAt(rowIndex);
        alert("删除 " + rec.get('name'));
    }
},{
    icon: 'images/save.gif',//指定编辑图标资源的URL
    handler: function(grid, rowIndex, colIndex) {
        var rec = grid.getStore().getAt(rowIndex);
        alert("保存 " + rec.get('name'));
    }
}]

{
    header: "描述", width: 100,
    xtype: 'templatecolumn',//Ext.grid.column.Template数字列
    tpl : '{name}<tpl if="leader == false">不</tpl>是组长'
}

Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35})

二、自定义渲染函数示例： 

//定义渲染函数，格式化性别显示
function formatSex(value){
    return value=='man'?'男':'<font color=red>女</font>';
}
//定义渲染函数，格式化年龄显示
function formatAge(value,metadata){
    if(value < 30){  //年龄小于30的设置背景颜色为#CCFFFF
        metadata.style = 'background-color:#CCFFFF;';
    }
    return value;
}

columns: [//配置表格列
                {header: "id", width: 30, dataIndex: 'id'},
                {header: "姓名", width: 50, dataIndex: 'name'},
                {header: "性别", width: 50, dataIndex: 'sex',renderer:formatSex},
                {header: "生日", width: 100, dataIndex: 'birthday',
                    //格式化生日显示
renderer:Ext.util.Format.dateRenderer('Y年m月d日')             },
                {header: "年龄", width: 50, dataIndex: 'age',renderer:formatAge}
            ]

三、Ext.selection.CellModel（单元格选择模式）示例 

//创建表格数据
var datas = [
    [100,'张三',24], [200,'李四',30], [300,'王五',29]
];
//创建Grid表格组件
var grid = Ext.create('Ext.grid.Panel',{
    title : '单元格选择模式示例',
    renderTo: Ext.getBody(),
    width:200,
    height:170,
    frame:true,
    selType: 'cellmodel',//设置为单元格选择模式Ext.selection.CellModel
    tbar : [{
        text : '取得所选单元格',
        handler : function(){
            var cell = grid.getSelectionModel().getCurrentPosition();
            alert(Ext.JSON.encode(cell));
        }
    }],
    store: {//配置数据源
        fields: ['id','name','age'],//定义字段
        proxy: {
            type: 'memory',//Ext.data.proxy.Memory内存代理
            data : datas,//读取内嵌数据
            reader : 'array'//Ext.data.reader.Array解析器
        },
        autoLoad: true//自动加载
    },
    columns: [//配置表格列
        {header: "id", width: 30, dataIndex: 'id', sortable: true},
        {header: "姓名", width: 80, dataIndex: 'name', sortable: true},
        {header: "年龄", width: 80, dataIndex: 'age', sortable: true}
    ]
});

四、Ext.selection.RowModel（行选择模式）示例－－主要相关代码 

simpleSelect : true,//启用简单选择功能
multiSelect : true,//支持多选
selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel
tbar : [{
    text : '取得所选行',
    handler : function(){
        var msg = '';
        var rows = grid.getSelectionModel().getSelection();
        for(var i = 0; i < rows.length; i++){
            msg = msg + rows[i].get('name') + '\n';
        }
        alert(msg);
    }
}]

五、Ext.selection.CheckboxModel（复选框选择模式）示例－－关键代码 

//注册复选框选择模式别名为selection.checkboxmodel
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');

multiSelect : true,//支持多选
            selModel: {
                selType : 'checkboxmodel'//复选框选择模式Ext.selection.CheckboxModel
            },
            tbar : [{
                text : '取得所选行',
                handler : function(){
                    var msg = '';
                    var rows = grid.getSelectionModel().getSelection();
                    for(var i = 0; i < rows.length; i++){
                        msg = msg + rows[i].get('name') + '\n';
                    }
                    alert(msg);
                }
            }]

六、grid中的features使用 
Ext.grid.feature.RowBody示例－－关键代码

features: [Ext.create('Ext.grid.feature.RowBody',{
    getAdditionalData: function(data, idx, record, orig) {
        var headerCt = this.view.headerCt,
            colspan  = headerCt.getColumnCount();//获取表格的列数

        return {
            rowBody: record.get('introduce'),//指定行体内容
            rowBodyCls: 'rowbodyColor',//指定行体样式
            rowBodyColspan: colspan//指定行体跨列的列数
            };
        }
    })]

Ext.grid.feature.Summary示例－－关键代码

features: [{
    ftype: 'summary'//Ext.grid.feature.Summary表格汇总特性
}],
columns: [//配置表格列
    {header: "姓名", flex: 1, dataIndex: 'name',
        summaryType: 'count',//求数量
        summaryRenderer: function(value){
            return '员工总数：'+value
        }
    },
    {header: "薪资", flex: 1, dataIndex: 'salary',
        summaryType: 'average',//求平均值
        summaryRenderer: function(value){
            return '平均薪资：'+value
        }
    }
]

Ext.grid.feature.Grouping示例－－关键代码

features: [Ext.create('Ext.grid.feature.Grouping', {
    groupByText : '用本字段分组',
    showGroupsText : '显示分组',
    groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
    startCollapsed: true //设置初始分组是否收起
})],
columns: [//配置表格列
    {header: "姓名", flex: 1, dataIndex: 'name'},
    {header: "性别", flex: 1, dataIndex: 'sex'},
    {header: "年龄", flex: 1, dataIndex: 'age'}
]

Ext.grid.feature.GroupingSummary示例－－关键代码

features: [Ext.create('Ext.grid.feature.GroupingSummary', {
    groupByText : '用本字段分组',
    showGroupsText : '显示分组',
    groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
    startCollapsed: true //设置初始分组是否收起
})],
columns: [//配置表格列
    {header: "姓名", width: 100, dataIndex: 'name',
        summaryType: 'count',//求数量
        summaryRenderer: function(value){
            return '员工总数：'+value
        }
    },
    {header: "性别", width: 50, dataIndex: 'sex'},
    {header: "年龄", width: 110, dataIndex: 'age',
        summaryType: 'average',//求数量
        summaryRenderer: function(value){
            return '平均年龄：'+value
        }
    }
]

七、Ext.grid.plugin.CellEditing示例－－关键代码 

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1//设置鼠标单击1次进入编辑状态
    })
],
selType: 'cellmodel',//设置为单元格选择模式
columns: [//配置表格列
  Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
  {header: "姓名", width: 50, dataIndex: 'name',
        editor: {//文本字段
            xtype:'textfield',
            allowBlank:false
        }
    },
    {header: "生日", width: 100, dataIndex: 'birthday',
        xtype : 'datecolumn',//Ext.grid.column.Date日期列
        format : 'Y年m月d日',//日期格式化字符串
        editor: {//日期字段
            xtype:'datefield',
            allowBlank:false
        }
    },
    {header: "薪资", width: 50, dataIndex: 'salary',
        xtype: 'numbercolumn',//Ext.grid.column.Number数字列
        format:'0,000',//数字格式化字符串
        editor: {//数字字段
            xtype:'numberfield',
            allowBlank:false
        }
    }
]

八、Ext.grid.plugin.RowEditing示例－－关键代码 

plugins: [
    //行编辑模式
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1
    })
],
selType: 'rowmodel',//设置为单元格选择模式
columns: [//配置表格列
    Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
    {header: "姓名", width: 50, dataIndex: 'name',
        editor: {//文本字段
            xtype:'textfield',
            allowBlank:false
        }
    },
    {header: "生日", width: 100, dataIndex: 'birthday',
        xtype : 'datecolumn',//Ext.grid.column.Date日期列
        format : 'Y年m月d日',//日期格式化字符串
        editor: {//日期字段
            xtype:'datefield',
            allowBlank:false
        }
    },
    {header: "薪资", width: 50, dataIndex: 'salary',
        xtype: 'numbercolumn',//Ext.grid.column.Number数字列
        format:'0,000',//数字格式化字符串
        editor: {//数字字段
            xtype:'numberfield',
            allowBlank:false
        }
    }
]

九、Ext.grid.plugin.DragDrop示例－－关键代码 

viewConfig: {
    plugins: [
        //行编辑模式
        Ext.create('Ext.grid.plugin.DragDrop',{
            dragGroup: 'grid1',//拖拽组名称
            dropGroup: 'grid2'//拖放组名称
        })
    ]
}

十、Ext.grid.property.Grid示例 

//创建属性表格
var grid = new Ext.grid.property.Grid({
    title: 'Ext.grid.property.Grid示例',
    width: 300,
    height: 200,
    renderTo: Ext.getBody(),
    //自定义属性编辑器
    customEditors : {
        "性别" : new Ext.form.ComboBox({
            editable : false,
            displayField:'sex',
            mode: 'local',
            triggerAction: 'all',
            store:new Ext.data.SimpleStore({
                fields: ['sex'],
                data : [['男'],['女']]
            })
        }),
        "出生日期": new Ext.form.DateField({
            format : 'Y年m月d日',
            selectOnFocus:true,
            allowBlank : false
        })
    },
    //自定义渲染函数
    customRenderers: {
        //格式化布尔值显示
        "是否已婚": function(v){
            return v?'是':'否';
        },
        //格式化日期显示
        "出生日期": Ext.util.Format.dateRenderer('Y年m月d日')
    },
    source: {
        "员工名称" : "张三",
        "出生日期" : Ext.Date.parse('10/15/2006', 'm/d/Y'),
        "性别" : '男',
        "是否已婚" : false,
        "年龄" : 29
    }
});