Ext.grid

番茄鲨鱼面
于 2015-06-10 12:07:23 发布
阅读量631
点赞数
分类专栏： Ext
本文链接：https://blog.csdn.net/xiakepan/article/details/46440209
版权
Ext 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>Grid来显示数据</title>
		<link rel="stylesheet" type="text/css" href="./ext-2.0.2/resources/css/ext-all.css"/>
		<script src="./ext-2.0.2/adapter/ext/ext-base.js"></script>
		<script src="./ext-2.0.2/ext-all-debug.js"></script>
		<style>
			ol{
				margin-left:30px;
				list-style-type:decimal;
			}	
		</style>
		<script>
			var helpWindow;
			Ext.onReady(function(){
				Ext.BLANK_IMAGE_URL="./ext-2.0.2/resources/images/default/s.gif";
				var store = new Ext.data.Store({
					data:[
						[1,'名字','内容','2005-06-09','1','地址','20','1','1','5'],
						[2,'名字2','内容','2005-06-09','1','地址','20.56','1','2','6'],
						[3,'名字3','内容','2015-05-15','1','地址','20.446','0','3','7'],
						[4,'名字4','内容','2005-06-09','1','地址','20','1','4','8']
					],
					reader:new Ext.data.ArrayReader({id:'id'},[
						'id','name','content',{name:'date',dateFormat:'Y-m-d'},'count','addr',{name:'price',type:'float'},{name:'available',type:'boolean'},'num1','num2'
					])
				});
				//使用xml加载数据，除了store需要改之外，其他的都不需要改
				/*
				var store = new Ext.data.Store({
					url:'www.baidu.com',
					reader:new Ext.data.XmlReader({
						record:'row',//每一条记录的父标签是row
						id:'id'
					},[
						'id','name','content',{name:'date',dateFormat:'Y-m-d'},'count','addr',{name:'price',type:'float'},{name:'available',type:'boolean'},'num1','num2'
					]);
				});
				store.load();//远程数据，需要load来进行加载
				*/
				//使用json加载数据
				/*
				var store = new Ext.data.Store({
					url:'www.baidu.com',
					reader:new Ext.data.JsonReader({
						root:'rows',//每一条记录的父标签是row
						id:'id'
					},[
						'id','name','content',{name:'date',dateFormat:'Y-m-d'},'count','addr',{name:'price',type:'float'},{name:'available',type:'boolean'},'num1','num2'
					]);
				});
				store.load();//远程数据，需要load来进行加载
				*/
				
				//Grid
				var grid = new Ext.grid.GridPanel({
					renderTo:gridDiv,
					frame:true,//为gridpanel添加一个边框，不是必须的，但是有边框的gridpanel在渲染的时候更漂亮
					title:'Grid Title',
					height:500,
					width:1200,
					store:store,
					sm:new Ext.grid.RowSelectionModel({//只能单行选择
						singleSelect:true,
						listeners:{
							rowselect:{
								fn:function(sm,index,record){
									Ext.Msg.alert('Selected','选择了'+record.data.name);
								}
							}
						}
					}),
					//enableColumnMove:false,
					columns:[
						{header:'编号',dataIndex:'id'},
						{header:'姓名',dataIndex:'name'},
						{header:'内容',dataIndex:'content'},
						{header:'日期',dataIndex:'date',renderer:Ext.util.Format.dateRenderer('m/d/Y')},
						{header:'数目',dataIndex:'count',renderer:function(value,p,record){
							//根据数据自定义显示内容
							return '总计 ' + value + ' 件';
						}},
						{header:'地址',dataIndex:'addr',renderer:function(val,p,store){
							return '<b>'+val+'</b><br>'+store.data.num1;
						}},
						{header:'价格',dataIndex:'price'},
						{header:'使用',dataIndex:'available'},
						{header:'num1',dataIndex:'num1',sortable:true},
						{header:'num2',dataIndex:'num2'},
						{header:'cover',dataIndex:'cover',renderer:function(){
							return "<img src='./1.png'>";
						}}
					],//定义列的数组
					stripeRows:true//设置true的时候，行颜色交替变化
				});
				//列拖动监听事件
				grid.getColumnModel().on('columnmoved',function(cm,oindex,nindex){
					var title = '你移动'+cm.getColumnHeader(nindex)+'列';
					if(oindex>nindex){
						var dir = '向左'+(oindex-nindex)+'列'
					}else{						
						var dir = '向右'+(nindex-oindex)+'列';
					}
					Ext.Msg.alert(title,dir);
				});
			});
		</script>
	</head>
	<body>
		<h1>Grid</h1>
		<div>
			<ol>
				<li>
					建立data store，官方支持Simple(Array)(数组)、XML、JSON，应该在onReady里面。
				</li>
				<li>
					frame:true,//为gridpanel添加一个边框，不是必须的，但是有边框的gridpanel在渲染的时候更漂亮
				</li>
				<li>
					自定义显示的格式：renderer:function(value,p,record)
				</li>
				<li>
					日期格式化显示：store中定义：{name:'date',dateFormat:'Y-m-d'}；grid中定义：renderer:Ext.util.Format.dateRenderer('m/d/Y')},
				</li>
				<li>
					stripeRows:true//设置true的时候，行颜色交替变化，实测这个没有效果
				</li>
				<li>
					columns中包含的其它参数：hidden是否隐藏该列；width列的宽度；sortable该列能否被排序
				</li>
				<li>
					renderer：单元格渲染器，可以使用内置的方法格式化单元格文本。dateRender：格式化日期；uppercase/lowercase：全部大写或者全部小写；capitalize：美化文本，格式化文本，让它的大小写都正确
				</li>
				<li>
					renderer会传递三个参数，function(value,p,record)，value是单元格的值，p是单元格对象本身，record是表格的data store
				</li>
				<li>
					合并两列单元格：相加，平均，求差值或者合并两列字符串：renderer返回return '<b>'+val+'</b><br>'+store.data.num1;
				</li>
				<li>
					可以使用sortable:true来进行排序，也可以在渲染完成后，使用var colmodel = grid.getColumnModel();colmodel.getColumnById('tabline').sortable = true;
				</li>
				<li>
					grid默认可以拖拽列，可以使用enableColumnMove:false,来禁止拖动
				</li>
				<li>
					列拖拽监听事件：grid.getColumnModel().on('columnmoved',function(cm,oindex,nindex){
				</li>
				<li>
					如果是xml数据，reader由ArrayReader改为XmlReader
				</li>
				<li>
					采用json格式比xml加载更快
				</li>
				<li>
					selection model可以监听行、列、单元格的选择。CellSelectionModel:只能选择一个单元格；RowSelectionModel:选择完整的行；ColumnSelectionModel:选择完整的列
					CheckBoxSelectionModel:checkbox来做行的选择。
					可以用var sm = new Ext.grid.CheckboxSelectionModel();
				</li>
			</ol>
		</div>
		<div id="gridDiv"></div>
	</body>
</html>