Ext.js - 网格
这是一个显示数据的简单组件，数据是以表格形式存储在 Ext.data.Store 中的记录集合。
语法
以下是创建网格的简单语法。
Ext.create('Ext.grid.Panel',{
grid properties..
columns : [Columns]
});
示例
以下是显示网格的简单示例。
<!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 data
var myData = [
{ name : "Asha", age : "16", marks : "90" },
{ name : "Vinit", age : "18", marks : "95" },
{ name : "Anand", age : "20", marks : "68" },
{ name : "Niharika", age : "21", marks : "86" },
{ name : "Manali", age : "22", marks : "57" }
];
// 创建第一个网格存储
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel',
data: myData
});
// 创建第一个网格
Ext.create('Ext.grid.Panel', {
id : 'gridId',
store : gridStore,
stripeRows : true,
title : 'Students Grid', // 网格的标题
renderTo :'gridDiv', // 需要渲染网格的 Div id
width : 600,
collapsible : true, // 折叠网格的属性
enableColumnMove :true, // 属性允许通过拖动该列将该列移动到不同的位置。
enableColumnResize:true, // 允许调整列运行时大小的属性。
columns :
[{
header: "Student Name",
dataIndex: 'name',
id : 'name',
flex: 1, // 属性定义了此列在网格容器中相对于所有列所占用的空间量。
sortable: true, // 属性来对网格列数据进行排序。
hideable: true // 允许在用户请求时隐藏运行时的属性.
},{
header: "Age",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false // 此列将无法被隐藏。
},{
header: "Marks",
dataIndex: 'marks',
flex: .5,
sortable: true,
// renderer is used to manipulate data based on some conditions here
// who ever has marks greater than 75 will be displayed as
// 'Distinction' else 'Non Distinction'.
renderer : function (value, metadata, record, rowIndex, colIndex, store) {
if (value > 75) {
return "Distinction";
} else {
return "Non Distinction";
}
}
}]
});
});
</script>
</head>
<body>
<div id = "gridDiv"></div>
</body>
</html>
上述程序将产生以下结果 −
网格属性
Collapsible − 此属性用于向网格添加折叠功能。在网格属性中添加 "Collapsible : true" 功能以添加此功能。
Sorting − 此属性用于向网格添加排序功能。在网格中添加列属性"sortable : true" 以应用 ASC/DESC 排序。默认情况下，它为 true。如果您不想显示此功能，可以将其设为 false。
columns : [{
header: "Student Name",
dataIndex: 'name',
id : 'name',
flex: 1,
sortable: true // 对网格列数据进行排序的属性
}]
默认情况下，可以使用存储中的属性 sorters : {property: 'id', direction : 'ASC'> 应用排序。它将根据 sorters 中提供的属性和给定的方向对网格数据进行排序，然后再将数据呈现到网格中。
启用列调整大小 − 可以使用网格属性 "enableColumnResize: true" 调整列的大小(可以增加或减少其宽度)。
列可隐藏 − 在网格中添加列属性 "hideable : true" 以使列显示或隐藏。默认情况下，它为 true。如果您不想显示此功能，可以将其设为 false。
columns : [{
header: "Student Name",
dataIndex: 'name',
id : 'name',
flex: 1,
sortable: true,
hideable: true // 允许在用户请求时隐藏运行时的属性
}]
可拖动列 − 添加列属性 "enableColumnMove: true" 是网格属性，我们可以使用该属性在网格中移动列。
Renderer − 这是根据我们从存储中获取的数据自定义网格数据视图的属性。
columns : [{
header: "Marks",
dataIndex: 'marks',
flex: .5,
sortable: true,
// 渲染器用于根据某些条件来操作数据
// ever has marks greater than 75 will be displayed as 'Distinction'
// else 'Non Distinction'.
renderer : function (value, metadata, record, rowIndex, colIndex, store) {
if (value > 75) {
return "Distinction";
} else {
return "Non Distinction";
}
}
}]
注意 − 所有属性均已添加于上述网格示例中。请在试用编辑器中试用它们。
extjs_components.html
