ad5081d3
 孙向锦
初始化项目
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
/**
* @class Ext.ux.layout.Center
* @extends Ext.layout.container.Fit
* <p>This is a very simple layout style used to center contents within a container. This layout works within
* nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
* <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
* the layout. The layout does not require any config options, although the child panel contained within the
* layout must provide a fixed or percentage width. The child panel's height will fit to the container by
* default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
* Example usage:</p>
* <pre><code>
// The content panel is centered in the container
var p = Ext.create('Ext.Panel', {
title: 'Center Layout',
layout: 'ux.center',
items: [{
title: 'Centered Content',
widthRatio: 0.75,
html: 'Some content'
}]
});
// If you leave the title blank and specify no border
// you'll create a non-visual, structural panel just
// for centering the contents in the main container.
var p = Ext.create('Ext.Panel', {
layout: 'ux.center',
border: false,
items: [{
title: 'Centered Content',
width: 300,
autoHeight: true,
html: 'Some content'
}]
});
</code></pre>
*/
Ext.define('Ext.ux.layout.Center', {
extend: 'Ext.layout.container.Fit',
alias: 'layout.ux.center',
// private
setItemSize : function(item, width, height){
this.owner.addCls('ux-layout-center');
item.addCls('ux-layout-center-item');
if(item && height > 0) {
if (width) {
width = item.width;
if (Ext.isNumber(item.widthRatio)) {
width = Math.round(this.owner.el.getWidth() * item.widthRatio);
}
}
item.setSize(width, height);
}
}
});
|
