ExtJS4學習筆記(一)---window的建立
阿新 • • 發佈：2019-01-07
小弟最近剛接觸Extjs4，將蒐集到的中文學習資料整理如下：
本文轉載至：http://www.mhzg.net/a/20114/201142910380227.html
Extjs4,建立Ext元件有了新的方式，就是Ext.create(....)，而且可以使用動態載入JS的方式來加快元件的渲染，我們再也不必一次載入已經達到1MB的ext-all.js了，本文介紹如何在EXTJS4中建立一個window。
編者注（修正於2011-7-8）：程式碼中所有Ext.Window應該是Ext.window.Window，如果按Ext.Window的話，在某些瀏覽器中顯示不出Window視窗，切記。。。。
程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>視窗例項</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../bootstrap.js"></script> <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script> <script type="text/jscript"> Ext.require('Ext.window'); Ext.onReady(function(){ Ext.create('Ext.Window',{ width:400, height:230, //X,Y標識視窗相對於父視窗的偏移值。 x:10, y:10, plain: true, //指示標題頭的位置,分別為 top,bottom,left,right,預設為top headerPosition: 'left', title: 'ExtJS4 Window的建立，頭在左' }).show(); Ext.create('Ext.Window',{ width:400, height:230, x:500, y:10, plain: true, //指示標題頭的位置,分別為 top,bottom,left,right,預設為top headerPosition: 'right', title: 'ExtJS4 Window的建立，頭在右' }).show(); Ext.create('Ext.Window',{ width:400, height:230, x:10, y:300, plain: true, //指示標題頭的位置,分別為 top,bottom,left,right,預設為top headerPosition: 'bottom', title: 'ExtJS4 Window的建立，頭在底' }).show(); var win = Ext.create('Ext.Window',{ width:400, height:230, x:500, y:300, plain: true, //指示標題頭的位置,分別為 top,bottom,left,right,預設為top headerPosition: 'top', title: 'ExtJS4 Window的建立' }); win.show(); }); </script> </head> <body> </body> </html>