建材类网站模板,微信网站推广,专注南京网站建设,南京cms建站原文#xff1a;Creating Custom Layouts in Ext JS and Sencha Touch布局系统是Sencha框架中最强大和最独特的一部分。布局会处理应用程序中每个组件的大小和位置#xff0c;因而#xff0c;不须要手动去管理那些碎片。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 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 gapsExt.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();}
});在演示样例中还栩雅大量的复杂运算来确定每个子组件的正确位置以及须要在容器内手动更新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 应用程序中创建有创意的布局而这实际上非常easy。关键的地方是丫了解怎样去初始化布局以及在这期间发生了什么——其实底层的框架代码并没有你所想象的那样复杂。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 KayArthur 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. 转载于:https://www.cnblogs.com/mfrbuaa/p/5134089.html
