extjs 4 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'//数字格式化字符串
}

//配置表格列
{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'));
    }
}]

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>是组长'
}

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

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

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

//定义渲染函数，格式化性别显示
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}
            ]

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

//创建表格数据
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);
    }
}]

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');

//注册复选框选择模式别名为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);
                }
            }]

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//指定行体跨列的列数
            };
        }
    })]

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
        }
    }
]

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'}
]

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
        }
    }
]

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
        }
    }
]

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
        }
    }
]

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'//拖放组名称
        })
    ]
}

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