原文：Creating Custom Layouts in Ext JS and Sencha Touch

布局系統(tǒng)是Sencha框架中最強大和最獨特的一部分。布局會處理應(yīng)用程序中每個組件的大小和位置，因而，不須要手動去管理那些碎片。Ext JS與Sencha Touch的布局類有很多類似之處。近期在 Ivan Jouikov的這篇博文中對他們進行了具體的分析。

盡管是這樣。但非常多Ext JS和Sencha Touch開發(fā)者可能永遠都不會去了解布局系統(tǒng)的機制原理。Sencha框架已經(jīng)提供了最經(jīng)常使用的應(yīng)用程序布局，因此非常少出現(xiàn)應(yīng)用程序須要額外功能的需求，因而不大會有人愿意去了解布局系統(tǒng)的內(nèi)部運作。

試想一下。你的公司須要在應(yīng)用程序中使用3D Carousel來顯示界面元素。但沒有不論什么標(biāo)準(zhǔn)的Sencha布局能夠提供這樣的能力。哪怎么來解決問題呢？

選擇基類

在開發(fā)不論什么Ext JS或Sencha Touch自己定義組件的時候，第一步要考慮的總會是應(yīng)該選擇哪一個基類來擴展。在眼下這樣的情況，就是須要使用哪種布局才干容納3D空間的項目。因為不須要不論什么特殊功能，僅僅是管理項目，因而，須要從布局繼承鏈最低這方面著手。在當(dāng)前情況下，Ext.layout.container.Container (Ext JS)和Ext.layout.Default (Sencha Touch) 能夠說是最佳選擇。

在Ext JS中，因為須要支持舊版瀏覽器。而不能採用一些現(xiàn)代的CSS功能，如Flexbox，因而布局系統(tǒng)須要手動管理很多大小和定位的計算。這樣的后果就是，3D carousel布局須要重寫大多數(shù)的Ext.layout.container.Container方法，如calculate、getContainerSize和getPositionOffset。以便對它的子元素進行布局。


還有一個須要注意的問題是，Ext JS布局在執(zhí)行“布局”時。每個“布局”的執(zhí)行都要管理多個“周期”，比如。盒子布局配置為stretchmax就須要至少兩個周期，布局首先要檢測每個子組件的最大尺寸。并在第二周期將全部布局內(nèi)的子組件擴展為同樣的大小。

布局的操作會產(chǎn)生大量的“布局”或“周期”（加入或移除多個條目），為了提供性能。可能會希望先暫停布局。在操作完畢后再恢復(fù)布局。

相比之下，Sencha Touch的Ext.layout.Default則同意瀏覽器通過CSS去處理布局中大多數(shù)項目的定位和尺寸（因為Sencha Touch僅僅支持現(xiàn)代瀏覽器，而全部這些都已實現(xiàn)CSS Flexbox）。

因此。Ext.layout.Default包括了與加入、移除和又一次定位子條目的相關(guān)的主要方法。

如今，已經(jīng)了解將使用那些類來擴展新的3D Carousel布局。以下來逐步去實現(xiàn)它。

CSS3轉(zhuǎn)換和其它魔法

為了創(chuàng)建3D Carousel，須要使用一些高級CSS 3D轉(zhuǎn)換。如轉(zhuǎn)換、過渡、rotateX/rotateY和translateZ。CSS 3D轉(zhuǎn)換能夠非常復(fù)制。但總的來說，對于新的Sencha布局須要實現(xiàn)以下事情：


在父容器應(yīng)用透視和轉(zhuǎn)換（讓它看上去是3D的）
在布局內(nèi)的子組件應(yīng)用轉(zhuǎn)換（環(huán)繞3D形狀從他們的邊界開始旋轉(zhuǎn)他們）
在父容器內(nèi)部的DOM元素應(yīng)用轉(zhuǎn)換（o physically rotate the 3D shape as the user interacts with it）

正如你所預(yù)期的，通過Ext JS和Sencha Touch生成的實際的DOM元素會有些許不同。因此。盡管在兩個框架中採取的方法是一樣的。但產(chǎn)生的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選擇器做點微調(diào)。


為了在Sencha Touch和Ext JS中讓3D Carousel能響應(yīng)用戶交互，不得不在執(zhí)行時對一些附加的CSS的進行改動。以下首先要做的是擴展布局的基類，然后研究怎樣加入交互功能。

擴展布局基類

首先來擴展Sencha Touch的Ext.layout.Default，主要目標(biāo)是加入一些針對新的3D Carousel的觀感的配置項，以及一些布局內(nèi)部用來正確定位子組件的功能。

初步的擴展例如以下：

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轉(zhuǎn)換。

在布局指派給他們的容器時。布局系統(tǒng)內(nèi)部的行為就會一直處于活動狀態(tài)：

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); },
對于我們的布局?jǐn)U展來說。為了做進一步的初始化，還須要加上以下方法：

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 stateme.container.addCls('x-layout-carousel-ready');//set the drag handler on the underlying DOMme.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 spacepanel.element.dom.style[ me.transformProp ] = me.rotateFn + '(' + angle + 'deg) translateZ(' + me.radius + 'px)';}// adjust rotation so panels are always flatme.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 itel.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();} });
在演示樣例中，還栩雅大量的復(fù)雜運算來確定每個子組件的正確位置，以及須要在容器內(nèi)手動更新CSS的轉(zhuǎn)換值。

最后，還須要加入用來捕獲用戶與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";}});
事件處理僅僅是簡單的評估用戶是否已將鼠標(biāo)拖動到carousel，然后更新CSS過渡。

該類完整的Sencha Touch代碼能夠在這里下載。而擴展自Ext.layout.container.Container的Ext JS的代碼與這個非常類似，但在API上還是有一些小小的差別。

Ext JS代碼的演示樣例能夠在這里下載。

回想Ext.ux.layout.Carousel

以下化一點點時間來回想一下發(fā)生了什么事。

因為3D Carousel布局僅僅須要繼承布局系統(tǒng)的基本功能。因而選擇了Sencha Touch的Ext.layout.Default類進行擴展。接下來。加入了onItemAdd、onItemRemove和setContainer等重寫方法來加入布局所需的執(zhí)行配置。最好，實現(xiàn)了一些功能方法和事件處理。以便布局能夠管理子組件的位置。

盡管3D Carousel是一個使用Sencha Touch或Ext JS創(chuàng)建的異想天開的樣例，但它的重點在于怎樣在Sencha 應(yīng)用程序中創(chuàng)建有創(chuàng)意的布局，而這實際上非常easy。關(guān)鍵的地方是丫了解怎樣去初始化布局，以及在這期間發(fā)生了什么——其實底層的框架代碼并沒有你所想象的那樣復(fù)雜。Sencha Touch和Ext JS的布局系統(tǒng)。盡管在底層會有些許的不同，但實現(xiàn)方法是實際上是一樣的。

請注意：這僅僅是一個技術(shù)演示。不能保證代碼能執(zhí)行在全部瀏覽器上。

而其實，所使用的CSS3轉(zhuǎn)換已經(jīng)意味著排查了一些瀏覽器，因此請不要將這個應(yīng)用到生產(chǎn)中。


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.

轉(zhuǎn)載于:https://www.cnblogs.com/mfrbuaa/p/5134089.html

總結(jié)

以上是生活随笔為你收集整理的【翻译】在Ext JS和Sencha Touch中创建自己定义布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。