Extjs---grid的使用

最新推荐文章于 2019-04-25 11:42:49 发布

iteye_3224

最新推荐文章于 2019-04-25 11:42:49 发布

阅读量74

点赞数

文章标签： xhtml javascript json ViewUI

一个简单的grid的创建

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Grid示例</title> 
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" /> 
    <script type="text/javascript" src="ext4/ext-all.js"></script> 
    <script type="text/javascript" src="js/grid.js"></script> 
</head> 

<body> 
<div id="grid"></div> 
</body> 
</html>

grid.js代码

//预加载
Ext.require(
		[
		 	'Ext.grid.*',
		 	'Ext.data.*'
		 ]
		 
);

Ext.onReady(
		function(){
			//创建Model
			Ext.define(
					'MyData',
					{
						extend:'Ext.data.Model',
						fields:[
						        {name:'name',mapping:'name'},
						        {name:'sex',mapping:'sex'},
						        {name:'age',mapping:'age'}
						]
					}
			)
			//创建数据源
			var store = Ext.create(
					'Ext.data.Store',
					{
						model:'MyData',
						proxy:{
							type:'ajax',
							url:'data/mydata.json',
							reader:{
								type:'json',
								root:'items'
							}
						},
						autoLoad:true
					}
			);
			
			//创建grid
			var grid = Ext.create('Ext.grid.Panel',{
					store:store,
					columns:[
					         {text:'姓名',width:120,dataIndex:'name',sortable:true},
					         {text:'性别',width:120,dataIndex:'sex',sortable:true},
					         {text:'年龄',width:120,dataIndex:'age',sortable:true}
					],
					height:400, 
			        width:480, 
			        x:20, 
			        y:40, 
			        title: 'ExtJS4 Grid示例', 
			        renderTo: 'grid', 
			        viewConfig: { 
			            stripeRows: true 
			        } 
				}
			)
		}
)

mydata.json代码：

{
	 "items": [  
        {  
            "name": "小黑",  
            "sex": "男",  
            "age":25, 
        },  
        {  
            "name": "哈哈",  
            "sex": "男",  
            "age":31, 
        }, 
        {  
            "name": "好好",  
            "sex": "男",  
            "age":30, 
        }
	]
}

效果图：

多表头grid

只需要修改grid的创建代码即可：

var grid = Ext.create('Ext.grid.Panel',{
					store:store,
					
					columns:[
					         {
					        	 text:'基本信息',
					        	 columns:[
									         {text:'姓名',width:120,dataIndex:'name',sortable:true},
									         {text:'性别',width:120,dataIndex:'sex',sortable:true},
									         {text:'年龄',width:120,dataIndex:'age',sortable:true}
									]
					         },{
					        	 text:'日期',
					         }
					],
					height:400, 
			        width:480, 
			        x:20, 
			        y:40, 
			        title: 'ExtJS4 Grid示例', 
			        renderTo: 'grid', 
			        viewConfig: { 
			            stripeRows: true 
			        } 
				}
			)

效果图：

iteye_3224

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs---grid的使用

一个简单的grid的创建html代码：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&...
复制链接

扫一扫