Extjs的onReady方法

来源：互联网发布：客户端编程编辑：程序博客网时间：2024/04/30 09:47

OnReady方法不是必须的，OnReady只表示Html页面的所有代码都加载完后在触发OnReady里的JavaScript代码。

如下两个html文件在浏览器中执行的效果一样：

===========代码1（有onReady）

<head>
<meta http-equiv="content-type" content="text/html" charset = gb2312 />
<title>布局</title>
<link rel="stylesheet" type="text/css" href="../ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext4/bootstrap.js"></script>
<script type="text/javascript" src="../ext4/locale/ext-lang-en.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
var data = [[1, '大头', 'yxy', 'www.itokit.com'],
[2, '大头', 'zxy', 'www.itokit.com'],
[3, '大头', 'bxy', 'www.itokit.com']];
var store = new Ext.data.SimpleStore({ data: data, fields: ['id', 'name', 'en_name', 'homepage'] });
var grid = new Ext.grid.GridPanel({
renderTo: 'aaaaa',
title: '中国Java开源产品团队',
height: 250,
width: 800,
columns: [{ header: '姓名', dataIndex: 'name', sortable: true, width: 80 },
{ header: '英文名称', dataIndex: 'en_name', sortable: true },
{ header: '网址', dataIndex: 'homepage', sortable: true}],
store: store,
autoExpandColumn: 2
});
});
</script>
</head>
<body>
<div id="aaaaa" style="width: 100%; height: 100%"></div>
</body>

</html>

===========代码2（无onReady）

<head>
   <meta http-equiv="content-type" content="text/html" charset = gb2312 />
   <title>布局</title>
<link rel="stylesheet" type="text/css" href="../ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext4/bootstrap.js"></script>
<script type="text/javascript" src="../ext4/locale/ext-lang-en.js"></script>
<script type="text/javascript">

var data = [[1, '大头', 'yxy', 'www.itokit.com'],
[2, '大头', 'zxy', 'www.itokit.com'],
[3, '大头', 'bxy', 'www.itokit.com']];
var store = new Ext.data.SimpleStore({ data: data, fields: ['id', 'name', 'en_name', 'homepage'] });
var grid = new Ext.grid.GridPanel({
renderTo: 'aaaaa',
title: '中国Java开源产品团队',
height: 250,
width: 800,
columns: [{ header: '姓名', dataIndex: 'name', sortable: true, width: 80 },
{ header: '英文名称', dataIndex: 'en_name', sortable: true },
{ header: '网址', dataIndex: 'homepage', sortable: true}],
store: store,
autoExpandColumn: 2
});

</script>
</head>
<body>
   <div id="aaaaa" style="width: 100%; height: 100%"></div>
</body>

</html>

0 0