logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

grid一系列操作比如分组。。4.0

 实力决定地位 2012-05-23


一、grid的例：

Javascript代码 复制代码 收藏代码
  1. //配置表格列
  2. {header: "姓名", width: 50, dataIndex: 'name'},
  3. {header: "组长", width: 50, dataIndex: 'leader',
  4. xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列
  5. trueText: '是',
  6. falseText: '否'
  7. },
  8. {header: "生日", width: 100, dataIndex: 'birthday',
  9. xtype : 'datecolumn',//Ext.grid.column.Date日期列
  10. format : 'Y年m月d日'//日期格式化字符串
  11. },
  12. {header: "薪资", width: 50, dataIndex: 'salary',
  13. xtype: 'numbercolumn',//Ext.grid.column.Number数字列
  14. format:'0,000'//数字格式化字符串
  15. } 
//配置表格列
{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'//数字格式化字符串
}
Javascript代码 复制代码 收藏代码
  1. xtype: 'actioncolumn',//Ext.grid.column.Action动作列
  2. items: [{
  3. icon: 'images/edit.gif',//指定编辑图标资源的URL
  4. handler: function(grid, rowIndex, colIndex) {
  5. //获取被操作的数据记录
  6. var rec = grid.getStore().getAt(rowIndex);
  7. alert("编辑 " + rec.get('name'));
  8. }
  9. },{
  10. icon: 'images/del.gif',//指定编辑图标资源的URL
  11. handler: function(grid, rowIndex, colIndex) {
  12. var rec = grid.getStore().getAt(rowIndex);
  13. alert("删除 " + rec.get('name'));
  14. }
  15. },{
  16. icon: 'images/save.gif',//指定编辑图标资源的URL
  17. handler: function(grid, rowIndex, colIndex) {
  18. var rec = grid.getStore().getAt(rowIndex);
  19. alert("保存 " + rec.get('name'));
  20. }
  21. }] 
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'));
    }                
}]
Javascript代码 复制代码 收藏代码
  1. {
  2. header: "描述", width: 100,
  3. xtype: 'templatecolumn',//Ext.grid.column.Template数字列
  4. tpl : '{name}<tpl if="leader == false">不</tpl>是组长'
  5. } 
{
	header: "描述", width: 100,
	xtype: 'templatecolumn',//Ext.grid.column.Template数字列
	tpl : '{name}<tpl if="leader == false">不</tpl>是组长'
}
Javascript代码 复制代码 收藏代码
  1. Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}) 
Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35})



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

Javascript代码 复制代码 收藏代码
  1. //定义渲染函数，格式化性别显示
  2. function formatSex(value){
  3. return value=='man'?'男':'<font color=red>女</font>';
  4. }
  5. //定义渲染函数，格式化年龄显示
  6. function formatAge(value,metadata){
  7. if(value < 30){ //年龄小于30的设置背景颜色为#CCFFFF
  8. metadata.style = 'background-color:#CCFFFF;';
  9. }
  10. return value;
  11. } 
//定义渲染函数，格式化性别显示
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;
}
Javascript代码 复制代码 收藏代码
  1. columns: [//配置表格列
  2. {header: "id", width: 30, dataIndex: 'id'},
  3. {header: "姓名", width: 50, dataIndex: 'name'},
  4. {header: "性别", width: 50, dataIndex: 'sex',renderer:formatSex},
  5. {header: "生日", width: 100, dataIndex: 'birthday',
  6. //格式化生日显示
  7. renderer:Ext.util.Format.dateRenderer('Y年m月d日') },
  8. {header: "年龄", width: 50, dataIndex: 'age',renderer:formatAge}
  9. ] 
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（单元格选择模式）示例

Javascript代码 复制代码 收藏代码
  1. //创建表格数据
  2. var datas = [
  3. [100,'张三',24], [200,'李四',30], [300,'王五',29]
  4. ];
  5. //创建Grid表格组件
  6. var grid = Ext.create('Ext.grid.Panel',{
  7. title : '单元格选择模式示例',
  8. renderTo: Ext.getBody(),
  9. width:200,
  10. height:170,
  11. frame:true,
  12. selType: 'cellmodel',//设置为单元格选择模式Ext.selection.CellModel
  13. tbar : [{
  14. text : '取得所选单元格',
  15. handler : function(){
  16. var cell = grid.getSelectionModel().getCurrentPosition();
  17. alert(Ext.JSON.encode(cell));
  18. }
  19. }],
  20. store: {//配置数据源
  21. fields: ['id','name','age'],//定义字段
  22. proxy: {
  23. type: 'memory',//Ext.data.proxy.Memory内存代理
  24. data : datas,//读取内嵌数据
  25. reader : 'array'//Ext.data.reader.Array解析器
  26. },
  27. autoLoad: true//自动加载
  28. },
  29. columns: [//配置表格列
  30. {header: "id", width: 30, dataIndex: 'id', sortable: true},
  31. {header: "姓名", width: 80, dataIndex: 'name', sortable: true},
  32. {header: "年龄", width: 80, dataIndex: 'age', sortable: true}
  33. ]
  34. }); 
//创建表格数据
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（行选择模式）示例－－主要相关代码

Javascript代码 复制代码 收藏代码
  1. simpleSelect : true,//启用简单选择功能
  2. multiSelect : true,//支持多选
  3. selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel
  4. tbar : [{
  5. text : '取得所选行',
  6. handler : function(){
  7. var msg = '';
  8. var rows = grid.getSelectionModel().getSelection();
  9. for(var i = 0; i < rows.length; i++){
  10. msg = msg + rows[i].get('name') + '\n';
  11. }
  12. alert(msg);
  13. }
  14. }] 
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（复选框选择模式）示例－－关键代码

Javascript代码 复制代码 收藏代码
  1. //注册复选框选择模式别名为selection.checkboxmodel
  2. Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel'); 
//注册复选框选择模式别名为selection.checkboxmodel
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');
Javascript代码 复制代码 收藏代码
  1. multiSelect : true,//支持多选
  2. selModel: {
  3. selType : 'checkboxmodel'//复选框选择模式Ext.selection.CheckboxModel
  4. },
  5. tbar : [{
  6. text : '取得所选行',
  7. handler : function(){
  8. var msg = '';
  9. var rows = grid.getSelectionModel().getSelection();
  10. for(var i = 0; i < rows.length; i++){
  11. msg = msg + rows[i].get('name') + '\n';
  12. }
  13. alert(msg);
  14. }
  15. }] 
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示例－－关键代码

Javascript代码 复制代码 收藏代码
  1. features: [Ext.create('Ext.grid.feature.RowBody',{
  2. getAdditionalData: function(data, idx, record, orig) {
  3. var headerCt = this.view.headerCt,
  4. colspan = headerCt.getColumnCount();//获取表格的列数
  6. return {
  7. rowBody: record.get('introduce'),//指定行体内容
  8. rowBodyCls: 'rowbodyColor',//指定行体样式
  9. rowBodyColspan: colspan//指定行体跨列的列数
  10. };
  11. }
  12. })] 
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示例－－关键代码

Javascript代码 复制代码 收藏代码
  1. features: [{
  2. ftype: 'summary'//Ext.grid.feature.Summary表格汇总特性
  3. }],
  4. columns: [//配置表格列
  5. {header: "姓名", flex: 1, dataIndex: 'name',
  6. summaryType: 'count',//求数量
  7. summaryRenderer: function(value){
  8. return '员工总数：'+value
  9. }
  10. },
  11. {header: "薪资", flex: 1, dataIndex: 'salary',
  12. summaryType: 'average',//求平均值
  13. summaryRenderer: function(value){
  14. return '平均薪资：'+value
  15. }
  16. }
  17. ] 
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示例－－关键代码

Javascript代码 复制代码 收藏代码
  1. features: [Ext.create('Ext.grid.feature.Grouping', {
  2. groupByText : '用本字段分组',
  3. showGroupsText : '显示分组',
  4. groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
  5. startCollapsed: true //设置初始分组是否收起
  6. })],
  7. columns: [//配置表格列
  8. {header: "姓名", flex: 1, dataIndex: 'name'},
  9. {header: "性别", flex: 1, dataIndex: 'sex'},
  10. {header: "年龄", flex: 1, dataIndex: 'age'}
  11. ] 
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示例－－关键代码

Javascript代码 复制代码 收藏代码
  1. features: [Ext.create('Ext.grid.feature.GroupingSummary', {
  2. groupByText : '用本字段分组',
  3. showGroupsText : '显示分组',
  4. groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
  5. startCollapsed: true //设置初始分组是否收起
  6. })],
  7. columns: [//配置表格列
  8. {header: "姓名", width: 100, dataIndex: 'name',
  9. summaryType: 'count',//求数量
  10. summaryRenderer: function(value){
  11. return '员工总数：'+value
  12. }
  13. },
  14. {header: "性别", width: 50, dataIndex: 'sex'},
  15. {header: "年龄", width: 110, dataIndex: 'age',
  16. summaryType: 'average',//求数量
  17. summaryRenderer: function(value){
  18. return '平均年龄：'+value
  19. }
  20. }
  21. ] 
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示例－－关键代码

Javascript代码 复制代码 收藏代码
  1. plugins: [
  2. Ext.create('Ext.grid.plugin.CellEditing', {
  3. clicksToEdit: 1//设置鼠标单击1次进入编辑状态
  4. })
  5. ],
  6. selType: 'cellmodel',//设置为单元格选择模式
  7. columns: [//配置表格列
  8. Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
  9. {header: "姓名", width: 50, dataIndex: 'name',
  10. editor: {//文本字段
  11. xtype:'textfield',
  12. allowBlank:false
  13. }
  14. },
  15. {header: "生日", width: 100, dataIndex: 'birthday',
  16. xtype : 'datecolumn',//Ext.grid.column.Date日期列
  17. format : 'Y年m月d日',//日期格式化字符串
  18. editor: {//日期字段
  19. xtype:'datefield',
  20. allowBlank:false
  21. }
  22. },
  23. {header: "薪资", width: 50, dataIndex: 'salary',
  24. xtype: 'numbercolumn',//Ext.grid.column.Number数字列
  25. format:'0,000',//数字格式化字符串
  26. editor: {//数字字段
  27. xtype:'numberfield',
  28. allowBlank:false
  29. }
  30. }
  31. ] 
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示例－－关键代码

Javascript代码 复制代码 收藏代码
  1. plugins: [
  2. //行编辑模式
  3. Ext.create('Ext.grid.plugin.RowEditing', {
  4. clicksToEdit: 1
  5. })
  6. ],
  7. selType: 'rowmodel',//设置为单元格选择模式
  8. columns: [//配置表格列
  9. Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
  10. {header: "姓名", width: 50, dataIndex: 'name',
  11. editor: {//文本字段
  12. xtype:'textfield',
  13. allowBlank:false
  14. }
  15. },
  16. {header: "生日", width: 100, dataIndex: 'birthday',
  17. xtype : 'datecolumn',//Ext.grid.column.Date日期列
  18. format : 'Y年m月d日',//日期格式化字符串
  19. editor: {//日期字段
  20. xtype:'datefield',
  21. allowBlank:false
  22. }
  23. },
  24. {header: "薪资", width: 50, dataIndex: 'salary',
  25. xtype: 'numbercolumn',//Ext.grid.column.Number数字列
  26. format:'0,000',//数字格式化字符串
  27. editor: {//数字字段
  28. xtype:'numberfield',
  29. allowBlank:false
  30. }
  31. }
  32. ] 
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示例－－关键代码

Javascript代码 复制代码 收藏代码
  1. viewConfig: {
  2. plugins: [
  3. //行编辑模式
  4. Ext.create('Ext.grid.plugin.DragDrop',{
  5. dragGroup: 'grid1',//拖拽组名称
  6. dropGroup: 'grid2'//拖放组名称
  7. })
  8. ]
  9. } 
viewConfig: {
    plugins: [
        //行编辑模式
		Ext.create('Ext.grid.plugin.DragDrop',{
			dragGroup: 'grid1',//拖拽组名称
			dropGroup: 'grid2'//拖放组名称
		})
	]
}



十、Ext.grid.property.Grid示例

Javascript代码 复制代码 收藏代码
  1. //创建属性表格
  2. var grid = new Ext.grid.property.Grid({
  3. title: 'Ext.grid.property.Grid示例',
  4. width: 300,
  5. height: 200,
  6. renderTo: Ext.getBody(),
  7. //自定义属性编辑器
  8. customEditors : {
  9. "性别" : new Ext.form.ComboBox({
  10. editable : false,
  11. displayField:'sex',
  12. mode: 'local',
  13. triggerAction: 'all',
  14. store:new Ext.data.SimpleStore({
  15. fields: ['sex'],
  16. data : [['男'],['女']]
  17. })
  18. }),
  19. "出生日期": new Ext.form.DateField({
  20. format : 'Y年m月d日',
  21. selectOnFocus:true,
  22. allowBlank : false
  23. })
  24. },
  25. //自定义渲染函数
  26. customRenderers: {
  27. //格式化布尔值显示
  28. "是否已婚": function(v){
  29. return v?'是':'否';
  30. },
  31. //格式化日期显示
  32. "出生日期": Ext.util.Format.dateRenderer('Y年m月d日')
  33. },
  34. source: {
  35. "员工名称" : "张三",
  36. "出生日期" : Ext.Date.parse('10/15/2006', 'm/d/Y'),
  37. "性别" : '男',
  38. "是否已婚" : false,
  39. "年龄" : 29
  40. }
  41. });

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 实力决定地位 > 《ExtJS》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多