- appname // app目錄 - app // 自訂classes - namespace - Class1.js - Class2.js - ... - extjs // extsdk位置 - resources // ext所需之css/image等 - css - images - ... - app.js // 此系統的js - index.html // 網頁進入點引用extJS的方法:
- ext-debug.js - 只載入ext core classes,以個別檔案方式動態載入自製classes,以利debug.
- ext.js - 只載入ext core classes,利用deployment建議整合自製classes形成一個app-all.js提升效率.
- ext-all-debug.js - 載入ext完整classes,以個別檔案方式動態載入自製classes,以利debug.
- ext-all.js - 載入ext完整classes,利用deployment建議整合自製classes形成一個app-all.js提升效率.
Hello Ext Example:
- HTML:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="../ext-4.0.2a/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-4.0.2a/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
- app.js:
Ext.application({ name: 'HelloExt', launch: function () { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { title: 'Hello Ext', html: 'Hello! Welcome to Ext JS.' } ] }); }});Result:
Deployment: Sencha SDK Tools允許將ExtJS Application依據js檔案之相依關係產生JSB3(JSBuilder file format)檔案.讓只包含application所需的程式碼.
1. 產生jsb檔描述該網頁使用classes相依狀態.
sencha create jsb -a index.htm -p app.jsb32. 依賴jsb3檔案產生all-classes.js,app-all.js檔案.
sencha build -p app.jsb3 -d .- all-classes.js: debug使用,內含所有使用到的classes但未最佳化.
- app-all.js:最佳化使用到之classes,適合產品化出廠使用.此版本=all-classes.js+app.js
HTML網頁可變更為:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext.js"></script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
沒有留言:
張貼留言