收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > extjs > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

ExtJs 學習筆記 Hello World!第1/2頁

在了解基礎后,可能會用Ext+ajax開發一個簡單的小項目,會一點一滴的講解項目開發過程,希望能給大家帶來收獲!因為我本人也在學習這個框架,所以對文章有什么建議請提出,這樣可能會讓我學到更多。
查看圖片

看到這幅圖,你可能認為是某個軟件,或者是Flash、Flex、silverlight等等,但這是javascript+Css實現的。

查看圖片

在看這樣式與效果,如果加在自己的項目里,用戶視覺與操作的體驗應該會很爽吧。 還有更多的特效就不一一截圖了。
下面開始說一下這個組件,ExtJs是一個不錯的Ajax框架,是用javascript寫的。效果什么樣上面也看到了。我們能夠把ExtJs應用到任何web開發語言中。他的客戶端效果是非常強大的,同時Ext也提供了與服務器交互的機制,用起來非常方便,Ext與服務器交互的文章后面會寫到。
在應用之前我們需要先獲得這個框架,可以去 http://extjs.com/products/extjs/download.php 官網下載,開源的。下載完畢解壓后會得到如下目錄。
查看圖片

adapter:負責將里面提供的第三方底層庫(包括Ext自帶的)映射為Ext所支持的底層庫。
build:壓縮后Ext全部源碼(分類存放)
docs:API幫助文檔
examples:一些Extjs做出的效果示例
resources:Ext UI資源文件目錄,css、圖片都在這
source:無壓縮Ext全部的源碼
ext-all.js :壓縮后Ext全部源碼,關鍵文件啊,500多K
ext-all-debug.js:無壓縮Ext全部源碼(用于調試)
ext-core.js :核心組件,包括source/core下所有類
ext-core-debug.js:無壓縮核心組件

接下來將在一個純靜態的html頁面中做測試,如果想應用ExtJs首先需要導入3個腳本文件一個樣式表

查看圖片 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
查看圖片 <script src="extjs/ext-base.js" type="text/javascript"></script>
查看圖片 <script src="extjs/ext-all.js" type="text/javascript"></script>
查看圖片 <script src="extjs/ext-lang-zh_CN.js" type="text/javascript"></script>

這里要說明一下,在Extjs文件加載完畢后,會執行Ext.onReady中指定的函數,我們可以用簡單的代碼做一個測試。
<script language="javascaript">
function start(){
Ext.MessageBox.alert("ok","Extjs框架已加載!");
}
Ext.onReady(start);
</script>
<script language="javascaript">
Ext.onReady(
function{
Ext.MessageBox.alert("ok","Extjs框架已加載!");
}
);
</script>
查看圖片

兩種寫法可以實現同一個效果
注意Ext.onReady(start)不需要加()
Ext.MessageBox.alert("ok","Extjs框架已加載!");用于輸出一個對話框。
Ext.MessageBox.alert('標題','彈出內容');它也可以寫成Ext.Msg.alert('','');
運行效果如下
查看圖片
一個alert對話框可以輕松用Extjs來實現了。prompt('','');在Extjs中同樣存在相對應用法。


function Prompt(){
Ext.MessageBox.prompt(
"Input",
"input a number:",
function(button,text){
if(button=="ok")
Ext.MessageBox.alert("number","the number is "+text);
else
Ext.MessageBox.alert("sorry","the number is null.");
}
);
}
這個語法稍有麻煩, Ext.MessageBox.prompt('標題','說明:',完畢后執行的函數); 執行的函數需要有兩個參數,button與text。button用來判斷用戶選擇了取消還是確定選項。確定則為該值為'ok'。text為輸入的文字。

查看圖片
只列舉兩個小例子做說明,還有confim等用法都相似。
還有一個比較常用,也比較容易理解的Window框。
查看圖片
這個漂亮框框可以拖動,點X可以關閉。
用法如下:

function Window(){
var win=new Ext.Window({title:"hello",width:300,height:200,html:'This is the body.'});
win.show();
}

這里就需要創建一個Ext.Window的對象,調用show方法進行顯示。
Ext.Window在構造函數中可以傳入很多參數,這里只用到了title、width、height和body區域顯示的內容。
new Ext.Window({title:"",width:300,height:200,html:'This is the body.'});
title:"" 設置標題
width:300 寬度
height:200 高度
html:'xxxx' 可以放置任何html代碼

ExtJs 學習筆記基礎篇 Ext組件的使用第1/2頁
天介紹一下Ext中組件舉幾個簡單的例子做說明。注意:文章內容有些摘自本人學習過程中看到的資料。Ext2.0對框架進行了非常大的重構,其中最重要的

ExtJs 學習筆記 Ext.Panle Ext.TabPanel Ext.Viewport第1/3頁
通過此文能學習到如下內容1.創建一個簡單的面板Ext.Panel2.制作一個可以拖動的面板Ext.Panel3.使用選項卡面板3.使用Ext.Viewport搭一個簡單布局(用一個小例

javascript Ext JS 狀態默認存儲時間
Ext.state.CookieProvider=function(config){Ext.state.CookieProvider.superclass.constructor.call(this);this.path="/";this.expires=newDate(newDate().getTime()+(1000*60*60*24*7));//7daysthis.domain=null;t

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
捕鱼大师辅助软件 江苏快三玩法技巧规律 山西泳坛夺金开奖结果 海南体彩41 互联网金融产品主要有哪几类 浙江体彩6十1走势图 皇家极速赛车下载app 河南十一选五开奖分布图 什么叫私募基金 百家乐作弊 云南十一选五中奖规则 北京pk拾稳赚计划软件 山西快乐十分开奖结果50 2020年最新开奖 股票大盘咋看 一分11选5网站 中国股市分几个市场