(Ext基础篇) Ext表格控件
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>
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
