(Ext基础篇) Ext表格控件

朴灿烈づ我的快乐病毒、 2024-04-17 23:42 82阅读 0赞

Ext中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一行、自动显示行号、列汇总、单元格编辑等实用功能。

表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为Grid。在Ext中，表格控件Grid必须包含列定义信息，并指定表格的数据存储Store。表格的列信息由类Ext.grid.ColumnModel定义，而表格的数据存储器由Ext.data.store定义，数据存储器工具解析的数据不同，可分为：jsonStore、SimpleStore、GroupStore。

(1)制作一个简单的Grid

1.1在Ext中。列的定义叫做columModel，cm是它的简称，它作用整个表格的列模式，是应该首先创建的

在这里，我们创建一个包含3列的Grid，代码如下：

var cm = new Ext.grid.ColumnModel([
    
    			{
    				header : '编号',
    				dataIndex : 'id'
    			}, {
    				header : '名称',
    				dataIndex : 'name'
    			}, {
    				header : '描述',
    				dataIndex : 'descn'
    			}
    
    			]);

var cm = new Ext.grid.ColumnModel(\[ var cm=new Ext.grid.ColumnModel(.........)负责创建表格信息。表格包含的列由column配置属性来描述，简称cm。column是一个数组，每一行数据元素描述表格的一行信息，表格的列信息包含首部显示文本(header)、列对应的记录字段(dataindex)、列是否可以排序(sortable)、列的渲染函数(renderer)、宽度（width）、格式化信息（format）等。

var store=new Ext.data.Store({
    			proxy:new Ext.data.MemoryProxy(data),
    			reader:new Ext.data.ArrayReader({},[
    			{name:'id'},
    			{name:'name'},
    			{name:'descn'}
    			])			
    			});
    			store.load();

var store=.......用来创建一个数据存储对象，这也是GridPanel必须配置的属性，数据存储对象store负责把各种各样的原始数据（二维数组、json对象数组、xml文本）转化Ext.dataRecord类型的对象。通过Ext.data.Store，我们可以把任何格式数据转化成Grid可以使用的形式，这样就不需要为每种数据格式写一个对应的实现。

store对应两个部分：proxy和reader。proxy是指获取数据的方式，reader是指如何解析这一堆数据。这里我们使用的是Ext.data.MemoryProxy，它是专门用来解析javascript变量的在定义MemoryProxy对象时，只需要把上面定义的data作为参数传递进去即可。

Ext.data.ArrayReader专门解析数组，并且告诉我们它会按照定义的规范进行解析。

Grid常用功能详解：

默认情况下：Grid可以拖放列，也可以改变列的宽度。如果想禁用这两个功能，在定义Grid对象时分别设置enableColumnMove和enableColumnResize为false即可。

Grid显示斑马线效果，在定义Grid对象时设置stripeRow 为true.

Grid 支持一种读取数据时的遮罩和提示功能，设置属性loadMask 为true ,在store.load（）完成之前会一直显示"Loading"

Grid 自主决定每列宽度：cm 支持给每列设置宽度，如果不设置列的宽度，它会取一个默认值，默认的宽度是100px.

如果想让每列自动填满Grid,只需要viewConfig中的forceFit即可。

Grid支持按列排序，只需要在定义列模式时增加sortable属性。

Grid支持中文排序，只需要在定义的Store设置sortInfo属性。

自动显示行号和复选框

实际上行号和复选框都是renderer的延伸。当然，复选框的功能要负责得多，两者经常一起使用，所以我们一起讨论。

自动显示行号：添加ColumnModle添加Ext.grid.RowNumberer对象。  
复选框：添加ColumnModle添加Ext.grid.CheckboxSelectionModle对象。

var cm = new Ext.grid.ColumnModel([
    			//显示行号
    			new Ext.grid.RowNumberer(),
    			//显示复选框
    			new Ext.grid.CheckboxSelectionModel(),
    			{
    				header : '编号',
    				dataIndex : 'id'
    			}, {
    				header : '名称',
    				dataIndex : 'name'
    			}, {
    				header : '描述',
    				dataIndex : 'descn'
    			}
    
    			]);

选择模式

在定义Ext.grid.GridPanel时，默认使用RowSelectionModel——行选择模式。行选择模式默认是支持多选，鼠标单击是按住Shirt或Ctrl键就可以选择多行，如果只希望选择一行，需要设置singleSelect参数

在定义Ext.grid.GridPanel的另外一种模式CellSelectionModel——单元格模式。每次只允许选择一个单元格，在EditGrid里默认使用的就是CellSelectionModle模式

点击Grid获取对应的行数据代码

<html>
    <head>
    <title>ExtJs HelloWorld</title>
    <link rel="stylesheet" type="text/css" href="extjs/ext-all.css"/>
    <script src="extjs/ext-base.js"></script>
    <script src="extjs/ext-all-debug.js"></script>
    <script>
    		Ext.onReady(function(){
        
    
    
    			var cm = new Ext.grid.ColumnModel([
    			//显示行号
    			new Ext.grid.RowNumberer(),
    			//显示复选框
    			new Ext.grid.CheckboxSelectionModel(),
    			{
    				header : '编号',
    				dataIndex : 'id'
    			}, {
    				header : '名称',
    				dataIndex : 'name'
    			}, {
    				header : '描述',
    				dataIndex : 'descn'
    			}
    
    			]);
    			
    			
    			var data=[
    			['1','1','1'],
    			['2','2','2'],
    			['3','3','3']
    			];
    			
    			
    			var store=new Ext.data.Store({
    			proxy:new Ext.data.MemoryProxy(data),
    			reader:new Ext.data.ArrayReader({},[
    			{name:'id'},
    			{name:'name'},
    			{name:'descn'}
    			])			
    			});
    			store.load();
    			
    			var grid=new Ext.grid.GridPanel({
    			renderTo:'grid',
    			store:store,
    			cm:cm,
    			//行选择模式---单行设置参数（默认是多行设置）
    			sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
    			viewConfig:{
    				forceFit:true
    			}
    			})
    
    			//获取选择行的相关数据信息
    			grid.on('click',function(){
    			var selections=grid.getSelectionModel().getSelections();
    			for(var i=0;i<selections.length;i++){
    				var record=selections[i];
    				alert('相关数据信息：'+record.get("id")+record.get("name"));
    			}
    			});
    		
    		});
         </script>
       </head>
       <body>
       <div id="grid"></div>   
       </body>
       </html>