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的容器元件包含乙個...