【翻译】在Ext JS中创建特定主题的重写

Ext JS提供了大量的功能来使类的创建和处理变得简单,还提供了一系列的功能来扩展和重新现有的Javascript类。这意味着可以为类添加行为和创建属于自己的类,或者重写某些函数的行为。在本文,将展示如何实现特定主题类的重写。


原文:http://www.sencha.com/blog/creating-theme-specific-overrides-in-ext-js/


作者:Lee Boonstra
Lee is a technical trainer at Sencha. She’s located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She is writing a cookbook for O'Reilly about Sencha Touch.



Ext JS提供了大量的功能来使类的创建和处理变得简单,还提供了一系列的功能来扩展和重新现有的Javascript类。这意味着可以为类添加行为和创建属于自己的类,或者重写某些函数的行为。在本文,将展示如何实现特定主题类的重写。

可能你已经知道如何创建Ext JS类的重写。例如,希望改变默认行为或修补框架。在这种情况下,可以使用以下代码来创建类的重写:


Ext.define('SomeClassName', {override : 'Ext.panel.Panel'//the override: by default, all panels will have a 200px widthwidth : 200 
});

上面的代码带来的首个问题是:怎么命名这个重写的类,以及要将它放在哪里。有时候会需要为重写的类指定特定的主题。如果将这个javascript重写与自定义主题捆绑在一起,岂不是更好?例如,在自定义主题中,所有面板都会有阴影。又或者,创建了一个很棒的CSS3动画用于打开弹出窗口的时候。不幸的是,老版本的IE不能处理CSS3,因此需要一个备用的javascript。在这两种情况下,默认功能的改变是可见的,因此,怎样安排这些重写的文件结构,才不会破坏任何原有的主题呢?

这里的诀窍就是overrides文件夹。使用Sencha Cmd 3.1,使应用程序和包在overrides文件夹中保持类的重写成为可能。默认情况下,在生成(主题)包的时候,已经包含了这样一个文件,且已被设置为支撑重写。

下面来创建一个这样的javascript备用。这是一个简单的动画,在打开弹出窗口的时候会动画处理不透明度。

在主题包中创建以下文件结构(这里假设此宝的名称为MyTheme):

packages
> MyTheme
> > overrides
> > > window
> > > > Window.js

文件结构对应了Ext.window.Window的框架文件结构。


下面来定义类:

Ext.define('MyTheme.window.Window', {});

类将重写Ext.window.Window:

Ext.define('MyTheme.window.Window', {override : 'Ext.window.Window'});

下面来测试一下重写工作。首先,在命令行运行以下命令:

sencha app refresh

到目前为止,之前的代码还没有改变任何功能,因此,这里将使用console log在类创建的时候输出一些信息,就可在浏览器进行测试了:

Ext.define('MyTheme.window.Window', {override : 'Ext.window.Window'}, function(){console.log("Oh yes, my override works!");
});

下面来创建自定义行为。这里的重写会在监听窗口的beforeshow事件时添加一个动画:

listeners: {beforeshow: function(mywindow){}
}

在beforeshow监听中要创建一个新的动画(Ext.fx.Anim),因而需要添加对该类的引用:

requires: ['Ext.fx.Anim'],

下一步,要在beforeshow事件中添加创建动画的代码。现在,创建一个非常简单的动画,在显示窗口(mywindow)时将不透明度(opacity)从隐藏平滑的过渡到100%:


Ext.create('Ext.fx.Anim', {target: mywindow, //argument of the beforeshow eventduration: 1000, //msfrom: {opacity: 0},to: {opacity: 1}
});

现在,看可以测试一下动画是否能工作了。


非常糟糕的是,下面要创建的CSS3动画只支持现代浏览器。因此,需要做一个判断,只有在IE(IE9或更低)是旧版本的时候才执行这个Ext JS动画。

if(Ext.isIE9m) {}

确保代码如以下所示:

Ext.define('MyTheme.window.Window', {override : 'Ext.window.Window',requires: ['Ext.fx.Anim'],closeAction: 'hide',listeners: {beforeshow: function(mywindow){if(Ext.isIE9m) {Ext.create('Ext.fx.Anim', {target: mywindow,duration: 1000,from: {opacity: 0},to: {opacity: 1}}); }}}
});

这里唯一的问题是,对于CSS3动画,需要使用Sass代码,为此,需要使用到Compass。

在主题包,要在packages/MyTheme/sass/src/window/Window.scss文件中添加以下Sass代码。下面的代码与javascript文件中的代码的效果是相同的。

@import "compass/css3/transition";.x-window.x-hide-offsets {@include opacity(0);
}.x-window {@include single-transition(opacity, 1000ms);@include opacity(1);
}

需要将Sass样式表编译到生产使用的CSS代码中。由于这包含在Sencha Cmd和Sencha的生成过程中,所以在使用Sencha Cmd生成应用程序时2,Sass样式表会自动编译。

现在,还不需要生成整个应用程序,只需要快速测试动画,因而只编译一下样式表就行了。要实现这个,在命令行运行以下命令就行了:

sencha ant sass

或者

sencha app watch

第一个命令会运行Apache Ant任何来编译一次Sass。第二个命令功能更强大,不过它要求下载并安装Java开发工具包7。可以对比一下sencha app watch和Compass命令compass watch。Sencha Cmd会监视应用程序,每当但单击保存的时候,Sencha Cmd就会编译应用程序并编译Sass样式表。当改变被检测到的时候,只会执行最低限度的工作,以便更新应用程序和CSS,并重新生成Sass。

瞧……动画已经可以在旧和新的浏览器中工作了。。

如果想聊更多的高级Ext JS主题技术,请关注Ext JS高级主题课程。通过查阅http://www.sencha.com/training/来参加遍布世界各地的高级主题课程。



转载于:https://www.cnblogs.com/muyuge/p/6333686.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/473584.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kapacitor安装及使用

1 安装 1.1 Tar包安装 (1)下载 wget https://dl.influxdata.com/kapacitor/releases/kapacitor-1.5.5_linux_amd64.tar.gz(2)安装 $ tar xvfz /opt/package/kapacitor-1.5.5-static_linux_amd64.tar.gz -C /home/tigk/.local/ …

Python答题:LinteCode简单题库(一)

366. 斐波纳契数列:查找斐波纳契数列中第 N 个数。 所谓的斐波纳契数列是指: 前2个数是 0 和 1 。 第 i 个数是第 i-1 个数和第i-2 个数的和。 斐波纳契数列的前10个数字是: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ... 给定 1,返回 …

天池 在线编程 扫雷(BFS)

文章目录1. 题目2. 解题1. 题目 描述 现在有一个简易版的扫雷游戏,你将得到一个n*m大小的二维数组作为游戏地图。 每个位置上有一个值(0或1,1代表此处没有雷,0表示有雷)。 你将获得一个起点的位置坐标(x&a…

Linux搭建高并发高可用Redis集群

安装Redis Redis 是一个高性能的key-value数据库。常用作缓存服务器使用。 1. 下载redis安装包,redis-3.2.11.tar.gz(http://download.redis.io/releases/redis-3.2.11.tar.gz) > wget http://download.redis.io/releases/redis-3.2.11.…

Flink简介

1 什么是Flink Apache Flink 是一个框架和分布式处理引擎,用于在无边界和有边界数据流上进行有状态的计算。Flink 能在所有常见集群环境中运行,并能以内存速度和任意规模进行计算。 它的主要特性包括:批流一体化、精密的状态管理、事件时间支…

Winform datagridview相关操作

datagridview显示行号的2种方法: 方法一: 网上最常见的做法是用DataGridView的RowPostPaint事件在RowHeaderCell中绘制行号: privatevoiddataGridView1_RowPostPaint(objectsender, DataGridViewRowPostPaintEventArgs e){try{e.Graphics.DrawString((e.…

天池 在线编程 旅行计划(暴力回溯)

文章目录1. 题目2. 解题1. 题目 描述 有n个城市,给出邻接矩阵arr代表任意两个城市的距离。 arr[i][j]代表从城市i到城市j的距离。Alice在周末制定了一个游玩计划,她从所在的0号城市开始,游玩其他的1 ~ n-1个城市,最后回到0号。 A…

初始化环境配置:CentOS 7.4x64 系统安装及基础配置

1.安装CentOS操作系统 ① 在进入系统引导后,会进入文字界面,选择install CentOS7 (用键盘上的方向键↑、↓来选择要执行的操作,白色字体表示选中,按下回车,进入下一步操作) ② 按回车执行安…

天池 在线编程 拿走瓶子(区间DP)

文章目录1. 题目2. 解题1. 题目 描述 有n个瓶子排成一列&#xff0c;用arr表示。 你每次可以选择能够形成回文连续子串的瓶子拿走&#xff0c;剩下的瓶子拼接在一起。 返回你能拿走所有的瓶子的最小次数。 n<500 arr[i]<1000示例 例1: 输入&#xff1a;[1,3,4,1,5] …

Flink运行时架构

1 运行时相关的组件 Flink运行时架构主要包括四个不同的组件&#xff1a;作业管理器&#xff08;JobManager&#xff09;、资源管理器&#xff08;ResourceManager&#xff09;、任务管理器&#xff08;TaskManager&#xff09;&#xff0c;以及分发器&#xff08;Dispatcher&a…

大型网站电商网站架构案例和技术架构的示例

大型网站架构是一个系列文档&#xff0c;欢迎大家关注。本次分享主题&#xff1a;电商网站架构案例。从电商网站的需求&#xff0c;到单机架构&#xff0c;逐步演变为常用的&#xff0c;可供参考的分布式架构的原型。除具备功能需求外&#xff0c;还具备一定的高性能&#xff0…

Spring JPA

http://files.cnblogs.com/weishuai90/spring.rar转载于:https://www.cnblogs.com/weishuai90/p/3567794.html

天池 在线编程 删除字符(单调栈)

文章目录1. 题目2. 解题1. 题目 描述 给定一个字符串str&#xff0c;现在要对该字符串进行删除操作&#xff0c; 保留字符串中的 k 个字符且相对位置不变&#xff0c;并且使它的字典序最小&#xff0c;返回这个子串。 示例 例1: 输入:str"fskacsbi",k2 输出:&quo…

Flink常见流处理API

Flink 流处理API的编程可以分为environment&#xff0c;source&#xff0c;transform&#xff0c;sink四大部分 1 Flink支持的数据类型 在Flink底层因为要对所有的数据序列化&#xff0c;反序列化对数据进行传输&#xff0c;以便通过网络传送它们&#xff0c;或者从状态后端、…

Flask框架项目实例:**租房网站(二)

Flask是一款MVC框架&#xff0c;主要是从模型、视图、模板三个方面对Flask框架有一个全面的认识&#xff0c;通过完成作者-读书功能&#xff0c;先来熟悉Flask框架的完整使用步骤。 操作步骤为&#xff1a; 1.创建项目2.配置数据库3.定义模型类4.定义视图并配置URL 5.定义模板…

Android中的APK,TASK,PROCESS,USERID之间的关系

开发Android已经有一段时间了&#xff0c;今天接触到底层的东西&#xff0c;所以对于进程&#xff0c;用户的id以及Android中的Task,Apk之间的关系&#xff0c;要做一个研究&#xff0c;下面就是研究结果: apk一般占一个dalvik,一个进程,一个task。当然通过通过设置也可以多个进…

天池 在线编程 插入五

文章目录1. 题目2. 解题1. 题目 描述 给定一个数字&#xff0c;在数字的任意位置插入一个5&#xff0c;使得插入后的这个数字最大 示例 样例 1: 输入: a 234 输出: 5234 来源&#xff1a;https://tianchi.aliyun.com/oj/141758389886413149/160295184768372892 2. 解…

Flink的Window

1 Window概述 streaming流式计算是一种被设计用于处理无限数据集的数据处理引擎&#xff0c;而无限数据集是指一种不断增长的本质上无限的数据集&#xff0c;而window是一种切割无限数据为有限块进行处理的手段。 Window是无限数据流处理的核心&#xff0c;Window将一个无限的s…

标记语言Markdown介绍以及日常使用

Markdown介绍 Markdown是一种文本标记语言&#xff0c;用于快速文档排版Markdown文件为纯文本文件&#xff0c;后缀名为 .mdMarkdown介于Word和HTML之间 比起Word&#xff0c;Markdown是纯文本&#xff0c;排版文档轻量、方便、快速。比起HTML&#xff0c;Markdown简单直观&…

Everyday is an Opportunity

Quote Of The Day: “Everyday is an Opportunity to Learn and Grow, Don’t Waste Your Opportunity.” – Alan THE END 转载于:https://www.cnblogs.com/lan1x/p/3572914.html