項目目錄結構如下圖所示
main.html文件代碼如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Web項目引入Ext</title>
<link rel="stylesheet" type="text/css" href="ext/ext-theme-classic/build/resources/ext-theme-classic-all.css" />
<script type="text/javascript" src="ext/ext-all.js"></script>
<!-- <script type="text/javascript" src="ext/ext-theme-classic/build/ext-theme-classic.js"></script> -->
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
app.js文件代碼如下
Ext.onReady(function(){
var columns = [
{header: '編號',dataIndex: 'id'},
{header: '名稱',dataIndex: 'name'},
{header: '描述',dataIndex: 'descn'},
{header: '日期',dataIndex: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')}
];
var data = [
['1','name1','descn1','1970-01-15T02:58:04'],
['2','name2','descn2','1970-01-15T02:58:04'],
['3','name3','descn3','1970-01-15T02:58:04'],
['4','name4','descn4','1970-01-15T02:58:04'],
['5','name5','descn5','1970-01-15T02:58:04'],
];
var store = new Ext.data.ArrayStore({
data: data,
fields : [
{name: 'id'},
{name: 'name'},
{name: 'descn'},
{name: 'date',type: 'date',dateFormat: 'Y-m-dTH:i:s'}
]
});
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
columns: columns
});
});
部署項目，訪問main.html文件，顯示效果如下
