ExtJS 4.2 第一個程式

阿新 • • 發佈：2019-01-15

本篇介紹如何建立一個ExtJS應用程式。並通過建立目錄、匯入檔案、編寫程式碼及分析程式碼等步驟來解釋第一個ExtJS程式。

1. 建立程式

1.1 建立目錄建議

根據官方建議，建立一個ExtJS應用程式的目錄推薦如下：

- appname
　　| - app
　　　　| - namespace
　　　　　　| - Class1.js
　　　　　　| - Class2.js
　　　　　　| - ...
　　| - extjs
　　| - resources
　　　　| - css
　　　　| - images
　　　　| - ...
　　| - app.js
　　| - index.html

appname目錄：應用程式的根目錄。

app目錄：業務程式碼。

extjs目錄：存放ExtJS各JS檔案。

resources目錄：資源目錄；包含CSS和圖片。

app.js檔案：應用程式的邏輯js檔案。

index.html檔案：應用程式的入口點。

可以看出，整個目錄只有一個html檔案，其他的業務都是通過Js檔案建立。

ExtJS非常適合SAP(單頁面應用)的程式，除了入口的index.html，其他業務都可通過js檔案來進行開發和管理。

1.2 實際目錄

可根據需要：

1) 匯入ext-4.2.1-gpl.zip裡的ext-all.js到專案的 extjs4.2 目錄裡。

2) 匯入ext-4.2.1-gpl.zip中的Resources到專案的 Resources 目錄裡。

1.3 index.html

index.html檔案程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ExtJS4.2</title>
	<meta charset="utf-8" />
    <link href="Resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" />
    <script src="ExtJS4.2/ext-all.js"></script>
    <script src="app.js"></script>
    <script>
        Ext.onReady(function () {
            Ext.create('Ext.panel.Panel', {
                width: '100%',       
                title:'Test',
                renderTo: Ext.getBody(),
                items: [
                    Ext.create('Ext.form.Display', {
                        width: '100%',
                        value: '第一個ExtJS程式'
                    })
                ]
            });
        });
    </script>
</head>
<body>
</body>
</html>

1.4 執行圖

2. 程式碼分析

2.1 Ext.onReady()方法

Ext.onReady( fn, [scope], [options]) ：傳入一個函式，當DOM和所需要的類都載入完畢後執行此函式。

引數：

①fn {function} ：載入完畢要執行的函式。

②scope {object} 可選：回撥函式的作用域。

③options {object} 可選：在建立事件時，設定建立的機制。此函式最終呼叫 Ext.util.Event.addListener() 方法；可在裡面找到相關的設定。例如 priority 欄位表示事件建立是否優先；如第二個順序載入的Ext.onReady()中options設定為 {priority:true}，那麼此Ext.onReady()會在第一個載入的Ext.onReady()之前執行(前提是第一個Ext.onReady()沒有設定{priority:true})。

2.2 Ext.create()方法

Ext.create( name, [args] ) ：建立指定類的例項。

引數：

①name {function} ：需要建立例項的類名或別名。

②args {object} 可選：初始化例項時的傳參。

返回值：

{object} ：返回例項。

2.2.1 Ext.create('Ext.panel.Panel', {})

Ext.create('Ext.panel.Panel', {}) ：表示建立一個 panel 元件。

renderTo: Ext.getBody() ：在Body區域裡呈現此元件。

2.2.2 Ext.create('Ext.form.Display', {})

Ext.create('Ext.form.Display', {}) ：建立一個 Display 元件。

在這個示例中，我們把 Display元件放入到 panel 容器裡了。

ExtJS 4.2 第一個程式

本篇介紹如何建立一個ExtJS應用程式。並通過建立目錄、匯入檔案、編寫程式碼及分析程式碼等步驟來解釋第一個ExtJS程式。目錄 1. 建立程式　　1.2 實際目錄　　1.4 執行圖 2. 程式碼分析 1. 建立程式 1.1 建立目錄建議根據官方建議，建立一個ExtJ

Turbo51學習筆記（4）第一個程式

在高階語言裡，“Hello world"是經典的第一個程式；在與硬體密切相關的嵌入式程式設計裡，點亮LED燈則更具有代表性。下面的程式碼實現一個LED燈的明、暗迴圈： Program led_test; const flash_time_limit_1=$A0;

組合語言_第4章第一個程式

4.1 一個源程式從寫出到執行的過程 - 第一步：編寫彙編源程式。這一步的工作結果：產生一個儲存源程式的文字檔案 - 第二步：對源程式進行編譯連線使用匯編語言編譯程式對源程式檔案中的源程式進行編譯，產生目標檔案；再用連線程式對目標檔案進行連線，生成可在作業系

JAVA學習之路第2篇-JAVA第一個程式hello world

java實現hello word 第1篇中我們瞭解了什麼是機器語言以及關於儲存單位的一些知識點，知道了能夠用編寫機器語言的二進位制值程式設計，但是二進位制面向機器挺友好機器能夠快速的識別和執行，但是面向編寫它的人就不太友好了。能否有一種語言對人比較友好而且機器還能識別執行的呢？我告訴你是

PyQt5（2）——調整佈局（佈局管理器）第一個程式

我們拖拽一個UI檔案，轉為PY檔案後生成一個類Ui_MainWindow 此時，我們新建一個檔案，用來控制業務邏輯（繼承介面中的類），跟介面分開，這樣我們就完成了介面和邏輯相分離（這段程式碼使用率基本100%，牢牢記住）。 1 __author__ = "WSX" 2 import sys 3

1.2 初識node.js ----第一個程式

瞭解了node是什麼以後，我們來下載node node可以在任何作業系統安裝，底層都是chrome v8引擎，使用c++開發 https://nodejs.org/en/download/ 傻瓜式安裝，安裝完成之後，在CMD+R，開啟控制檯，然後檢視版本，node -v 這樣你

2 第一個嵌入式程式

2 第一個嵌入式程式 1、下位機要完成的工作： 1）準備一個TF卡 2）將已有的uboot二進位制檔案燒寫到TF卡上燒寫在上位機完成 3）將TF卡插入下位機 4）下位機TF卡的uboot執行 5）利用uboot的tftp命令從上位機下載uboot到記憶體，然後再記憶體燒寫到E

4 第一個程式：1.exe

知識儲備 1、組合語言程式從寫出到執行的過程編寫彙編源程式；對源程式進行編譯連結；執行可執行檔案中的程式。 2、可執行檔案包含兩部分內容：程式（從源程式中的彙編指令翻譯過來的機器碼）和資料（源程式中定義的資料）相關的描述資訊（比如：程式有多大，要佔用

Praat 學習日誌2--第一個指令碼程式，輸出“hello world！”

Praat這個軟體的功能我們就不多說了，語音學的研究生們應該都會用到這軟體，我們使用這個軟體，首先就是學會對他的編程。這裡就開始教大家第一個教程程式，寫出來了，供初學者學習。相信很多

PyQt5教程——第一個程式（2）

用PyQt5寫的第一個程式在這篇PyQt5教程中，我們可以學習一些PyQt5的基礎應用。簡單的例子這是一個顯示一個小視窗的簡單例子。我們可以做許多這樣的視窗。我們可以調整它的視窗尺寸，最大化或最小化這個視窗。這些需求需要碼很多程式碼。但一些人已經寫好了這些功能實現。因為這些需求在很多應用中重複

PyQt4入門教程(2)_PyQt4的第一個程式

注：文中譯者的話將用方括號【】標出。這一部分我們將學習PyQt中一些基本的函式。一個簡單的例子這是一個能夠顯示出一個視窗的簡單例子。目前為止我們已經可以對這個窗口乾很多事情了，比如說改變它的尺寸，最大化，最小化……幹這些事情本來需要寫很多程式

OpenGL學習筆記（2）第一個程式——猶他茶壺（Teapot）

好了，python+opengl的開發環境搭建好後，我們就可以開始學習了。這裡，我們先學習一個常見的例子——猶他茶壺。先貼程式碼 fromOpenGL.GL import*fromOpenGL.GLU import*fromOpenGL.GLUT import

Informatica_(2)第一個例子

pow 圖標情況下數據丟失 ati 用戶需要進入 2個 PowerCenter Repository Manager1.啟動客戶端程序連接服務器打開客戶端（PowerCenter Repository Manager）PCRM;存儲庫--配置域--添加新域；填寫域名

我的Java第一個程式

一個Java程式可以認為是一系列物件的集合，而這些物件通過呼叫彼此的方法來協同工作。下面簡要介紹下類、物件、方法和例項變數的概念。物件：物件是類的一個例項，有狀態和行為。例如，一條狗是一個物件，它的狀態有：顏色、名字、品種；行為有：搖尾巴、叫、吃等。類：類是一個模板，它描述一類物件的

python的第一個程式-拷貝檔案遇到的問題

開始學習python了(windows環境). 第一個程式就是跟著文件敲一個備份的程式碼,文件適壓縮成zip檔案,但是系統沒有安裝zip包 #------------------------------上程式碼-----------請注意windows是反斜槓--------------

Java第一個程式hello world

import java.util.Scanner; public class hello { public static void main(String[] args) { System.out.println("hello"); Scanner in

Golang的第一個程式-Hello, World !

安裝Golang： 1. 下載安裝包 https://golang.google.cn/dl/ 我這裡使用壓縮包，下載後解壓到D盤（自定義）。 2. 新增環境變數：把解壓後的bin目錄新增到環境變數中第一個程式： 1. 新建一個test.go檔案，編寫如下內容：

安卓學習筆記 -- （安裝環境） Android Studio安裝配置、環境搭建詳細步驟及基本使用 Android Studio和SDK官方開發工具下載 Android Studio教程從入門到精通 Android開發-之第一個程式：HelloWorld！

1、下載Android Studio安裝配置、環境搭建詳細步驟及基本使用 https://www.cnblogs.com/yanglh6-jyx/p/Android_AS_Configuration.html https://blog.csdn.net/k491022087/ar

Flask的第一個程式——hello world

一個簡單的Flask程式步驟： 1.匯入Flask 2.建立Flask應用例項 3.定義檢視函式並繫結URL 4.啟動伺服器 # 匯入Flask(從falsk包中匯入Flask類) from flask import Flask 建立Flask類的物件:Flask類原始碼規定此

Qt下opencv第一個程式

新建專案，在.pro檔案下新增庫和標頭檔案： INCLUDEPATH += /home/wlw/Desktop/opencv-2.4.13.4/out/include LIBS += -L/home/wlw/Desktop/opencv-2.4.13.4/out/lib -lopencv_ca

ExtJS 4.2 第一個程式

目錄

1. 建立程式

1.1 建立目錄建議

1.2 實際目錄

1.3 index.html

1.4 執行圖

2. 程式碼分析

2.1 Ext.onReady()方法

2.2 Ext.create()方法

2.2.1 Ext.create('Ext.panel.Panel', {})

2.2.2 Ext.create('Ext.form.Display', {})

相關推薦