Ext入門的第乙個程式(1)

2021-09-06 11:20:04 字數 2108 閱讀 1436

1、ext是什麼?

extjs是集ui和ajax框架與一身的,介面又好看,又有很強的ajax互動功能,適合不會做漂亮頁面的程式設計師用的,缺點就是太大了,要匯入近800kb左右的js和css檔案,這對於web應用來說是乙個比較大的開銷
2、常見的一段**和他們的效果

ext.onready(function());
ext.onready(function() );

});

ext.onready(function()); 	

ext.messagebox.buttontext.ok = "確定";

ext.messagebox.buttontext.cancel = "取消";

var menubar = new ext.*******(catch(e){}}

},'->',

}, '-',

}, '-',

},'-'

]});

menubar.render('riskalarmbar');

});

上述效果圖類似下面的,一般的系統中,剛進入就是 乙個列表的頁面,列表上面有標題,右上角有按鈕,類似如下的

3.具體的使用方法

adapter:負責將裡面提供第三方底層庫(包括ext自帶的底層庫)對映為ext所支援的底層庫。

build: 壓縮後的ext全部原始碼(裡面分類存放)。

docs: api幫助文件。

exmaples:提供使用extjs技術做出的小例項。

source: 無壓縮ext全部的原始碼(裡面分類存放) 遵從lesser gnu (lgpl) 開源的協議。

ext-all.js:壓縮後的ext全部原始碼。

ext-all-debug.js:無壓縮的ext全部的原始碼(用於除錯)。

ext-core.js:壓縮後的ext的核心元件,包括sources/core下的所有類。

ext-core-debug.js:無壓縮ext的核心元件,包括sources/core下的所有類。

得到extjs庫檔案後,就可以將extjs應用到頁面當中了。應用extjs需要在頁面中引入extjs的樣式及extjs庫檔案,樣式檔案為resources/css/ext-all.css,extjs的js庫檔案主要包含兩個,adapter/ext/ext-base.js及ext-all.js,其中ext-base.js表示框架基礎庫,ext-all.js是 extjs的核心庫。adapter表示介面卡,也就是說可以有多種介面卡,因此,可以把adapter/ext/ext-base.js換成 adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype- adapter.js等。

因此,要使用extjs框架的頁面中一般包括下面幾句:

一般情況下我們就使用下面的三個:

在extjs庫檔案及頁面內容載入完後,extjs會執行ext.onready中指定的函式,因此可以用,一般情況下每乙個使用者的extjs應用都是從ext.onready開始的,使用extjs應用程式的**大致如下: 

或者:

下面我們寫乙個簡單的**程式:彈出警告對話方塊

效果如下:

例子二:彈出窗體

效果如下:

這只是乙個簡單的例項,要想做出複雜的功能還需要學習很多知識,在後續中將介紹extjs類庫和元件介紹,希望大家繼續關注,一起研究,共同進步!

Python入門複習 1 第乙個程式

之前學過一段時間的python,現在以初學者的心態重新拿起。python作為計算機入門的第一門語言,優勢相當明顯,語法清晰簡潔,而且以縮排判斷 結構,可以強制給許多程式設計師注入良好的習慣。我這裡使用的教材是華章的python入門經典。沒有使用idel,因為我覺得作為編譯器,jetbrains的系列...

extjs 我的第乙個ext程式 grid

背景 只想寫乙個很簡單的grid介面,不與後台互動 涉及兩個檔案 grid.html,grid.js grid.js ext.onready function 定義資料結構,即資料庫字段 var afields id name email age 資料集 var adatas 1 name1 nam...

pygtk入門 1 第乙個視窗

usr bin env python import pygtk pygtk.require 2.0 import gtk class base def init self self.window gtk.window gtk.window toplevel self.window.show def ...