Extjs Layout Browser.
Extjs3.1.0 version supports 17 kinds of, below pick some important brief explanation, want to see effect, go above link, no longer map. The way to set layout for a panel is to set the layout configuration item for the panel.
1. Absolutelayout
Can be laid out through the decision location of the Panel's internal components. specified by X,y.
Example usage:
Copy Code code as follows:
New Ext.panel ({
Layout: ' Absolute ',
Title: ' Absulutelayout ',
RenderTo:document.body,
Frame:true,
DefaultType: ' TextField ',
width:400,
HEIGHT:250,
Items: [{
x:0, Y:5,
Xtype: ' label ',
Text: ' Send to: '
},
{
X:60, y:0,
Name: ' To '
}, {
x:0, Y:35,
Xtype: ' label ',
Text: ' Subject: '
}, {
X:60, Y:30,
Name: ' Subject '
},
{
x:0, Y:60,
Xtype: ' TextArea ',
Name: ' MSG '
}]
});
2.AccordionLayout
Accordion means the accordion, as the name suggests, this layout can be to the accordion, some components open, some closed. This effect is more useful as a sidebar.
Example usage:
Copy Code code as follows:
New Ext.panel ({
Title: ' Accordion Layout ',
Layout: ' Accordion ',
RenderTo:document.body,
Defaults: {//applied to each contained panel
Bodystyle: ' padding:15px '
},
Layoutconfig: {
Layout-specific configs Go
Titlecollapse:true,
Animate:true,
Activeontop:false
},
Items: [{
Title: ' Panel 1 ',
HTML: ' <p>panel content!</p> '
}, {
Title: ' Panel 2 ',
HTML: ' <p>panel content!</p> '
}, {
Title: ' Panel 3 ',
HTML: ' <p>panel content!</p> '
}]
});
});
3. Anchorlayout
This layout is very useful, especially when you are laying out a page with a control such as the GridView, Anchorlayout is actually similar to the WinForm form default layout. However, it can only fix the distance (absolute pixel or relative proportions) of a component from the page border (the right and bottom borders). Through the Anchor property settings, the Anchor property settings API document is explained very clearly, directly excerpt over:
Anchor:string
This "configuation" is "to" applied to child items of a container managed by this layout (ie. configured withlayout: ' Anchor ').
This value is what tells the layout, how a item should be anchored to the container. Items added to a anchorlayout accept a anchoring-specific config the anchor which is a string containing two Val Ues:the horizontal anchor value and the vertical anchor value (for example, ' 100% 50% '). The following types of anchor values are supported:
Percentage:any value between 1 and expressed as a percentage.
The percentage width that the item should take up within the container, and the second is the Percenta GE height. For example:
Two values specified
Anchor: ' 100% 50% '//render item complete width of the container and
1/2 height of the container
One value specified
Anchor: ' 100% '//the width value; The height would default to autooffsets:any positive or negative integer value.
This is a raw adjustment where the ' the ' the ' the ' the ' right edge of the ' container, and the second is the Offset from the bottom edge. For example:
Two values specified
Anchor: ' -50-100 '//render item The complete width of the container
Minus Pixels and
The complete height minus pixels.
One value specified
Anchor: ' -50 '//anchor value is assumed to being the right offset value
Bottom offset would default to 0sides:valid values are ' right ' (or ' r ') and ' bottom ' (or ' B ').
Either the container must have a fixed size or a anchorsize config value defined at render e any effect.
Mixed:
Anchor values can also be mixed as needed. For example, to render the width offset from the container right edge by pixels and 75% of the container ' s height use:
Anchor: '-50 75% ' but I don't seem to have any effect setting the first attribute of anchor, which is offset, even though the document says Offsets:any positive or negative integer value.
Example usage:
Copy Code code as follows:
New Ext.panel ({
Layout: ' Anchor ',
Title: ' Anchor ',
RenderTo:document.body,
Items: [{
Title: ' Item 1 ',
HTML: ' Content 1 ',
width:800,
Anchor: ' Right 20% '
}, {
Title: ' Item 2 ',
HTML: ' Content 2 ',
WIDTH:300,
Anchor: ' 50% 30% '
}, {
Title: ' Item 3 ',
HTML: ' Content 3 ',
width:600,
Anchor: '-100 50% '
}]
});
4. BorderLayout
BorderLayout layout by specifying the area on the page, at least one center area, and then you can set the West,south,east,north area as a secondary page. Usually suitable for the layout of large pages, the middle is the main functional area, both sides, the bottom can be used as a toolbar.
Copy Code code as follows:
var myborderpanel = new Ext.panel ({
RenderTo:document.body,
width:700,
HEIGHT:500,
Title: ' Border Layout ',
Layout: ' Border ',
Items: [{
Title: ' South Region is resizable ',
Region: ' South ',//position for region
HEIGHT:100,
Split:true,//enable resizing
minsize:75,//defaults to 50
maxsize:150,
Margins: ' 0 5 5 5 '
}, {
Xtype: ' panel ' implied by default
Title: ' West Region is collapsible ',
Region: ' West ',
Margins: ' 5 0 0 5 ',
WIDTH:200,
Collapsible:true,//Make collapsible
Cmargins: ' 5 5 0 5 ',//adjust top margin when collapsed
ID: ' West-region-container ',
Layout: ' Fit ',
Unstyled:true
}, {
Title: ' Center Region ',
Region: ' Center ',//center region is required, no Width/height specified
Xtype: ' Container ',
Layout: ' Fit ',
Margins: ' 5 5 0 0 '
}]
});
5. Columnlayout
Columnlayout can specify the width of the panel, with the width specified by the pixel, columnwidth the specified percentage, must be a number between 0-1. You can also use both, and in all cases, the percentage is the width of the entire page minus the width of the remaining widths of the fixed-width columns.
Example usage:
Copy Code code as follows:
var p = new Ext.panel ({
Title: ' Column layout-mixed ',
Layout: ' column ',
RenderTo:document.body,
Items: [{
Title: ' Column 1 ',
ColumnWidth:. 3,
HTML: ' <div>hello world</div> '
}, {
Title: ' Column 2 ',
HTML: ' <div>Hello</div> ',
ColumnWidth:. 6
}, {
Title: ' Column 3 ',
ColumnWidth:. 1,
HTML: ' <div>hello</div><div>another line</div> '
}]
});
This usage is the same as the API documentation and the official example, but the widths of these columns do not change with the size of the browser, and each time it is refreshed to fit the new browser width. But the official website example can indeed as the browser drag inside the panel size also follow the changes. It's strange. If a friend knows, please advise the maze.
The layout of the use of the same, no longer continue to write down. The key is in the practical application of flexible selection.
