免費AI編程助手
Ext.js 網(wǎng)格
2022-05-20 11:38 更新
描述
網(wǎng)格：這個組件是顯示數(shù)據(jù)的簡單組件，它是以表格格式存儲在Ext.data.Store中的記錄的集合。
語法
這里是創(chuàng)建網(wǎng)格的簡單語法
Ext.create('Ext.grid.Panel',{
grid properties..
columns : [Columns]
});
例
下面是一個簡單的例子顯示網(wǎng)格
<!DOCTYPE html>
<html>
<head>
<link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
<script src="./ext-6.0.0/build/ext-all.js"></script>
<script type="text/javascript">
// Creation of data model
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" }
];
// Creation of first grid store
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel',
data: myData
});
// Creation of first grid
Ext.create('Ext.grid.Panel', {
id : 'gridId',
store : gridStore,
stripeRows : true,
title : 'Students Grid', // Title for the grid
renderTo :'gridDiv', // Div id where the grid has to be rendered
width : 600,
collapsible : true, // property to collapse grid
enableColumnMove :true, // property which alllows column to move to different position by dragging that column.
enableColumnResize:true, // property which allows to resize column run time.
columns :
[{
header: "Student Name",
dataIndex: 'name',
id : 'name',
flex: 1, // property defines the amount of space this column is going to take in the grid container with respect to all.
sortable: true, // property to sort grid column data.
hideable: true // property which allows column to be hidden run time on user request.
},{
header: "Age",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false // this column will not be available to be hidden.
},{
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>這將產(chǎn)生以下結(jié)果：
網(wǎng)格屬性：
可折疊：此屬性用于向網(wǎng)格添加折疊功能。 在網(wǎng)格屬性中添加“Collapsible：true”功能以添加此功能。
排序：此屬性是為網(wǎng)格添加排序功能。 在網(wǎng)格中添加列屬性“sortable：true”以應用排序ASC / DESC。 默認情況下為true，因此如果您不想顯示此功能，可以將其設(shè)為false。
columns : [{
header: "Student Name",
dataIndex: 'name',
id : 'name',
flex: 1,
sortable: true // property to sort grid column data
}]默認情況下，可以使用屬性分類器應用soring：{property：'id'，direction：'ASC'} In store。 在將數(shù)據(jù)呈現(xiàn)到網(wǎng)格之前，它將基于分揀機中提供的屬性和給定的方向?qū)W(wǎng)格數(shù)據(jù)進行分類。
啟用列調(diào)整大小：可以使用網(wǎng)格屬性"enableColumnResize：true"調(diào)整列的大?。梢栽龃蠡驕p小其寬度）。
列可隱藏：在網(wǎng)格中添加列屬性"hideable：true"，使列顯示為隱藏或顯示。 默認情況下為true，因此如果您不想顯示此功能，可以將其設(shè)為false。
columns : [{
header: "Student Name",
dataIndex: 'name',
id : 'name',
flex: 1,
sortable: true,
hideable: true // property which allows column to be hidden run time on user request
}]
可拖動列：添加列屬性"enableColumnMove：true"是網(wǎng)格屬性，我們可以使用它移動網(wǎng)格中的列。
渲染器：這是基于我們從商店獲得的數(shù)據(jù)顯示網(wǎng)格數(shù)據(jù)的自定義視圖的屬性。
columns : [{
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";
}
}
}]以上內(nèi)容是否對您有幫助：
更多建議：