Ext布局學習整理

2021-06-06 02:15:48 字數 2305 閱讀 5055

ext布局學習整理

相信我,布局這個東西如果不懂原理自己摸索真的能把人逼瘋的……

ext.layout.containerlayout

ext.layout.anchorlayout

ext.layout.absolutelayout

ext.layout.formlayout

ext.layout.borderlayout

ext.layout.columnlayout

ext.layout.fitlayout

ext.layout.accordion

ext.layout.cardlayout

ext.layout.tablelayout

ext.container

ext.viewport

ext.panel

ext.tabpanel

ext.tip

ext.window

ext.form.fieldset

ext.form.formpanel

ext.tree.treepanel

ext.grid.gridpanel

ext.grid.editorgridpanel

ext.grid.propertygrid

以上兩棵繼承樹結合在一起便構成了ext中完成的布局系統。只要container子類都可以使用layout對內部items進行布局。

下面是一些分類整理:

fitlayout

可以自動適應頁面大小變化,填充整個頁面。

注意幾點:

1,使用了laytou:』fit』元件的items只能放乙個子元件,如果放了多了子元件,那麼也只有第乙個子元件會起作用。

2,items中子元件裡不能使用autoheight:true引數,這個引數會重新計算子元件的高度,使得fitlayout失效,最後得到的結構將無法填充整個頁面。

borderlayout

它將整個布局區域分為東、西、南、北、中五個部分,除了中間區域以外其他區域都是可以省略的。如果items缺少了region:』center』就會報錯,程式中斷子元件頁面上無法顯示。

其中north和south分為位於頁面的最上方和最下方,只能設定高度;同理west和east只能設定寬度;center的大小是在其他四個部分設定好以後自動計算出來的,唯一不可省略的部分。

accordion

將與布局有關的配置項寫在layoutconfig中,隨後在進行布局時會自動賦給對應的layout例項,並產生作用。

titlecollapse:預設true,單擊標題就可以摺疊子面板;如果設定為false,就只能夠單擊標題右邊的圖示摺疊子面板。

animate:展開和摺疊時是否使用動畫效果。

activeontop:預設false,執行展開和摺疊操作後,子面板的順序不會改變;如果設定為true,展開的子面板總是放在最上面。

cardlayout

這種布局可以看作是一疊卡片,可以把中間的卡片抽出來放到最上面,可是每次只能看到一張卡片。這種布局一般用來實現操作嚮導。

anchorlayout

既可以為items中每個元件指定與總體布局大小的差值,也可以設定乙個比例使子元件可以根據整體自行計算本身的大小。提供三種配置方式:

1 使用百分比設定元件元件佔整體長寬比例。

2 直接設定與右側和底部的邊距。

3 side方式,前提是父元件和子元件都沒有設定好width,height和anchorsize屬性。anchorlayout會記錄布局整體和子元件在大小上的差值,為以後的調整布局提供依據。此方法很少用到。

absolutelayout

此布局繼承自anchorlayout,解決了anchor不能對元件進行直接絕對定位的問題。

formlayout

此布局也繼承自anchorlayout,ext.form.formpanel使用它作為預設的布局方式。

columnlayout

items中每個子元件的columnwidth引數是0到1之間的小數,表示每個元件在整體中所佔的百分比,總和是1,否則頁面會出現沒有填滿或者混論的情況。

tablelayout

此布局並沒有特殊功能,只是提供了一種將傳統的**布局方式與ext布局方式相結合的方法。

Ext學習 布局介紹

1.目標 了解extjs中的關於布局和組建的相關原理,並學習相關的布局方式 2.內容 1.布局和元件的相關原理 2.常見的布局方式 3.學習流程 1.首先應該學習一下布局和元件的相關知識。推薦文章 2.最原理的東西有了了解之後,學習一下總體布局方式 推薦文章 3.常用layout介紹 1.fit布局...

ext方法整理

清空panel等後面空白屬性 basecls x plain 有關於是否button ext.msg.confirm 提示 你確定要刪除該使用者嗎?function button 獲取grid中的選中行 並且從行中取出元素 cellselectionmodel sm this.gridpanel1....

EXT布局的概述

所謂布局就是指容器元件中子元素的分布 排列組合方式。ext的所有容器元件都支援而局操作,每乙個容器都會有乙個對應的布局,布局負責管理容器元件中子元素的排列 組合及渲染方式等。extjs的布局基類為ext.layout.containerlayout,其它布局都是繼承該類。extjs的容器元件包含乙個...