`
hnhnhnhnhn
  • 浏览: 77076 次
社区版块
存档分类
最新评论

ExtJS4学习笔记十－－Grid使用

ExtJS4grid 
阅读更多
一、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
	}
});
分享到：
| ExtJS4学习笔记九－－数据模型的使用
评论
3 楼 angryfrank 2014-05-06  
收获良多，赞  
2 楼 万俟辉夜 2012-11-21  
楼主知不知道怎么通过已知的行数和列数取得grid中该单元格的信息？
1 楼 31212 2011-09-02  
   
顶。。。。这么快就出4.0的学习笔记了啊！厉害！
学习Ing....
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Extjs4.0学习笔记

    ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid（SearchGrid） ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)...

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——动态grid Extjs4开发笔记(四)——实现登录功能 Extjs4开发笔记（一）——准备工作 ...

    Extjs复习笔记（二十）-- tree和grid结合

    在"Extjs复习笔记（二十）-- tree和grid结合"这篇博文中，博主探讨了如何在EXTJS中实现树形视图（Tree）与网格视图（Grid）的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据，例如文件系统、组织架构等。...

    extjs4 学习笔记源码

    exjts4 学习笔记源码，源码包含windws，hbox,vbox和Grid的应用，其中grid介绍比较多。下载解压后，部署后就可以使用，所有代码均在demo文件夹下。更多extjs4教程，请关注http://www.mhzg.net

    extjs 学习笔记（三） 最基本的grid

    在本篇学习笔记中，我们将深入探讨EXTJS中最基本的Grid的构建和配置。 首先，EXTJS的Grid由多个组件构成，其中最重要的是`ColumnModel`，它负责定义Grid中的列属性。在示例代码中，我们创建了一个`ColumnModel`对象...

    extjs4.0学习笔记

    EXTJS 是一个强大的JavaScript 库，专用于...EXTJS 4.0的学习涉及到了组件的创建、布局的管理、数据绑定和事件处理等多个方面，理解并熟练掌握这些知识点，能帮助开发者构建出功能强大、用户体验优秀的Web应用程序。

    JavaScript.-Extjs基础学习笔记

    根据给定的文件信息，我们可以深入探讨两个关键的Extjs组件——Tab Panel（标签页控件）和Grid（表格控件）。这两个控件是Extjs框架中非常实用且功能丰富的部分，广泛应用于Web应用程序的界面设计与交互逻辑构建。 ...

    Extjs4 MVC开发笔记源码

    本笔记源码主要展示了如何在ExtJS 4中运用MVC模式进行开发。 一、MVC模式 MVC模式将应用分为三个主要组件：模型（Model）、视图（View）和控制器（Controller）。模型处理数据和业务逻辑，视图负责显示用户界面，...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架，专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    extjs 学习笔记 四 带分页的grid

    因此，现在几乎所有的grid控件都会支持分页功能。extjs也不例外，它对分页也提供了强大而方便的支持，使得我们在分页处理上可以得心应手。 在extjs中，类Ext.PagingToolbar封装了关于分页的操作，该类从Toolbar继承...

    Extjs4.0学习与开发笔记

    Extjs4.0学习与开发笔记 描述了菜单的实现、带搜索的Grid，带checkbox的可编辑的Grid等知识点，并附实现代码

    ExtJS使用笔记

    ExtJS是一个开源的JavaScript库，主要用于...通过本笔记的学习，可以掌握ExtJS在前端开发中的应用，理解各个组件和管理器的使用方法，以及一些针对特定浏览器的布局技巧，为创建美观、高效的用户界面打下坚实的基础。

    extjs批量上传的所有相关代码和jar，支持包和笔记

    7. **批量上传组件**: 如果EXTJS本身没有内置批量上传解决方案，开发者可能会选择第三方组件，如`EXTJS Uploader`或`EXTJS Grid with FileUploadField`，它们提供了更丰富的上传功能，比如预览、取消上传、多线程...

    extjs 3.3正式版

    1. **组件库增强**：EXTJS 3.3 提供了大量预先封装的UI组件，如表格（Grid）、树形视图（TreePanel）、图表（Charts）、表单（Forms）等。这些组件具有高度可配置性和交互性，使得开发者能够快速创建功能丰富的网页...

    extjs实例与学习资料

    因为前段时间有两个专案要用到extjs技术，所以自己学了一段时间，在专案才发现extjs的强大，无论对于开发者还是使用者他都是一场视觉盛宴，这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料，里面包括...

Magicbox
Global site tag (gtag.js) - Google Analytics