亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

Ext2.0布局類初探

系統 2437 0

Ext2.0 正式版雖然還沒出來,但是官網上的例程還是令人興奮不已。內存泄漏的問題應該是解決了,布局類更新了,增加了新的東西, grid 的功能更加強大, tabs 也增加了循環按鈕,還增加了類似 delphi action manager action 類,在反映速度上也有一定的提升,這些新功能確實很令人振奮,可惜正式版還沒出來, API 也還沒出來,所以想立刻使用 2.0 版做開發的,會有一定的困難。本文的目的就是和大家一起探討一下 2.0 版的布局類,希望在 API 沒有出來之前對大家的開發有所幫助,還有就是希望大家提供一些反饋意見,以便完善這篇文章。多謝!

Ext2.0 版的布局類,最大的改動是:

<!--[if !supportLists]--> 1、 <!--[endif]--> 取消了內容面板 contentPanel 類,代替的是 panel 類的。 panel 類中,會根據 layout 的定義不同自動生成布局樣式,這樣就不需要自己再去定義布局了,只要在 panel 定義中加入布局的定義就可以實現布局了。 panel 類派生出 formpanel 、 girdpanel 、 tabpanel 、 treepanel 等子類,各子類中已根據自己的需要固定了不同的布局類型,例如在創建 formpanel 時會創建 formlayout 。

<!--[if !supportLists]--> 2、 <!--[endif]--> 增加 Container 類,并派生出 viewpoint 類作為全局布局的接口。

<!--[if !supportLists]--> 3、 <!--[endif]--> 取消了 layoutManger 類,增加了 ContainerLayout 類,而 borderLayout 類的父類也修改為 ContainerLayout

<!--[if !supportLists]--> 4、 <!--[endif]--> BasicLayoutRegion 類也取消了,因此它的子類 LayoutRegion 以及 LayoutRegion 類的子類 SplitLayoutRegion 都取消了。代替的是在 borderLayout 類下增加了 Region 類和 SplitRegion 類。

<!--[if !supportLists]--> 5、 <!--[endif]--> 在區域內再劃分區域的 NestedLayoutPanel 類也根據框架的改變而取消了。至于如何再劃分區域,請繼續閱讀本文。

<!--[if !supportLists]--> 6、 <!--[endif]--> 增加了 AccordianLayout 、 AnchorLayout 、 CardLayout 、 CoulmnLayout 、 FitLayout 、 FormLayout 、 TableLayout 等新的類。

<!--[if !supportLists]--> 7、 <!--[endif]--> 原有的用 contentPanel 可以做出的 tab 效果,現在則需要使用 tabpanel 實現。

隨著類的繼承關系的改變,布局的創建方法也做了很大的變動。我的看法是做這樣大的框架的修改主要原因解決內存泄漏的問題。

我們先來了解一下新的布局類的繼承關系:

<!--[if gte vml 1]><v:shapetype id="_x0000_t75"coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe"filled="f" stroked="f"><v:stroke joinstyle="miter" /><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0" /><v:f eqn="sum @0 1 0" /><v:f eqn="sum 0 0 @1" /><v:f eqn="prod @2 1 2" /><v:f eqn="prod @3 21600 pixelWidth" /><v:f eqn="prod @3 21600 pixelHeight" /><v:f eqn="sum @0 0 1" /><v:f eqn="prod @6 1 2" /><v:f eqn="prod @7 21600 pixelWidth" /><v:f eqn="sum @8 21600 0" /><v:f eqn="prod @7 21600 pixelHeight" /><v:f eqn="sum @10 21600 0" /></v:formulas><v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" /><o:lock v:ext="edit" aspectratio="t" /></v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:290.25pt;height:248.25pt'><v:imagedata src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/03/clip_image001.jpg"o:title="Ext2" /></v:shape><![endif]--><!--[if !vml]--> Ext2.0布局類初探 <!--[endif]-->

從圖中我們可以看出 Layout 類獨立出來了,不再象 1.1 版那樣繼承自 Observable 類了。估計這樣修改是未來避免內存泄漏的(猜的,水平有限,所以請多見諒)。

下面我們來看看各個類的情況:

<!--[if !supportLists]--> 1、 <!--[endif]--> Observable

    
      Observable
    
    類和
    
      1.1
    
    版的相同,沒有修改,是一個抽象基類,為發布事件提供一個公共接口,其子類可通過
    
      
        addEvents
      
      方法
    
    增加事件。
    
      API
    
    可以直接參考
    
      1.1
    
      API
    
    。
  

<!--[if !supportLists]--> 2、 <!--[endif]--> Component

Component 類和 1.1 版的相同,沒有修改,是 Ext 組件的主要基類。 API 可以直接參考 1.1 API

<!--[if !supportLists]--> 3、 <!--[endif]--> BoxComponent

BoxComponent 類和 1.1 版的相同,沒有改變,是需要使用盒子容器的可視化 Ext 組件的基類。 API 可以直接參考 1.1 API 。

<!--[if !supportLists]--> 4、 <!--[endif]--> Container

Container 類是新增加的一個基類。其主要作用是管理容器里的布局對象,負責布局對象的創建與摧毀。它通過一個 JSON 結構( Ext.Container.LAYOUTS={} )來保存布局對象,通過 layout 屬性值和 items JSON 定義自動創建這些布局對象,并通過一個 JSON 結構記錄這些布局對象,這樣就可在面板對象生命周期內對其進行管理,防止布局中面板關閉時發生內存泄漏。 Container 類設置了布局中默認面板為 panel ,如果需要使用其它 panel ,則需要在 items 中進行定義。

<!--[if !supportLists]--> 5、 <!--[endif]--> Viewport

Viewport 類也是新增的一個類,是 Container 類的子類。 Viewport 類其實就是將頁面 body 作為一個 Ext 對象,然后通過該對象管理 body 上的布局對象。 Viewprot 類的默認面板是 panel 面板,因為 panel 并沒有指定特定的布局,所以要通過 layout 屬性指定布局,并在 items 中定義的面板對象定義中加入該布局的定義。 Layout 屬性可選的范圍值為 container 、 anchor form 、 border 、 column 、 fit accordion 、 card table 。

<!--[if !supportLists]--> 6、 <!--[endif]--> Panel

Panel 類是新增的面板基類。其基本的屬性、方法和事件與 1.1 版的 contentPanel 相似, API 可參考 contentPanel API Panel 類和 contentPanel 類最大的不同是可以根據 layout 屬性自動生成相應的布局,而不是和 1.1 版那樣定義布局,然后加入 contentPanel 對象。

panel 類中增加了一個很好的功能,就是工具欄定義不再是 contentPanel toolbar 了,而是劃分成了 tbar bbar tbar 就是 top bar ,在面板頂部的工具欄, babr bottom bar ,在面板底部的工具欄,這樣就不用再為 toolbar 的位置犯難了,呵呵。

panel 類也不再象 contentPanel 那樣本身就是一個 tab 面板,如果需要 tab 方式的面板,則需要用到新的 tabPanel 來定義。

<!--[if !supportLists]--> 7、 <!--[endif]--> ContainerLayout

ContainerLayout 類是新增的一個容器布局類,是其它布局的類的基類,其作用主要是為子類提供基本的屬性、方法和事件: monitorResize( 是否 檢測窗口大小的改變 ) 、 activeItem (當前活動的對象)、 layout (子布局的類型)、 onLayout (顯示布局事件)、 isValidParent (是否有有效的父節點)、 renderAll (輸出內容)、 renderItem (輸出某個子對象)、 onResize (大小改變時間)、 setContainer (設置容器)和 parseMargins (取消外補丁)。

<!--[if !supportLists]--> 8、 <!--[endif]--> B orderLayout

BorderLayout 類保持了 1.1 版的屬性、事件和方法,只是其繼承對象變成了 ContainerLayout 類。雖然其內部運作方法不同,但是還是可以根據 1.1 版的 API 去定義 BorderLayout 對象。

<!--[if !supportLists]--> 9、 <!--[endif]--> anchorLayout 類和 formLayout

anchorLayout 類是新增的類,它的源代碼很簡單,主要功能就是定義一個顯示內容的空白區域。具體的應用看 layout 下的 anchor.html 文件看不出有什么特點,呵呵。

formLayout 也是新增的類,繼承于 anchorLayout ,主要是為 formPanle 服務,創建 formPanel 時創建該布局,主要屬性為 labelSeparator (標題分隔符)。

<!--[if !supportLists]--> 10、 <!--[endif]--> ColumnLayout

ColumnLayout 類是新增的類,替代 1.1 版的 Ext.form.Column 。代碼書寫方式比以前更簡單更方便。

<!--[if !supportLists]--> 11、 <!--[endif]--> FitLayout 類、 Accordion 類和 CardLayout

FitLayout 也是新增的類,主要是創建一個適應容器大小的布局區域。沒什么特殊的屬性和方法。

Accordion 類是 FitLayoutd 類的子類,主要是創建類似 outlook bar 的效果,這是一個令人相當興奮的功能,很多人估計早就盼望有這東西了。比使用 Ext.ux.Accordion 會方便很多。

CardLayoyt 也是一個新增的類,但是沒有例子,所以不知道主要效果是什么。

<!--[if !supportLists]--> 12、 <!--[endif]--> tableLayout

tableLayout 類也是新增的類,主要目的是通過一個表格的形式劃分區域。

其主要定義是通過“ layoutConfig: {columns:3} ”設置列數,通過“ defaults: {frame:true, width:200, height: 200} ”來設置每個 Item 的寬度和高度。每個 item 可通過類似 td 定義的方式設置設置格式,例如設置 rowspan 合并行, colspan 合并列等。

Ext 2.0 版要實現一個布局的主要代碼就是通過 layout 設置布局的類型,然后定義 items 的面板對象,如果在內部再劃分布局,實現 1.1 NestedLayoutPanel 的功能,只要在內部在面板內部再定義 items 就行了,比以前的代碼書寫方式更方便,更直觀了。下面我們來分析一下 complex.html 這例子的定義。

例子首先創建了一個 Ext.Viewport 進行全界面布局,布局使用的是 bordeLayout layout:'border' )。在界面中總共劃分了 north south wese 、 east center 五個大區域。

north 區域使用了一個 Ext.BoxComponent 組件作為該區域的面板,它的 html 元件是 id 為“ north ”的 div el: 'north' ),高度是 32 height:32 )。

new Ext.BoxComponent({ // raw

region:'north',

el: 'north',

height:32

}),{

south 區域使用了 panel 作為區域的面板,因為 Viewprot 的默認面板類型為 panel ,所以不用 new Ext.Panel 的方式創建面板,直接書寫定義代碼就行了。在代碼中,定義了內容的 html 元件是 id 為“ south ”的 div contentEl: 'south' ,帶分隔控制條( split:true ),初始高度是 100 height: 100 ,不再使用以前的 initialSize ),移動改變的尺寸最小高度為 100 minSize: 100 ),最大高度為 200 maxSize: 200 ),允許折疊( collapsible: true ),標題欄顯示‘ South ’( title:'South' ),內補丁為( margins:'0 0 0 0' )。

}),{

region:'south',

contentEl: 'south',

split:true,

height: 100,

minSize: 100,

maxSize: 200,

collapsible: true,

title:'South',

margins:'0 0 0 0'

}, {

east 區域同樣也是用 panel 作為其面板,標題為“ East Side ”,允許折疊,有分隔控制條,初始寬度是 225 ,最小寬度為 175 ,最大寬度為 400 ,內補丁為“ 0 5 0 <chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="0" unitname="”">0<span lang="EN-US" style=""><span lang="EN-US">”</span></span></chmetcnv> 。在該區域還 劃分了 一個用 fitLayout 作為布局的區域( layout:'fit' ),這里就不再象 1.1 版那樣用 NestedLayoutPanel 再劃分區域會出現的問題了。在 fitLayout 里放置了一個 tabpanel 的面板,面板的沒有邊,當前激活的 tab 是第 2 個(注意 tab index 是從 0 開始的), tab 標簽放置在底部,該 tab 定義了兩個標簽頁。

}, {

region:'east',

title: '<place w:st="on">East Side</place>',

collapsible: true,

split:true,

width: 225,

minSize: 175,

maxSize: 400,

layout:'fit',

margins:'0 5 0 0',

items:

new Ext.TabPanel({

border:false,

activeTab:1,

tabPosition:'bottom',

items:[{

html:'<p>A TabPanel component can be a region.</p>',

title: 'A Tab',

autoScroll:true

},

new Ext.grid.PropertyGrid({

title: 'Property Grid',

closable: true,

source: {

"(name)": "Properties Grid",

"grouping": false,

"autoFitColumns": true,

"productionQuality": false,

"created": new Date(Date.parse('<chsdate w:st="on" isrocdate="False" islunardate="False" day="15" month="10" year="2006">10/15/2006</chsdate>')),

"tested": false,

"version": .01,

"borderWidth": 1

}

})]

})

},{

west 區域也是用 panel 作為面板, html 元件為“ west-panel ”,顯示標題為“ West ”,有分隔控制條,初始寬度為 200 ,最小寬度為 175 ,最大寬度為 400 ,允許折疊,內補丁為“ 0 0 0 <chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="5" unitname="”">5<span lang="EN-US" style=""><span lang="EN-US">”</span></span></chmetcnv> 在區域內部 使用 accordion 布局劃分兩個區域。這個內部布局變動會顯示動畫( layoutConfig:{animate:true} )。

},{

region:'west',

id:'west-panel',

title:'West',

split:true,

width: 200,

minSize: 175,

maxSize: 400,

collapsible: true,

margins:'0 0 0 5',

layout:'accordion',

layoutConfig:{

animate:true

},

items: [{

contentEl: 'west',

title:'Navigation',

border:false,

iconCls:'nav'

},{

title:'Settings',

html:'<p>Some settings in here.</p>',

border:false,

iconCls:'settings'

}]

},

center 區域和 1.1 版的一樣,是必需使用。在這里 center 區域不再使用默認的 panel 作為面板了,而是使用 tab 面板作為其面板( new Ext.TabPanel )。在代碼里定義了兩個標簽頁,激活的是第 1 個標簽頁。

new Ext.TabPanel({

region:'center',

deferredRender:false,

activeTab:0,

items:[{

contentEl:'center1',

title: 'Close Me',

closable:true,

autoScroll:true

},{

contentEl:'center2',

title: 'Center Panel',

autoScroll:true

}]

})

以上是我關于 2.0 版的布局類的一些理解和分析,因水平有限,難免會有錯漏和偏差,希望大家原諒,多謝!

Ext2.0布局類初探


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦?。?!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 国产精品久久亚洲不卡动漫 | 黄色片网站观看 | 欧美高清视频www夜色资源 | 国产精选在线播放 | 亚洲欧美激情精品一区二区 | 国产国产精品四虎视频精品 | 91精品国产人成网站 | 精品无码久久久久久国产 | 韩国爱情片免费大全 | 久久国产精品久久精 | 天天干天天玩天天操 | 日韩欧美高清一区 | 国产精品视频一区二区猎奇 | 99精品国产自在现线观看 | 2020国产成人精品免费视频 | 女bbbbxxxx毛片视频0 | 国产区一区 | 色激情五月 | 午夜亚洲 | 免费国产之a视频 | 国产亚洲精品一区二区久久 | 老司机深夜影院入口aaaa | 99综合| 久青草国产手机在线观 | 国产精品人成福利视频 | 婷婷亚洲国产成人精品性色 | 中文亚洲日韩欧美 | 国产在线观看不卡 | 中文字幕日韩国产 | 99精品久久精品一区二区 | 在线观看人成网站深夜免费 | 婷婷综合久久狠狠色99h | 青青国产成人久久91 | 四虎4hu影库永久地址 | 操美女的穴 | 国产欧美日韩图片一区二区 | 欧美洲精品亚洲精品中文字幕 | 日本久久精品视频 | 亚洲一区精品视频在线 | 亚洲第一成年网 | 天天操天天摸天天射 |