ExtJS基礎第六講學習 布局方式

2021-08-31 11:41:34 字數 3504 閱讀 3339

第六講:extjs布局方式

示例一:兩個巢狀子面板。

ext.onready(

function

() ),

new

ext.panel()

] })

} );

containerlayout容器布局

ext.layout.containerlayout提供了所有布局類的基本功能,它沒有視覺化的外觀,只是提供容器作為布局的基本邏輯,這個類通常被擴充套件而不通過new關鍵字直接建立。

如果面板(panel)沒有指定任何布局類,則它將會作為預設布局來建立

fit布局,用於巢狀布局時使之自適應容器大小,通常用於選單,表單等的巢狀布局。 fit布局顧名思義,fit即「自適應」的意思,通常使用在我們進行巢狀布局的時候使用。

示例二:使用fit布局。

ext.onready(

function

() ),

new

ext.panel()

] })

} );

accordion布局由類ext.layout.accordion定義,名稱為accordion,表示可折疊的布局,也就是說使用該布局的容器元件中的子元素是可折疊的形式。

示例三:accordion布局

ext.onready(

function

() ),

new

ext.panel()

] })

} );

card布局由ext.layout.cardlayout類定義,名稱為card,該布局將會在容器元件中某一時刻使得只顯示乙個子元素。可以滿足安裝嚮導、tab選項板等應用中面板顯示的需求。

示例四:card布局

ext.onready(

function

() ),

new

ext.panel()

], buttons:[

new

ext.button(),

new

ext.button()

] })

function

changepage(btn)

}else

} panel.

layout

.setactiveitem(

'ext-comp-100'

+index);

} });

anchorlayout是最簡單的布局管理器,它只是將元素按照配置的屬性在元素容器中進行定位。

示例五:anchor布局之按比例顯示子面板

ext.onready(

function

() ),

new

ext.panel()

] })

} );

示例六:設定子面板偏移父面板的偏移量

ext.onready(

function

() )

] })

} );

absolutelayout布局擴充套件自ext.layout.anchorlayout布局,對應面板布局(layout)配置項的名稱為absolute。它可以根據子面板中配置的x/y座標進行定位,並且座標值支援使用固定值和百分比兩種形式。

示例七:使用固定值進行定位。

ext.onready(

function

() )

] })

} );

示例八:使用百分比進行定位。

ext.onready(

function

() )

] })

} );

form布局由類ext.layout.formlayout定義,名稱為form,是一種專門用於管理表單中輸入欄位的布局,這種布局主要用於在程式中建立表單字段或表單元素等使用。

ext.onready(

function

() ),

new

ext.form.textfield()

] })

} );

省略寫法

ext.onready(

function

() , ]

}) }

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

ext.onready(

function

() ,

, , ,

]}) }

); ext.layout.tablelayout對應面板布局layout配置項的名稱為table。這種比較允許你非常容易的渲染內容到html**中,可以指定列數(columns),跨行(rowspan),跨列(colspan),可以建立出複雜的**布局。必須使用layoutconfig屬性來指定屬於此布局的配置,table布局僅有唯一的布局配置項columns,而包含在其中的子面板會具有rowspan和colspan兩個配置項!

ext.onready(

function

() ,

width:300,

height:300,

title:

"我是panel"

, autoscroll:true

, collapsible:true

, items: [

, ,, , ]

}) }

); 這個東西南北中的布局方式,和easyui中我遇到的乙個專案很很相似!

border布局由類ext.layout.borderlayout定義,布局名稱為border。該布局把容器分成東南西北中五個區域,分別由east,south, west,north, cente來表示,在往容器中新增子元素的時候,我們只需要指定這些子元素所在的位置,border布局會自動把子元素放到布局指定的位置。

ext.onready(

function

() ,

,,,]

}) }

);

python基礎知識學習第六天

定義乙個函式 定義乙個由自己想要功能的函式,以下是簡單的規則 一般格式如下 def 函式名 引數列表 函式體1 2預設情況下,引數值和引數名稱是按函式宣告中定義的順序匹配起來的。函式呼叫 給了函式乙個名稱,指定了函式裡包含的引數,和 塊結構。這個函式的基本結構完成以後,你可以通過另乙個函式呼叫執行,...

SQL基礎教程學習第六站 資料更新

僅用於記錄學習,歡迎批評指正,共同交流,共同進步,大神勿噴 sql基礎教程學習第二站 資料庫基本知識 sql基礎教程學習第三站 建立表 sql基礎教程學習第四站 查詢基礎 sql基礎教程學習第五站 聚合和排序 sql基礎教程學習第六站 資料更新 sql基礎教程學習第七站 複雜查詢 sql基礎教程學習...

Java開發體系學習之基礎(六)方法

1.方法 解決辦法 概念 定義格式 修飾符 返回值 函式名 形參列表 形參列表 變數型別 變數名 注意事項 定義在類中和其他方法並列 形參中的變數也是區域性變數 呼叫記憶體圖 當方法被呼叫的時候就會入棧,方法中的區域性變數就會存在棧中 1.main方法被jvm呼叫入棧 2.執行 getarea 4,...