Layout of ExtJs4 notes

Layout of ExtJs4 notes

This article explains another important concept of Ext: layout. Generally, container controls ADD child controls through the configuration item items. How to locate these child controls relative to the parent controls? layout is required here. Some container controls integrate a layout method by default. For example, the typical layout is Ext. container. viewport layout control, which is actually a border layout container and Ext. form. panel, Ext. tab. panel. In this section, we analyze various layout methods.

1. absolute

This layout can be used to absolutely locate child elements relative to the parent container control. It contains two configuration items, x and y, for positioning.

Let's take a look at an example: carefully developed a five-year UI front-end framework!

// AbsoluteExt. create ('ext. panel ', {title: 'container panel', renderTo: 'div1', width: 400, height: 300, layout: 'absolute ', items: [{title: 'panel 1', xtype: "panel", html: "sub-element 1", width: 200, height: 100, x: 50, y: 50}, {title: 'panel 2', xtype: "panel", html: "sub-element 2", width: 200, height: 100, x: 100, y: 80}]});

The effect is as follows:

2. accZ signature? Http://www.bkjia.com/kf/ware/vc/ "target =" _ blank "class =" keylink "> examples/sDvw + examples/WtcSjrM7Sw8e/examples/tf3zqrL/LXE1du1/s/uo6yyosfSu7m/examples/ qreiNcTqtcRVScewtsu/8rzco6E8L3A + CjxwcmUgY2xhc3M9 "brush: java; "> // accordionExt. create ('ext. panel ', {title: 'container panel', renderTo: 'div2' , Width: 400, height: 300, layout: 'accordion', items: [{tools: [{type: 'gear ', handler: function () {Ext. msg. alert ('hprompt ', 'configuration button clicked. ') ;},{ Type: 'refresh'}], title: 'panel 1', xtype: "panel", html: "sub-element 1" },{ title: 'panel 2', xtype: "panel", html: "sub-element 2"}, {id: 'panel3', title: 'panel 3', xtype: "panel ", html: "child element 3"}]}); Ext. create ("Ext. button ", {renderTo: 'div2', text:" Open Third page ", handler: function () {Ext. getCmp ('panel3 '). expand (true );}});

The effect is as follows:

3. anchor

This layout is supported by the form panel by default. Each item occupies one row. You can use the anchor configuration item to allocate the height and width of each item. When it is a percentage, it indicates the percentage of the current size to the parent container. When it is a number, it is generally a negative number, indicating that the value of the parent container minus the difference, and the remaining is the size of the subitem. Well-developed 5-year UI front-end framework!

// AnchorExt. create ('ext. panel ', {title: 'container panel', renderTo: 'did3', width: 400, height: 300, layout: 'anchor', items: [{tools: [{type: 'gear ', handler: function () {Ext. msg. alert ('hprompt ', 'configuration button clicked. ') ;},{ Type: 'refresh'}], title: 'panel 1', xtype: "panel", html: "sub-element 1", anchor: '1970 80% '}, {title: 'panel 2', xtype: "panel", html: "sub-element 2", anchor:'-50-20% '}, {title: 'panel 3', xtype: "panel", html: "sub-element 3", anchor: '2017 100% '}]});

The effect is as follows:

4. border

This layout can be defined as a child element in the four directions of the southeast and northwest, and a child element in the center is usually used for the entire page layout. Therefore, Ext. container. Viewport supports this layout by default. Well-developed 5-year UI front-end framework!

// BorderExt. create ('ext. panel ', {title: 'container panel', renderTo: 'div4', width: 400, height: 300, layout: 'border', defaults: {split: true, // whether there is a split line collapsible: true, // whether bodyStyle: 'padding: 15px '}, items: [{region: 'north', // the orientation of the child element: north, west, east, center, south title: 'north', xtype: "panel", html: "sub-element 1", height: 70}, {region: 'west', title: 'west', xtype: "panel", html: "child element 2", width: 100}, {region: 'east', title: 'east', xtype: "panel", html: "child element 2", width: 100}, {region: 'center', title: 'main', xtype: "panel", html: "sub-element 3" },{ region: 'south', title: 'south', xtype: "panel", html: "sub-element 4 ", height: 70}]});

The effect is as follows:

5. card

This layout allows you to switch each sub-element like a card. Each sub-element excludes the container space of the parent element. You can define the page flip button to control the child elements in the active state. Well-developed 5-year UI front-end framework!

// Cardvar cardnv = function (incr) {var l = Ext. getCmp ('cardpanel '). getLayout (); var I = l. activeItem. id. split ('Card ') [1]; var next = parseInt (I, 10) + incr; l. setActiveItem (next); Ext. getCmp ('cardprev '). setDisabled (next = 0); Ext. getCmp ('cardnext '). setDisabled (next = 2) ;}; Ext. create ('ext. panel ', {title: 'container panel', renderTo: 'div5', width: 400, height: 300, layout: 'Card ', activeItem: 1, // default activity item id: 'cardpanel ', items: [{id: 'card0', title: 'panel 1', xtype: "panel", html: "Child element 1" },{ id: 'card1 ', title: 'panel 2', xtype: "panel", html: "child element 2" },{ id: 'card2 ', title: 'panel 3', xtype: "panel", html: "sub-element 3"}], bbar: ['-> ', {id: 'cardprev', text: '« previous page', handler: Ext. function. bind (cardna V, this, [-1])}, {id: 'cardnext', text: 'Next page» ', handler: Ext. function. bind (cardna V, this, [1])}]});

The effect is as follows:

Vi. column

This layout divides child elements by column. Well-developed 5-year UI front-end framework!

// ColumnExt. create ('ext. panel ', {title: 'container panel', renderTo: 'div6', width: 400, height: 300, layout: 'column', ults: {// set the default layout: 'anchor', ults: {anchor: '000000'}, items: [{columnWidth: 100%, // set the column width items: [{title: 'panel 1', border: false, html: 'child element 1'}, {title: 'panel 2', border: false, html: 'child element 2'}] },{ width: 120, items: [{title: 'panel 3', border: false, html: 'Child element 3'}]}, {columnWidth :. 40, items: [{title: 'panel 4', border: false, html: 'child element 4'}]});

The effect is as follows:

7. fit

In this layout, sub-elements occupy all the container space, which is generally used when there is only one sub-item.

// FitExt. create ('ext. panel ', {title: 'container panel', renderTo: 'div7', width: 400, height: 300, layout: 'fit', items: [{title: 'panel ', html: 'child element', border: false}]});

The effect is as follows: a 5-year UI front-end framework has been carefully developed!

8. table

This layout uses table positioning to organize child elements. We can set rowspan and colspan like a table.

// TableExt. create ('ext. panel ', {title: 'container panel', renderTo: 'div8', width: 400, height: 300, layout: {type: 'table', columns: 4 }, defaults: {frame: true, width: 70, height: 50}, items: [{html: 'element 1', rowspan: 3, height: 150}, {html: 'element 2', rowspan: 2, height: 100}, {html: 'element 3'}, {html: 'element 4'}, {html: 'element 5 ', colspan: 2, width: 140 },{ html: 'element 6' },{ html: 'element 7' },{ html: 'element 8'}]});

The effect is as follows:

IX. vbox

In this layout, all child elements are vertically arranged into a column. Well-developed 5-year UI front-end framework!

// VboxExt. create ('ext. panel ', {title: 'container panel', renderTo: 'div9', width: 400, height: 300, layout: {type: 'vbox', pack: 'start ', // vertical alignment mode start: from top; center: from center; end: from bottom align: 'stretchmax '// alignment mode center, left, right: center, left, and right alignment; stretch: extension; stretchmax: standard extension with the largest element}, ults: {xtype: 'button '}, items: [{text: 'Small button ', flex: 1 // indicates the number of equal parts of the current child element size. }, {Xtype: 'tbspacer', // insert an empty fill flex: 3}, {text: 'center button ', scale: 'medium'}, {text: 'Big button ', width: 120, scale: 'large', flex: 1}]});

The effect is as follows:

10. hbox

Similar to vbox, it only becomes horizontal.

// HboxExt. create ('ext. panel ', {title: 'container panel', renderTo: 'did10', width: 400, height: 300, layout: {type: 'hbox', pack: 'end ', align: 'midddle' // alignment top, middle, bottom: top alignment, center alignment, and bottom alignment; stretch: extended; stretchmax: standard extension with the largest element}, ults: {xtype: 'callback'}, items: [{text: 'Small click'}, {text: 'medium click', scale: 'medium '}, {text: 'Big button ', width: 120, scale: 'large'}]});

The effect is as follows: a 5-year UI front-end framework has been carefully developed!