《ExtJS2 0實用簡明教程》之Fit布局

2021-08-30 12:10:38 字數 675 閱讀 8270

column列布局由ext.layout.columnlayout類定義,名稱為column。列布局把整個容器元件看成一列,然後往裡面放入子元素的時候,可以通過在子元素中指定使用columnwidth或width來指定子元素所佔的列寬度。columnwidth表示使用百分比的形式指定列寬度,而width則是使用絕對象素的方式指定列寬度,在實際應用中可以混合使用兩種方式。看下面的**:

ext.onready(function(),,,

] }); });

上面的**在容器元件中放入了四個元素,在容器元件中形成4列,列的寬度分別為100,200,100及剩餘寬度,執行結果如下圖所示。

再看使用fit布局後的**,如下:

ext.onready(function()]}

);});

上面的**指定父容器使用fit布局,因此子將自動填滿整個父容器。輸出的圖形如下:

如果容器元件中有多個子元素,則只會顯示乙個元素,如下面的**:

ext.onready(function(),]}

);});

輸出的結果如下:

如果不使用布局fit,**如下:

ext.onready(function(),]}

);});

輸出的結果如下圖所示:

《ExtJS2 0實用簡明教程》之獲得ExtJS

圖1 2 extjs發布包目錄 adapter 負責將裡面提供第三方底層庫 包括ext自帶的底層庫 對映為ext所支援的底層庫。build 壓縮後的ext全部原始碼 裡面分類存放 docs api幫助文件。exmaples 提供使用extjs技術做出的小例項。resources ext ui資源檔案...

ExtJS2 0實用簡明教程》之布局概述

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

ExtJS2 0實用簡明教程 Column列布局

column列布局由ext.layout.columnlayout類定義,名稱為column。列布局把整個容器元件看成一列,然後往裡面放入子元素的時候,可以通過在子元素中指定使用columnwidth或width來指定子元素所佔的列寬度。columnwidth表示使用百分比的形式指定列寬度,而wid...