ExtJS4学习笔记十－－Grid使用

最新推荐文章于 2019-01-10 11:01:15 发布
最新推荐文章于 2019-01-10 11:01:15 发布
阅读量777 收藏
点赞数
分类专栏： EXT javascript 文章标签： extjs header javascript function features plugins
本文详细介绍 ExtJS 中 Grid 组件的各种配置与使用方法，包括列类型、自定义渲染、不同选择模式、特性功能及插件应用等核心知识点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、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();//获取表格的列数 
  5.      
  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. }); 
ExtJS 使用grid显示数据
04-13
NULL 博文链接：https://swordboy007.iteye.com/blog/1722145
ExtJS笔记---Grid实现后台分页
04-05
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...
ExtJs grid使用详细
nxyc_twz
12-08 324
Ext2.0是一个javascript框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。 首先，一个表格应该有列定义，即定义表头ColumnMod...
ExtJS之 grid表格详解
weixin_33788244的博客
02-28 269
简单表格 排序,显示某列,读取本地数据 //本地数据 var datas = [ ['1', 'gao', 'man'], ['2', 'gao', 'man'], ['3', 'gao', 'man'] ]; //创建...
extjs 之 grid篇
Fupengyao的博客
02-22 563
要明白 store proxl  reader  model 之间的关系 第一篇文章 Ext.define('Business.store.businessRequest.BrUnitRuleStore',{ extend:'Ext.data.Store', alias : 'widget.brUnitRuleStore', pageSize:BusinessCommon
Extjs复习笔记（二十）-- tree和grid结合
07-29
在"Extjs复习笔记（二十）-- tree和grid结合"这篇博文中，博主探讨了如何在EXTJS中实现树形视图（Tree）与网格视图（Grid）的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据，例如文件系统、组织架构等。...
extjs 学习笔记 四 带分页的grid
12-09
因此，现在几乎所有的grid控件都会支持分页功能。extjs也不例外，它对分页也提供了强大而方便的支持，使得我们在分页处理上可以得心应手。 在extjs中，类Ext.PagingToolbar封装了关于分页的操作，该类从Toolbar继承...
extjs 学习笔记（三） 最基本的grid
01-19
今天学习extjs中的grid，它可以说是功能强大，无出其右，只有你想不到的，没有它做不到的，呵呵，好像是有点夸张了。好，不说废话了，我们就从最简单的grid开始，一步步来看看extjs给我们提供的grid究竟给我们提供...
ExtJS4学习笔记：源码解析与Grid组件应用
- 这份资源是一份关于ExtJS 4的学习笔记源码。ExtJS是由Sencha公司开发的一个成熟的前端框架，它基于JavaScript语言，专门用于构建富互联网应用程序（RIA）。ExtJS使用了模型-视图-控制器（MVC）设计模式，以此来...
ExtJS Grid功能实现
06-18
ExtJS 表格的功能实现，包括单元格编辑，数据的获取。
extjs组件：Grid
qq_36987708的博客
01-10 204
ExtJS UI由一个或多个名为Components.Ext的widget组成.JS具有定义的各种UI组件，可以根据您的要求进行定制。 Grid 网格组件可用于以表格格式显示数据。 描述 网格：这个组件是显示数据的简单组件，它是以表格格式存储在Ext.data.Store中的记录的集合。 语法 这里是创建网格的简单语法   Ext.create('Ext.grid.Panel'...
Extjs之Grid详细
diweikang的博客
11-13 1183
Grid的展示选中排序选中事件。 附图： 代码： Ext.onReady(function () { var store = Ext.create('Ext.data.Store', { fields: ["cataId", "cataNo", "cataRemark", "cataTitle", "cataObj
Extjs Grid 编辑
Benson
07-11 257
//创建index.jsp Editor Grid Example Editor Grid Example This example shows how to create a grid with inline editing. Note that the...
extjs grid
记录点滴.......
03-21 189
[code="java"] grid // 勾选模型 var sm = new Ext.grid.CheckboxSelectionModel({ singleSelect: false //singleSelect设置为true，则应用到grid之后只能单选，默认为false }); // 列模型----1 ：定义表头 va...
extjs-->grid
博客
06-18 392
表格 一般用来展示数据,也可以在上面编辑数据... var mainPanel2 = Ext.create('Ext.grid.Panel', { flex: 2, store: { xtype:'store', fields: ['name', 's
ExtJS 入门学习之 grid篇
java-he
07-05 273
   本文是:   ExtJS 入门学习之 MessageBox篇   之姐妹篇。本期主要是总结extjs中grid的使用。首先建立HTML如下： &lt;! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//...
ExtJs中Grid的用法
zoujp_xyz的专栏
11-01 1646
<br />本文整理自：http://leadergxg.25291.84g.com/ExtJs/example/index.html<br />-----------------------------------------------------------------------------------------------------<br /> <br />/****** 简单Grid，以本地数组数据作为数据源 *******/<br />var SimpleGrid = function()
extjs学习笔记（三）最基本的grid
weixin_30809333的博客
10-15 153
extjs的一个亮点就是提供了丰富的UI，使得没有艺术细胞的程序员也能做出绚丽的界面。把所有的UI集中到一起，有好处也有坏处，好处是有了统一的风格和接口，坏处是js文件过于庞大，使用extjs的最小集合也超过了500k，所以在有些项目中并不适用。jquery在这方面则正好相反，它的UI都以插件形式提供，可以需要什么就引用什么，所以非常小巧灵活，但由于插件往往是由不同的人或者团队来提供，界...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值