當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

ExtJS中layout的12种布局风格

發(fā)布時間：2025/3/15 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 ExtJS中layout的12种布局风格小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

總覽

extjs的容器組件都可以設(shè)置它的顯示風格，它的有效值有 1.?absolute,2. accordion, 3. anchor, 4. border, 5. card, 6. column, 7. fit,8. ?form 9.table.? 一共9種。

另外幾種見：? http://www.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html? 里面有詳細的例子。

1. absolute?顧名思義，在容器內(nèi)部，根據(jù)指定的坐標定位顯示?

This is a simple layout style that allows you to position items within a container using CSS-style absolute positioning via XY coordinates.

Sample Config:

layout: 'absolute', items:[{title: 'Panel 1',x: 50,y: 50,html: 'Positioned at x:50, y:50' }]

2. accordion 這個是最容易記的，手風琴效果

Displays one panel at a time in a stacked layout. No special config properties are required other than the layout — all panels added to the container will be converted to accordion panels.

3. anchor?這個效果具體還不知道有什么用，就是知道注意一下??

1.容器內(nèi)的組件要么指定寬度，要么在anchor中同時指定高/寬，??

2.anchor值通常只能為負值(指非百分比值)，正值沒有意義，??
3.anchor必須為字符串值

Provides anchoring of contained items to the container's edges. This type of layout is most commonly seen within FormPanels (or any container with a FormLayout) where fields are sized relative to the container without hard-coding their dimensions.

In this example, panels are anchored for example purposes so that you can easily see the effect. If you resize the browser window, the anchored panels will automatically resize to maintain the same relative dimensions.

<!DOCTYPE html> <html><head><title>hello-extjs</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" /><script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext-3.4.1/ext-all.js"></script><script type="text/javascript">Ext.onReady(function() { var panel1 = new Ext.Panel({ title: "panel1", height: 100, anchor: '-50', html: "高度等于100，寬度=容器寬度-50" });var panel2 = new Ext.Panel({title: "panel2",height: 100,anchor: '50%', html: "高度等于100,寬度=容器寬度的50%" }); var panel3 = new Ext.Panel({ title: "panel3", anchor: '-10, -250', html: "寬度=容器寬度-10,高度=容器寬度-250" }); var win = new Ext.Window({ title: "Anchor Layout", height: 400, width: 400, plain: true, layout: 'anchor', items: [panel1, panel2,panel3] }); win.show(); }); </script></head><body>This is my HTML page. <br><div id="paneldiv"></div></body> </html>

4. border?將容器分為五個區(qū)域:east,south,west,north,center

This Layout Browser page is already a border layout, and this example shows a separate border layout nested within a region of the page's border layout. Border layouts can be nested with just about any level of complexity that you might need.

Every border layout?must?at least have a center region. All other regions are optional.

Sample Config:

layout:'border', defaults: {collapsible: true,split: true,bodyStyle: 'padding:15px' }, items: [{title: 'Footer',region: 'south',height: 150,minSize: 75,maxSize: 250,cmargins: '5 0 0 0' },{title: 'Navigation',region:'west',margins: '5 0 0 0',cmargins: '5 5 0 0',width: 175,minSize: 100,maxSize: 250 },{title: 'Main Content',collapsible: false,region:'center',margins: '5 0 0 0' }]

5. card (TabPanel)

<!DOCTYPE html> <html><head><title>hello-extjs</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" /><script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext-3.4.1/ext-all.js"></script><script type="text/javascript">Ext.onReady(function() { var button = Ext.get('show-btn'); var win;button.on('click', function() { //創(chuàng)建TabPanel var tabs = new Ext.TabPanel({ region: 'center', //border 布局，將頁面分成東，南，西，北，中五部分，這里表示TabPanel放在中間 margins: '3 3 3 0', activeTab: 0, defaults: { autoScroll: true }, items: [{ title: 'Bogus Tab', html: "第一個Tab的內(nèi)容." }, { title: 'Another Tab', html: "我是另一個Tab" }, { title: 'Closable Tab', html: "這是一個可以關(guān)閉的Tab", closable: true }] }); //定義一個Panel var nav = new Ext.Panel({ title: 'Navigation', region: 'west', //放在西邊，即左側(cè) split: true, width: 200, collapsible: true, //允許伸縮 margins: '3 0 3 3', cmargins: '3 3 3 3' }); //如果窗口第一次被打開時才創(chuàng)建 if (!win) { win = new Ext.Window({ title: 'Layout Window', closable: true, width: 600, height: 350, border : false, plain: true, layout: 'border', closeAction:'hide', items: [nav, tabs]//把上面創(chuàng)建的panel和TabPanel放在window中，并采用border方式布局 }); } win.show(button); }); }); </script></head><body>This is my HTML page. <br><button id="show-btn">button</button></body> </html>

?· card (Wizard)

You can use a Card layout to create your own custom wizard-style screen. The layout is a standard CardLayout with a Toolbar at the bottom, and the developer must supply the navigation function that implements the wizard's business logic (see the code in basic.js for details).

Sample Config:

layout:'card', activeItem: 0, // index or id bbar: ['->', {id: 'card-prev',text: '« Previous' },{id: 'card-next',text: 'Next »' }], items: [{id: 'card-0',html: 'Step 1' },{id: 'card-1',html: 'Step 2' },{id: 'card-2',html: 'Step 3' }]

6.column?把整個容器看成一列,然后向容器放入子元素時

?

This is a useful layout style when you need multiple columns that can have varying content height. Any fixed-width column widths are calculated first, then any percentage-width columns specified using the?columnWidth?config will be calculated based on remaining container width. Percentages should add up to 1 (100%) in order to fill the container.

Sample Config:

layout:'column', items: [{title: 'Width = 25%',columnWidth: .25,html: 'Content' },{title: 'Width = 75%',columnWidth: .75,html: 'Content' },{title: 'Width = 250px',width: 250,html: 'Content' }]

7. fit?一個子元素將充滿整個容器（如果多個子元素則只有一個元素充滿整個容器）

A very simple layout that simply fills the container with a single panel. This is usually the best default layout choice when you have no other specific layout requirements.

Sample Config:

layout:'fit', items: {title: 'Fit Panel',html: 'Content',border: false }

8. form?是一種專門用于管理表單中輸入字段的布局

9.table 按照普通表格的方法布局子元素

用layoutConfig:{columns:3},//將父容器分成3列

VBox

A layout that allows for the vertical and horizontal stretching of child items, much like the container layout with size management.

Sample Config:

layout: {type: 'vbox'align : 'stretch',pack : 'start', }, items: [{html:'panel 1', flex:1},{html:'panel 2', height:150},{html:'panel 3', flex:2} ]

HBox

A layout that allows for the vertical and horizontal stretching of child items, much like the column layout but can stretch items vertically.

Sample Config:

layout: {type: 'hbox',pack: 'start',align: 'stretch' }, items: [{html:'panel 1', flex:1},{html:'panel 2', width:150},{html:'panel 3', flex:2} ]

轉(zhuǎn)自：https://www.cnblogs.com/mingforyou

轉(zhuǎn)載于:https://www.cnblogs.com/blogs2014/p/7850319.html

總結(jié)

以上是生活随笔為你收集整理的ExtJS中layout的12种布局风格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： LeetCode 542 01 矩阵
下一篇： 1052. 爱生气的书店老板