ExtJS4学习笔记十－－Grid使用

最新推荐文章于 2023-06-17 22:52:50 发布
最新推荐文章于 2023-06-17 22:52:50 发布
阅读量165 收藏
点赞数
分类专栏： ExtJS4 文章标签： 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
	}
});
hnhnhnhnhn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs 学习笔记 四 带分页的grid
12-09
因此，现在几乎所有的grid控件都会支持分页功能。extjs也不例外，它对分页也提供了强大而方便的支持，使得我们在分页处理上可以得心应手。 在extjs中，类Ext.PagingToolbar封装了关于分页的操作，该类从Toolbar继承...
extjs 学习笔记（三） 最基本的grid
01-19
今天学习extjs中的grid，它可以说是功能强大，无出其右，只有你想不到的，没有它做不到的，呵呵，好像是有点夸张了。好，不说废话了，我们就从最简单的grid开始，一步步来看看extjs给我们提供的grid究竟给我们提供...
extjs6.5 grid使用归总功能，获取汇总数据
qq_20426717的博客
07-09 254
grid.selModel.view.features[0].summaryRecord.data.汇总列;
Extjs grid 分页汇总总记录数，使用Ext.grid.feature.Summary 实现汇总总记录数
只是回忆
03-27 4687
//实现大体思路是后台传到的前台的store默认比每页实际行数多一条汇总总行数。汇总行取此行内的汇总数值，然后将此行隐藏掉不显示Ext.define('Ssq.view.report.StorageStock', { extend : 'Framework.base.ListView', alias : 'widget.storagestock', store : 'StorageStock
extjs中grid的用法（查，增，删，改）
csdnwyf的博客
07-06 1144
this.store = Ext.create('Ext.data.Store', {}); this.grid = Ext.create('Ext.grid.Panel', {}) 获取Ext.grid.Panel中的所有值:（一般用在对grid表进行操作） this.grid.getStore().data.items 获取ext.grid.Panel 中某一行的的数据 this.store.getAt(j) 修改Ext.grid.Panel中某一列中所有的值 this.grid.ge..
extjs Ext.grid.Panel表格组件学习
西京刀客
06-17 2123
⭐️来自很多年前的extjs笔记，只是一个归档，不做更新！⭐️
extjs学习笔记（三）最基本的grid
weixin_30809333的博客
10-15 110
extjs的一个亮点就是提供了丰富的UI，使得没有艺术细胞的程序员也能做出绚丽的界面。把所有的UI集中到一起，有好处也有坏处，好处是有了统一的风格和接口，坏处是js文件过于庞大，使用extjs的最小集合也超过了500k，所以在有些项目中并不适用。jquery在这方面则正好相反，它的UI都以插件形式提供，可以需要什么就引用什么，所以非常小巧灵活，但由于插件往往是由不同的人或者团队来提供，界...
Extjs4.0学习笔记
12-19
ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid（SearchGrid） ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)...
ExtJs中Grid的用法
zoujp_xyz的专栏
11-01 1579
<br />本文整理自：http://leadergxg.25291.84g.com/ExtJs/example/index.html<br />-----------------------------------------------------------------------------------------------------<br /> <br />/****** 简单Grid，以本地数组数据作为数据源 *******/<br />var SimpleGrid = function()
ExtJS Grid功能实现
06-18
ExtJS 表格的功能实现，包括单元格编辑，数据的获取。
ExtJS下grid的一些属性说明
12-12
1.界面修改(css style)： Extjs中界面风格与我们产品本身的风格有很大不同，从边框、选中行的颜色到鼠标移动到的行的颜色、菜单等，几乎都不同。Extjs对这些样式的设置都是由css完成的。如： 选中行的颜色就可用如下设置完成： .x-grid3-row-selected{background:#c6e2ff!important;} 其他的都类似，只要找到对应的class, 然后设置要修改的部分即可。 2. 属性的作用(About Ext.grid. GroupingView, EditorGridPanel): Extjs的grid功能强大，如排序、隐藏列或移动列等，这些都有一些属
Extjs Grid2Grid拖拽
07-09
自己写的一个Extjs Grid2Grid拖拽
ExtJS6.0之Grid用法
飞鸟的轨迹
02-26 1791
创建数据源 store = Ext.create('Ext.data.Store', { pageSize: limit, proxy: { type: 'ajax', url: basePath + 'mathineSupplier/mathine-supplier!getMathineSupplierList', e...
extjs中通过tpl实现带图标的ComboBox
FreshMan
03-21 2408
在使用extjs中的combobox控件时，通过变更tpl内容，可以很轻松实现提示内容，例如官方示例的examples\form\combos.html下，可以实现下图combobox的选择内容提示信息： 既然可以显示信息文字，当然应该可以显示图片，笔者通过测试，可以这样实现 部分代码如下： var AddmenuIcon=new Ext.form.ComboBox( {
Extjs中获取grid数据
扶摇而上九万里
07-03 4598
(1)grid.getStore().getRange(0,store.getCount());    //得到grid所有的行  (2)grid.getSelectionModel().getSelections();        //得到选择所有行    注：如果不声明var sm = new Ext.grid.CheckboxSelectionModel();则会报此句没有该对象或属性Va...
EXTJS4:在grid中加入合计行
gaoqiao1988的专栏
04-01 2046
EXTJS4:在grid中加入合计行 还记得在4.0.7之前的版本中，要在gridpanel中加一个合计栏是多么麻烦啊，4.0出现后，一句话就搞定   直接copy官方的   Ext.onReady(function () { Ext.define('TestResult', { extend: 'Ext.data.Model', fi
模板059.pptx
最新发布
06-29
论文答辩ppt模板
Extjs4 grid按字段排序
06-01
要在 ExtJS 4 的 Grid 组件中按字段排序，你可以使用 `sorters` 配置项。该配置项是一个数组，每个元素表示一个排序规则。下面是一个示例代码： ```javascript Ext.create('Ext.grid.Panel', { store: Ext.create('Ext.data.Store', { fields: ['name', 'age'], data: [ {name: 'Alice', age: 25}, {name: 'Bob', age: 20}, {name: 'Charlie', age: 30} ] }), columns: [ {header: 'Name', dataIndex: 'name'}, {header: 'Age', dataIndex: 'age'} ], sorters: [{ property: 'age', // 按 age 字段排序 direction: 'ASC' // 升序排列 }] }); ``` 在上面的示例中，我们创建了一个 Grid 组件，其中包含两列：Name 和 Age。我们还创建了一个 Store，其中包含三个对象，每个对象包含一个名字和一个年龄。我们使用 `sorters` 配置项指定按 age 字段升序排列。 你还可以使用 `multiSort` 配置项来启用多列排序。将其设置为 true，然后在 `sorters` 数组中添加多个元素即可。例如： ```javascript sorters: [{ property: 'age', direction: 'ASC' }, { property: 'name', direction: 'DESC' }], multiSort: true ``` 这会首先按 age 字段升序排列，如果两个对象的 age 值相等，则按 name 字段降序排列。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值