【翻译】在Ext JS和Sencha Touch中创建自定义布局

原文：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布局，下面来逐步去实现它。

CSS3转换和其他魔法

为了创建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;
}

为了让Ext JS布局的CSS看上去基本一样，还需要对CSS选择器做点微调。

为了在Sencha Touch和Ext JS中让3D Carousel能响应用户交互，不得不在运行时对一些附加的CSS的进行修改。下面首先要做的是扩展布局的基类，然后研究如何添加交互功能。

扩展布局基类

首先来扩展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
    }
});

代码中除了config对象外，还定义了3个方法：onItemAdd、onItemRemove和modifyItems。前啷个方法只是简单的重写Ext.layout.Default的方法，以便在添加或删除子组件后编辑子组件的位置，而modifyItems是一个新的方法，用来计算所需的CSS 3D转换。

在布局指派给他们的容器时，布局系统内部的行为就会一直处于活动状态：

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();
    }

});

在nebulous指派布局容器后，必须等到容器渲染之后才能将事件处理指定到底层的DOM。接下来，为了能让布局管理子组件，还要填补功能之间的缝隙（ fill in the functional gaps）：

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();
    }
});
 

在示例中，还栩雅大量的复杂运算来确定每一个子组件的正确位置，以及需要在容器内手动更新CSS的转换值。

最后，还需要添加用来捕获用户与3D Carousel之间交互的事件处理：

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";
    }

});
 

事件处理只是简单的评估用户是否已将鼠标拖动到carousel，然后更新CSS过渡。

该类完整的Sencha Touch代码可以在这里下载。而扩展自Ext.layout.container.Container的Ext JS的代码与这个非常类似，但在API上还是有一些小小的区别。Ext JS代码的示例可以在这里下载。

回顾Ext.ux.layout.Carousel

下面化一点点时间来回顾一下发生了什么事。

由于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.