Extjs-grid组件

grid组件

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      	Ext.define('StudentDataModel',{
      		extend:'Ext.data.Model',
      		//区别[]和{}
      		fields:[
      			{name:'name',mapping:'name'},
      			{name:'age',mapping:'age'},
      			{name:'marks',mapping:'marks'}
      		]
      	});

      	Ext.onReady(function(){
      		//创建store数据
      		var myData=[
      			//这里的值是双引号
      			{name:"Asha",age:"16",marks:"40"},
      			{name:"Anand",age:"18",marks:"50"},
      			{name:"Mikle",age:"19",marks:"65"},
      			{name:"Andy",age:"20",marks:"70"}
      		];

      		//先创建store再创建grid
      		var gridStore=Ext.create('Ext.data.Store',{
      			//model要用单引号括起来
      			model:'StudentDataModel',
      			//store的取值用data属性，值不用引号
      			data:myData
      		});	


      		//创建Grid
      		Ext.create('Ext.grid.Panel',{
      			id:'gridId',
      			//store属性不需要引号
      			store:gridStore,
      			stripeRows:true,
      			title:'Student Grid Title',
      			//renderTo 把grid放到哪个div下
      			renderTo:'gridDiv',
      			width:600,
      			//collapsible表示该grid是否可以折叠
      			collapsible       : true, // property to collapse grid
            	enableColumnMove  :true, // property which alllows column to move to different position by dragging that column.
            	//enableColumnResize是否可以通过选中列的边框从而进行拖拉从而变换列的大小
            	enableColumnResize:false, // property which allows to resize column run time.
      			columns:[
      				{
      					//header是双引号,header是该列的显示名称
      					header:"Student name",
      					id:'name',
      					dataIndex:'name',
      					//flex在容器中所占的宽度
      					flex:3,
      					//sortable该列是否可以按从小到大或者从大到小排列
      					sortable:true,
      					//hideable是否可以通过该列的下拉框选项，从而隐藏该列
      					hideable:true
      				},
      				{
      					header:"Age",
      					// id:'age',
      					dataIndex:'age',
      					sortable:true,
      					hideable:false,
      					flex:5
      				},
      				{
      					header:"Marks",
      					// id:'marks',
      					dataIndex:'marks',
      					flex:5,
      					sortable:true,
      					renderer:function(value,metadata, record, rowIndex, colIndex, store){
      						var metadata=metadata;
      						var record=record;
      						var rowIndex=rowIndex;
      						var colIndex=colIndex;
      						var store=store;
      						if (value>=60) {
      							return "pass";
      						}else{
      							return "no pass";
      						}
      					}
      				}
      			]

      		});




      	});

      
   </script>
</head>
<body>
	<div id="gridDiv"></div>
</body>
</html>

运行效果；

原文：https://www.w3cschool.cn/extjs/grid.html

猜你喜欢