原文：Creating Custom Layouts in Ext JS and Sencha Touch
布局系统是Sencha框架中最强大和最独特的一部分。布局会处理应用程序中每个组件的大小和位置，因而，不需要手动去管理那些碎片。Ext JS与Sencha Touch的布局类有许多相似之处，最近在 Ivan Jouikov的这篇博文中对他们进行了详细的分析。
虽然是这样，但很多Ext JS和Sencha Touch开发人员可能永远都不会去了解布局系统的机制原理。Sencha框架已经提供了最常用的应用程序布局，因此很少出现应用程序需要额外功能的需求，因而不大会有人愿意去了解布局系统的内部运作。
试想一下，你的公司需要在应用程序中使用3D Carousel来显示界面元素，但没有任何标准的Sencha布局可以提供这种能力，哪怎么来解决这个问题呢？
在开发任何Ext JS或Sencha Touch自定义组件的时候，第一步要考虑的总会是应该选择哪一个基类来扩展。在目前这种情况，就是需要使用哪种布局才能容纳3D空间的项目。由于不需要任何特殊功能，只是管理项目，因而，需要从布局继承链最低这方面着手。在当前情况下，Ext.layout.container.Container (Ext JS)和Ext.layout.Default (Sencha Touch) 可以说是最佳选择。
在Ext JS中，由于需要支持旧版浏览器，而不能采用一些现代的CSS功能，如Flexbox，因而布局系统需要手动管理许多大小和定位的计算。这样的后果就是，3D carousel布局需要重写大多数的Ext.layout.container.Container方法，如calculate、getContainerSize和getPositionOffset，以便对它的子元素进行布局。
另一个需要注意的问题是，Ext JS布局在执行“布局”时，每一个“布局”的执行都要管理多个“周期”，例如，盒子布局配置为stretchmax就需要至少两个周期，布局首先要检测每一个子组件的最大尺寸，并在第二周期将所有布局内的子组件扩展为相同的大小。布局的操作会产生大量的“布局”或“周期”（添加或移除多个条目），为了提供性能，可能会希望先暂停布局，在操作完成后再恢复布局。
相比之下，Sencha Touch的Ext.layout.Default则允许浏览器通过CSS去处理布局中大多数项目的定位和尺寸（因为Sencha Touch只支持现代浏览器，而所有这些都已实现CSS Flexbox）。因此，Ext.layout.Default包含了与添加、移除和重新定位子条目的相关的主要方法。
现在，已经了解将使用那些类来扩展新的3D Carousel布局，下面来逐步去实现它。
为了创建3D Carousel，需要使用一些高级CSS 3D转换，如转换、过渡、rotateX/rotateY和translateZ。CSS 3D转换可以很复制，但总的来说，对于新的Sencha布局需要实现以下事情：
在父容器应用透视和转换（让它看上去是3D的）
在布局内的子组件应用转换（围绕3D形状从他们的边界开始旋转他们）
在父容器内部的DOM元素应用转换（o physically rotate the 3D shape as the user interacts with it）
正如你所预期的，通过Ext JS和Sencha Touch生成的实际的DOM元素会有些许不同，因此，虽然在两个框架中采取的方法是一样的，但产生的CSS还是会有区别。新的3D Carousel布局所需的附加CSS如下（Sencha Touch）：
.x-layout-carousel {
-webkit-perspective : 1500px;
-moz-perspective : 1500px;
-o-perspective : 1500px;
perspective : 1500px;
position : relative !important;
}
.x-layout-carousel .x-inner {
-webkit-transform-style : preserve-3d;
-moz-transform-style : preserve-3d;
-o-transform-style : preserve-3d;
transform-style : preserve-3d;
}
.x-layout-carousel.panels-backface-invisible .x-layout-carousel-item {
-webkit-backface-visibility : hidden;
-moz-backface-visibility : hidden;
-o-backface-visibility : hidden;
backface-visibility : hidden;
}
.x-layout-carousel-item {
display : inline-block;
position : absolute !important;
}
.x-layout-carousel-ready .x-layout-carousel-item {
-webkit-transition : opacity 1s, -webkit-transform 1s;
-moz-transition : opacity 1s, -moz-transform 1s;
-o-transition : opacity 1s, -o-transform 1s;
transition : opacity 1s, transform 1s;
}
.x-layout-carousel-ready .x-inner {
-webkit-transition : -webkit-transform 1s;
-moz-transition : -moz-transform 1s;
-o-transition : -o-transform 1s;
transition : transform 1s;
}首先来扩展Sencha Touch的Ext.layout.Default，主要目标是添加一些针对新的3D Carousel的观感的配置项，以及一些布局内部用来正确定位子组件的功能。
初步的扩展如下：
Ext.define(‘Ext.ux.layout.Carousel‘, {
extend : ‘Ext.layout.Default‘,
alias : ‘layout.carousel‘,
config : {
/**
* @cfg {number} portalHeight
* Height of the carousel, in pixels
*/
portalHeight : 0,
/**
* @cfg {number} portalWidth
* Width of the carousel, in pixels
*/
portalWidth : 0,
/**
* @cfg {string} direction
* ‘horizontal‘ or ‘vertical‘
*/
direction : ‘horizontal‘ //or ‘vertical‘
},
onItemAdd : function () {
this.callParent(arguments);
this.modifyItems();
},
onItemRemove : function () {
this.callParent(arguments);
this.modifyItems();
},
modifyItems : function () {
//calculate child positions, etc
}
});setContainer: function(container) {
var options = {
delegate: ‘> component‘
};
this.dockedItems = [];
this.callSuper(arguments);
container.on(‘centeredchange‘, ‘onItemCenteredChange‘, this, options, ‘before‘)
.on(‘floatingchange‘, ‘onItemFloatingChange‘, this, options, ‘before‘)
.on(‘dockedchange‘, ‘onBeforeItemDockedChange‘, this, options, ‘before‘)
.on(‘afterdockedchange‘, ‘onAfterItemDockedChange‘, this, options);
},Ext.define(‘Ext.ux.layout.Carousel‘, {
//...
setContainer : function (container) {
var me = this;
me.callParent(arguments);
me.rotation = 0;
me.theta = 0;
switch (Ext.browser.name) {
case ‘IE‘:
me.transformProp = ‘msTransform‘;
break;
case ‘Firefox‘:
me.transformProp = ‘MozTransform‘;
break;
case ‘Safari‘:
case ‘Chrome‘:
me.transformProp = ‘WebkitTransform‘;
break;
case ‘Opera‘:
me.transformProp = ‘OTransform‘;
break;
default:
me.transformProp = ‘WebkitTransform‘;
break;
}
me.container.addCls(‘x-layout-carousel‘);
me.container.on(‘painted‘, me.onPaintHandler, me, { single : true });
},
onPaintHandler : function () {
var me = this;
//add the "ready" class to set the CSS transition state
me.container.addCls(‘x-layout-carousel-ready‘);
//set the drag handler on the underlying DOM
me.container.element.on({
drag : ‘onDrag‘,
dragstart : ‘onDragStart‘,
dragend : ‘onDragEnd‘,
scope : me
});
me.modifyItems();
}
});Ext.define(‘Ext.ux.layout.Carousel‘, {
//...
modifyItems : function () {
var me = this,
isHorizontal = (me.getDirection().toLowerCase() === ‘horizontal‘),
ct = me.container,
panelCount = ct.items.getCount(),
panelSize = ct.element.dom[ isHorizontal ? ‘offsetWidth‘ : ‘offsetHeight‘ ],
i = 0,
panel, angle;
me.theta = 360 / panelCount;
me.rotateFn = isHorizontal ? ‘rotateY‘ : ‘rotateX‘;
me.radius = Math.round(( panelSize / 2) / Math.tan(Math.PI / panelCount));
//for each child item in the layout...
for (i; i < panelCount; i++) {
panel = ct.items.getAt(i);
angle = me.theta * i;
panel.addCls(‘x-layout-carousel-item‘);
// rotate panel, then push it out in 3D space
panel.element.dom.style[ me.transformProp ] = me.rotateFn + ‘(‘ + angle + ‘deg) translateZ(‘ + me.radius + ‘px)‘;
}
// adjust rotation so panels are always flat
me.rotation = Math.round(me.rotation / me.theta) * me.theta;
me.transform();
},
transform : function () {
var me = this,
el = me.container.element,
h = el.dom.offsetHeight,
style= el.dom.style;
// push the carousel back in 3D space, and rotate it
el.down(‘.x-inner‘).dom.style[ me.transformProp ] = ‘translateZ(-‘ + me.radius + ‘px) ‘ + me.rotateFn + ‘(‘ + me.rotation + ‘deg)‘;
style.margin = parseInt(h / 2, 10) + ‘px auto‘;
style.height = me.getPortalHeight() + ‘px‘;
style.width = me.getPortalWidth() + ‘px‘;
},
rotate : function (increment) {
var me = this;
me.rotation += me.theta * increment * -1;
me.transform();
}
});
Ext.define(‘Ext.ux.layout.Carousel‘, {
//...
onDragStart : function () {
this.container.element.dom.style.webkitTransitionDuration = "0s";
},
onDrag : function (e) {
var me = this,
isHorizontal = (me.getDirection().toLowerCase() === ‘horizontal‘),
delta;
if (isHorizontal) {
delta = -(e.deltaX - e.previousDeltaX) / me.getPortalWidth();
}
else {
delta = (e.deltaY - e.previousDeltaY) / me.getPortalHeight();
}
me.rotate((delta * 10).toFixed());
},
onDragEnd : function () {
this.container.element.dom.style.webkitTransitionDuration = "0.4s";
}
});
下面化一点点时间来回顾一下发生了什么事。
由于3D Carousel布局只需要继承布局系统的基本功能，因而选择了Sencha Touch的Ext.layout.Default类进行扩展。接下来，添加了onItemAdd、onItemRemove和setContainer等重写方法来添加布局所需的运行配置。最好，实现了一些功能方法和事件处理，以便布局能够管理子组件的位置。
尽管3D Carousel是一个使用Sencha Touch或Ext JS创建的异想天开的例子，但它的重点在于如何在Sencha 应用程序中创建有创意的布局，而这实际上很简单。关键的地方是丫了解如何去初始化布局，以及在这期间发生了什么——其实底层的框架代码并没有你所想象的那样复杂。Sencha Touch和Ext JS的布局系统，虽然在底层会有些许的不同，但实现方法是实际上是一样的。
请注意：这只是一个技术演示，不能保证代码能运行在所有浏览器上。而事实上，所使用的CSS3转换已经意味着排查了一些浏览器，因此请不要将这个应用到生产中。
Other interesting examples of customized layouts include this Sencha Fiddle by Sencha Support engineer Seth Lemmons involving a circle menu, and this video of a custom navigation component by Andrea Cammarata, Sencha Professional Services engineer.
作者：Arthur Kay
Arthur Kay is the Developer Relations Manager at Sencha, Inc. He studied Music and Computer Science at Loyola University Chicago and has been involved with the Web since the late 1990s.
【翻译】在Ext JS和Sencha Touch中创建自定义布局,布布扣,bubuko.com
【翻译】在Ext JS和Sencha Touch中创建自定义布局
原文地址：http://blog.csdn.net/tianxiaode/article/details/37694581
