Ext.js3.4版本學習1

實習的第一份工作做得是一個數據分析平臺，前端用到了Ext.js，一開始按照w3cSchool的教程學習，發現怎麼都出不來界面，也不報錯，出來了也都是不正確的顯示，後來發現是項目組用的版本太低，3.4版本，在網上找了一些古老的教程，配合着項目組已有的代碼，自己摸索學習。

新建一個html的項目，導入樣式表和Ext庫，分別是：

/resources/css/ext-all-notheme.css

/resource/theme/platform/inuse/platform.css

/resource/theme/user/special.css

/adapter/ext/ext-base.js

/ext-all.js

注意：ext-base.js要在ext-all.js前導入

Ext.js在寫前端時感覺雖然界面醜了點，但是真的很迅速。

部分js的代碼：

Ext.onReady(function () {
            var north = new Ext.Panel({
                id:'title',
                html : '<div>標題</div>',
                bodyStyle: 'background:#222222;padding:20px',
                height : 60,
		width : 200,
                region : 'north',
                split : false                                    
            });

Ext.onReady（）方法將在Ext JS準備好渲染Ext JS元素時調用。

Ext.Panel是Ext JS中用於創建面板的預定義類。

id:該div的id

html：要顯示的html內容

bodyStyle:該內容的css樣式

height、width：高度和寬度

region：該div的定位（south/north/west/center）

draggable:可否拖動

這就是Ext.js的基本使用方式，剛開始接觸，一點頭緒都沒有，慢慢來吧。