Alternate names
Ext.layout.AnchorLayoutHierarchy
Ext.BaseExt.layout.LayoutExt.layout.container.ContainerExt.layout.container.AnchorInherited mixins
Subclasses
Files
这个布局将子元素的位置与父容器大小进行关联固定. 如果容器大小改变, 所有固定的子项将按各自的anchor
规则自动被重新渲染固定.
此类应该通过layout :'anchor' 属性进行扩展或创建, 而通常应该不需要通过 类名等关键字进行直接创建.
AnchorLayout没有直接的参数项(继承属性除外). 默认情况下, AnchorLayout将仅通过容器自身的尺寸进行布局计算.
但是使用了AnchorLayout的容器也可以通过指定anchorSize属性为布局提供一个专用属性.
如果anchorSize被指定, 布局将把它作为一个虚容器来进行计算和尺寸测算, 这样允许在必要时对容器本身的尺寸进行独立于布局逻辑的设置.
Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "AnchorLayout Panel",
layout: 'anchor',
renderTo: Ext.getBody(),
items: [
{
xtype: 'panel',
title: '75% Width and 20% Height',
anchor: '75% 20%'
},
{
xtype: 'panel',
title: 'Offset -300 Width & -200 Height',
anchor: '-300 -200'
},
{
xtype: 'panel',
title: 'Mixed Offset and Percent',
anchor: '-250 20%'
}
]
});
此属性在使用了此布局(即layout:'anchor')的容器的子组件中配置.
此属性告知布局子项应该如何放置. 当一个'子组件'被添加到AnchorLayout下时需要有一个布局专用属性anchor, 其值为由两个 数值组成的字符串: 水平相对值和垂直相对值(例如'100% 50%'). anchor的值支持以下几种格式:
百分比 : 1到100的百分比形式的数值.
anchor中的第一个描述了子组件在容器中所占的宽度百分比, 第二个描述了高度百分比. 例如:
// 两个值都定义
anchor: '100% 50%' // 子组件的宽度为即等于容器的宽度, 高度为容器的1/2
// 只定义一个
anchor: '100%' // 此值为宽度值; 高度将默认为自动取值.
偏移量 : 正整数或负整数.
这是一种很底层的调整方式, anchor中第一个值即表示组件相对于容器右边界的偏移, 第二个值表示组件相对于底边界的偏移.
// 两个值都定义
anchor: '-50 -100' // 子组件的宽度为容器的宽度减50px, 高度为容器的高度减100px.
// 只定义一个值
anchor: '-50' // 值为相对于右边界的宽度偏移量, 相对于底边界的偏移量为默认值0
边界 : 有效值包括 right (或 r) 和 bottom (或 b).
为使此配置生效, 容器必须有固定的大小或anchorSize属性被定义.
混合 :
以上几种格式可以被混合使用. 例如, 子组件的宽度在容器右边界减50px, 高度为容器的75%, 可以这样定义:
anchor: '-50 75%'
默认anchor值, 供所有没有设置anchor属性或指定宽度的子容器使用.
Defaults to: "100%"
一个可选的添加到容器上的CSS class扩展类名. 此属性用于为容器或所有子组件添加基于CSS规则的自定义样式. 也可参考Ext.Component.componentCls
允许一下有效值:
Defaults to: 0
设此值为true时, 无论垂直滚动条是否需要出现, 都会在页面为垂直滚动条预留出空间(如果该操作系统下的滚动条需要占用空间).
在某些系统实例中, 容器内容的高度会随着系统的操作发生变化, 而此时你又不希望所有子组件的宽度因滚动条的出现和消失而来回改变, 这种情况下此属性会变得很有用. 滚动条将会在预留的空间出现, 子组件的宽度也不会发生改变.
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'rating', type: 'int'},
{name: 'salary', type: 'float'},
{name: 'name'}
]
});
function createFakeData(count) {
var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
ratings = [1, 2, 3, 4, 5],
salaries = [100, 400, 900, 1500, 1000000];
var data = [];
for (var i = 0; i < (count || 25); i++) {
var ratingId = Math.floor(Math.random() * ratings.length),
salaryId = Math.floor(Math.random() * salaries.length),
firstNameId = Math.floor(Math.random() * firstNames.length),
lastNameId = Math.floor(Math.random() * lastNames.length),
rating = ratings[ratingId],
salary = salaries[salaryId],
name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
data.push({
rating: rating,
salary: salary,
name: name
});
}
store.loadData(data);
}
// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'Employee',
proxy: {
type: 'memory'
}
});
createFakeData(10);
var grid = Ext.create('Ext.grid.Panel', {
title: 'Grid loaded with varying number of records',
anchor: '100%',
store: store,
columns: [{
xtype: 'rownumberer',
width: 40,
sortable: false
},{
text: 'Name',
flex: 1,
sortable: true,
dataIndex: 'name'
},{
text: 'Rating',
width: 125,
sortable: true,
dataIndex: 'rating'
},{
text: 'Salary',
width: 125,
sortable: true,
dataIndex: 'salary',
align: 'right',
renderer: Ext.util.Format.usMoney
}]
});
Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 800,
height: 600,
layout: {
type: 'anchor',
reserveScrollbar: true // There will be a gap even when there's no scrollbar
},
autoScroll: true,
items: grid,
tbar: {
defaults: {
handler: function(b) {
createFakeData(b.count);
}
},
items: [{
text: '10 Items',
count: 10
},{
text: '100 Items',
count: 100
},{
text: '300 Items',
count: 300
},{
text: '1000 Items',
count: 1000
},{
text: '5000 Items',
count: 5000
}]
}
});
Defaults to: false
扩展事件
Defaults to: []
一个包含几个boolean值属性的对象, 包含的属性为指定子组件的ContextItem对哪些属性更新时需要动画效果. 例如, 一个Accordion布局应有:
{
y: true,
height: true
}
Defaults to: null
返回状态标记来描述如何处理跨浏览器的滚动条高度/宽度. 特别是IE在处理含'padding-bottom'的滚动条元素 时会出现问题(滚动条高度中会不含此padding值). 同样, 滚动条元素的子元素的'margin-bottom'属性值 可能会被丢失.
所有浏览器好像都会忽略子元素的'margin-right'属性和父元素的'padding-right'属性(当发生溢出时).
此方法返回一个二进制数值, 数值的各位根据不参与滚动条高度/宽度计算的因素进行设值:
为了解决'margin-bottom'属性的问题, 在子元素的最后创建一个0px高的元素就能够'隐藏'边界空白. 也可以通过将子元素再封装在一个元素中, 这样也能够'隐藏'边界空白. 封装元素的方式大概是 能够保持子元素右边界空白的唯一方案. 在Column布局中使用的就是这个方案.
为了解决'padding-bottom'属性的问题, 因为此样式来自父元素, 大概唯一简单的解决方法就是在子元素 的最后创建一个高度与'padding-bottom'值相等的元素. 而为了保护右padding, 新元素的宽度需要包含 右padding值.
发生溢出时, 用来修正body的padding值的元素.
发生溢出时, 用来修正body的padding值的元素.
本身
获取当前类的引用，此对象被实例化。不同于 statics,
this.self是依赖范围，它意味着要使用动态继承。
参见 statics 详细对比
Ext.define('My.Cat', {
statics: {
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
alert(this.self.speciesName); // 依赖 'this'
},
clone: function() {
return new this.self();
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
}
});
var cat = new My.Cat(); // alerts 'Cat' 猫
var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' 雪豹
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
此方法添加解析到的每个参数到 childEls 数组.
成员
由所属Panel在开始处理折叠前调用. 大多数布局不需要覆盖此方法的默认Ext.emptyFn实现.
由所属Panel在开始处理展开前调用. 大多数布局不需要覆盖此方法的默认Ext.emptyFn实现.
除了基类的工作任务外, 容器还需要一些额外的缓存数据, 以下属性会被添加到所属上下文环境(ownerContext)中
Overrides: Ext.layout.Layout.beginLayout
在所有计算循环开始前重置DOM属性值, 对计算进行预处理.
覆盖时注意: 此函数处于DOM写阶段, 须避免任何对DOM的读操作.
此布局所属组件的上下文环境项.
执行当前布局的计算. 此函数至少会被调用一次, 如果属性done在返回前被标记为未完成状态,则将 重复调用此函数. 在刚进入此函数时done的属性值总是为'true'.
覆盖时注意: 此函数处于DOM读阶段, 须避免任何对DOM的写操作. 作为代替, DOM的写操作应该被写入 Ext.layout.ContextItem中以在下次刷新时更新DOM.
此布局所属组件的上下文环境项.
为容器进行溢出处理. 此方法应在布局计算出contentWidth/Height后立刻调用. 此方法需要的参数除了 传给calculate方法的ownerContext以外, 还需要容器尺寸大小(由getContainerSize返回的对象).
用一个二进制来标记溢出管理的尺寸. 0位代表'width', 1位代表'height'. 也就是, 当值为1是表示仅含'width', 值为2时表示仅含'height', 3表示二者皆有
调用原来的方法，这是以前的override重写
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
this.callOverridden();
alert("Meeeeoooowwww");
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
This method has been deprecated since 4.1
版本 使用 callParent 代替.
参数的参数，数组或'参数'对象
来自当前方法，例如： this.callOverridden(arguments)
返回调用重写方法的结果。
所谓的"parent"方法是指当前的方法。 这是以前的方法派生或重写(参见 Ext.define)。
Ext.define('My.Base', {
constructor: function (x) {
this.x = x;
},
statics: {
method: function (x) {
return x;
}
}
});
Ext.define('My.Derived', {
extend: 'My.Base',
constructor: function () {
this.callParent([21]);
}
});
var obj = new My.Derived();
alert(obj.x); // alerts 21
这可以用来重写如下:
Ext.define('My.DerivedOverride', {
override: 'My.Derived',
constructor: function (x) {
this.callParent([x*2]); // 调用原来的My.Derived构造
}
});
var obj = new My.Derived();
alert(obj.x); // 现在提示 42
This also works with static methods.
Ext.define('My.Derived2', {
extend: 'My.Base',
statics: {
method: function (x) {
return this.callParent([x*2]); // 调用 My.Base.method
}
}
});
alert(My.Base.method(10); // alerts 10
alert(My.Derived2.method(10); // alerts 20
然后，它也可以重写静态方法。
Ext.define('My.Derived2Override', {
override: 'My.Derived2',
statics: {
method: function (x) {
return this.callParent([x*2]); // 调用 My.Derived2.method
}
}
});
alert(My.Derived2.method(10); // 现在提示 40
这个参数, 通过当前方法得到数组或者 arguments 对象,
例如: this.callParent(arguments)
返回调用父类的方法的结果。
此函数(如果被实现)会在布局即将完成循环周期(done没有被设为'false')时被调用. 一个布局 有可能在计算完成后而循环结束前就已经被清除, 这种情况下, 此函数将不被调用. 布局也可能在此函数调用 之后被执行清除, 这将导致calculate计算函数被重新执行, 然后再次调用此函数.
覆盖时注意: 此函数处于DOM读阶段, 须避免任何对DOM的写操作. 作为代替, DOM的写操作应该被写入 Ext.layout.ContextItem中以在下次刷新时更新DOM.
子类不一定要实现此函数, 事实上, 应仅在必要时才实现.
此布局所属组件的上下文环境项.
销毁此布局. 函数会从目标元素(target)中删除一个目标样式(targetCls)并调用'onDestroy'.
子类可以覆盖此函数或'onDestroy', 但是所有实现必须调用基类函数, 使基类能够完成清除工作.
此函数(或'onDestroy')可以由子类覆盖, 以用来清除事件处理或清除未直接管理的DOM节点.
创建一个元素, 以使下/右的'body padding'与浏览器保持一致. 此元素的尺寸定义是基于calculateOverflow的计算是否需要滚动条. 如果manageOverflow参数为'false', 那么此元素将不会被创建.
详情参见getScrollRangeFlags.
此函数(如果被实现)会在所有布局计算结束后调用. 很多方面与completeLayout类似. 此函数 可以对当前(或其他)布局变进行清除(参见Ext.layout.Context.invalidate), 但是最好避免这种 情况. 此函数应用来进行最后的读取操作, 所以最好不要在这个阶段进行任何清除布局操作. 不过此函数仍可以 用来执行最后的检查操作, 即使这些检查可能需要所有其他的布局都完成计算并清除某些计算结果.
覆盖时注意: 此函数处于DOM读阶段, 须避免任何对DOM的写操作. 作为代替, DOM的写操作应该被写入 Ext.layout.ContextItem中以在下次刷新时更新DOM.
子类不一定要实现此函数, 事实上, 应仅在必要时才实现.
此布局所属组件的上下文环境项.
此函数在所有布局都完成计算且计算结构都刷新到DOM时调用. 不会再有更多的布局被执行, 且此函数在每个 布局的执行过程中仅被调用一次. 基类组件布局会缓存lastComponentSize.
覆盖时注意: 此函数处于DOM写入阶段, 须避免任何对DOM的读操作.
子类不一定要实现此函数, 事实上, 应仅在必要时才实现.
此布局所属组件的上下文环境项.
返回容器的尺寸大小. 只有确定值的尺寸能够返回, 因为受外容器宽/高约束的包装模型的尺寸是由容器的布局决定的.
如果calculateOverflow方法已被调用且manageOverflow参数为'true', 那么尺寸可能需要根据滚动条的尺寸进行调整.
布局所属组件的上下文环境.
'true'表示容器的尺寸必须与DOM属性值一致.
Defaults to: false
返回一个子组件的数组. 或用于渲染阶段(布局基类的beforeLayout方法), 或用于布局阶段(onLayout方法).
of child components
Overrides: Ext.layout.Layout.getLayoutItems
这个类的初始化配置。典型例子:
Ext.define('My.awesome.Class', {
// 这是默认配置
config: {
name: 'Awesome',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome' 超级棒
配置
mixins 混入原型 键-值对
在渲染前仅执行一次的初始化函数.
在所有布局上下文环境中的布局刷新都完成以后, 为每个布局进行调用.
Overrides: Ext.layout.Layout.notifyOwner
当组件内容的子项发送某种变化时, 调用此函数. 此函数默认调用布局所属组件的 Ext.AbstractComponent.updateLayout函数.
被改变的子组件.
返回'true'表示布局已对内容的变化进行处理.
Removes items in the childEls array based on the return value of a supplied test function. The function is called with a entry in childEls and if the test function return true, that entry is removed. If false, that entry is kept.
The test function.
将组件渲染到目标元素(Element)上
待渲染组件
模板元素
组件被渲染插入到模板元素中的位置
获取从该对象被实例化的类的引用。 请注意不同于 self,
this.statics()是独立的作用域，无论this是否运行，总是返回其中的调用类。
Ext.define('My.Cat', {
statics: {
totalCreated: 0,
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
var statics = this.statics();
alert(statics.speciesName); // 总是等于'Cat'，无论'this'是什么，
// 相当于：My.Cat.speciesName
alert(this.self.speciesName); // 依赖 'this'
statics.totalCreated++;
},
clone: function() {
var cloned = new this.self; // 依赖 'this'
cloned.groupName = this.statics().speciesName; // 相当于: My.Cat.speciesName
return cloned;
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
},
constructor: function() {
this.callParent();
}
});
var cat = new My.Cat(); // alerts 'Cat', 然后提示 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', 然后提示 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
alert(clone.groupName); // alerts 'Cat'
alert(My.Cat.totalCreated); // alerts 3
配置扩展
方法/属性添加到这个类的原型。
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
成员
添加/重写这个类的静态属性。
Ext.define('My.cool.Class', {
...
});
My.cool.Class.addStatics({
someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'
method1: function() { ... }, // My.cool.Class.method1 = function() { ... };
method2: function() { ... } // My.cool.Class.method2 = function() { ... };
});
成员
this
这个类的原型借用另一个类的成员
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {
...
});
Thief.borrow(Bank, ['money', 'printMoney']);
var steve = new Thief();
alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'
this 借用成员
创建这个类的新实例。
Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
所有参数传递至类的构造。
创建的实例。
创建现有的原型方法的别名。例如：
Ext.define('My.cool.Class', {
method1: function() { ... },
method2: function() { ... }
});
var test = new My.cool.Class();
My.cool.Class.createAlias({
method3: 'method1',
method4: 'method2'
});
test.method3(); // test.method1()
My.cool.Class.createAlias('method5', 'method3');
test.method5(); // test.method3() -> test.method1()
别名新方法的名称，或对象设置多个别名。 参见flexSetter
原来的方法名
以字符串格式，获取当前类的名称。
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
className 类名
重写这个类的成员。通过callParent重写的方法可以调用。
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
this.callParent(arguments);
alert("Meeeeoooowwww");
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!我要成为一只猫！"
// alerts "I'm a cat!我是一只猫！"
// alerts "Meeeeoooowwww"
在4.1版本, 直接利用这种方法已经过时了。 使用 Ext.define 代替:
Ext.define('My.CatOverride', {
override: 'My.Cat',
constructor: function() {
alert("I'm going to be a cat!");
this.callParent(arguments);
alert("Meeeeoooowwww");
}
});
以上完成了相同的结果，但可以由Ext.Loader重写， 其目标类和生成过程中，可以决定是否需要根据目标类所需的状态覆盖管理(My.Cat)。
This method has been deprecated since 4.1.0
使用 Ext.define 代替
添加到这个类的属性。 这应当被指定为一个对象包含一个或多个属性的文字。
this class 当前类