有時候，我們在多個jsp頁面中的script代碼有許多重複的代碼，這時我們就會想到如何重用它們，在用的時候我們需要注意幾個問題：
例如：有兩個檔案 toolbar.js 和 main.jsp
toolbar.js:
======================================================================================
Ext.BLANK_IMAGE_URL = '/ngrcms/images/s.gif';
var clientWidth = document.body.clientWidth;
var clientHeight = document.body.clientHeight;
var button = new Ext.Button({
text: '按鈕',
icon: '../images/query.png',
cls: "x-btn-text-icon",
scope:this
});
======================================================================================
main.jsp:
======================================================================================
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
<title>ReportTest</title>
<link rel="stylesheet" type="text/css" href="../ext-3.2.1/resources/css/ext-all.css">
<script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.2.1/ext-all.js"></script>
</head>
<body>
<div id="container">
</div>
//注意因為toolbar.js中含有對body的操作(document.body.clientWidth),所以在js檔案引入時，一定要注意必須放在body中，
//不能放在head中，因為在head執行時,並沒有body的產生，所以會產生某某屬性undefined.
<script type="text/javascript" src="toolbar.js"></script>
<script type="text/javascript">
button.on('click',function(){
Ext.MessageBox.alert("這是一個查詢按鈕");
});
Ext.onReady(function(){
var panel = new Ext.Panel({
layout:'fit',
frame:true,
title:'標題',
width: clientWidth,
height: clientHeight,
renderTo:'container'
});
});
</script>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
