资源预览内容
第1页 / 共18页
第2页 / 共18页
第3页 / 共18页
第4页 / 共18页
第5页 / 共18页
第6页 / 共18页
第7页 / 共18页
第8页 / 共18页
第9页 / 共18页
第10页 / 共18页
亲,该文档总共18页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
一步一步创建一步一步创建 SenchaSencha ArchitectArchitect Files(aux)Files(aux)作成:猛士天下行(简称:小猛)作成:猛士天下行(简称:小猛)一点小牢骚:最近在做一个项目,经过寻寻觅觅发现 Extjs 4.2 挺符合要求的,那就它了。上了手了才发现上了贼船了,中文的开发资料巨少,即使是中文官网的资料,也让人不敢恭维。上 Sencha 的英文官网,速度慢不说,查找一些资料也不是特别方便,谁让咱们上学的时候没有学好英文呢:(,英语老师我对不起您们啊啊啊!。带着 4,5 个兄弟开发,中间发现数值控件 Number Field,居然不支持千位分割符(, ) ,太不地道了,在官网论坛上一顿查找,发现一个叫 Greivin Britton 的巴拿马雷锋,居然已经解决这个问题了。欢天喜地的下下来,咦,不打成包做成组件没有办法在 Architect 3.0 里面使用,而且多人开发,咋让兄弟们的 Architect 里面也用上啊,必须给整,说弄就弄了,参考各路天书资料,弄了几天都快崩溃了,老是这个不行,那个不行的,一直捅咕了 3,4 天才搞定,回头一看,我要骂娘了啊,啥狗屁资料啊啊啊!破天荒第一次万年潜水员,准备冒个泡,给大家整个资料,帮助自己和大家梳理一下这个制作流程,希望对大家平常的开发有所帮助。一、环境准备一、环境准备(小猛所在的公司,在大连主做日本外包,所以操作系统是日文的,同志们别喷我,上有老下有小,中间还有老婆要来养,都是为了混口饭吃,大家这么高的水平估计都能看的懂,其实我也想干国内的啊,有合适的大家给介绍介绍啊!呵呵,千万不被老板看见啊!:) )1 1、安装、安装 SenchaSencha ArchitectArchitect 3.03.0 估计看这个文章的同志们都已经安了,这里就不废话了,可以到 Sencha 的官网上下载并安装,因为安装的时候还会从网络上下载一些相关,所以需要联网哦!2、安装 JDK,我转了 JDK 7.6,这里就不罗嗦了,下载下来后,直接点击安装就 OK 了。3、安装 Sencha Cmd 4.0方式 1:上官网下载 Sencha Cmd4.0 并安装。注意本文档作成时,Sencha Cmd 5.0 已经发布,Cmd 5.0,我没有用过,以下所有操作都是在 Cmd 4.0 上进行的。方式 2:稍有复杂,在成功安装 Sencha Architect 3.0 的基础上,打开 Architect 的安装目录,如下图。点击打开 assetscmd4.0.4.84 文件夹,重大发现呢!有我们要的 Cmd 的压缩包!其实Architect 内部调用 Cmd 命令,就是通过这个压缩包实现的,如下图。随便找个地方给解开,我找了 D 盘来放,如下图。在环境变量里设置 Path 路径(你可千万别说你不知道在哪里设置这个环境变量!) ,如下图上述两个方法,任选其一安装完毕后。打开命令窗口,输入 sencha,显示如下图。OK,成功安装上了,呵呵,大家可以耍了呢。二、使用 Cmd 生成 Package1、生成 Workspace,必须生成 Workspace,才能继续执行后续的命令。在窗口中输入:sencha generate workspace d:/workspace在 D 盘下生成 Workspace 所对应的文件夹,下面会有.sencha 和 packages 两个文件夹。2、生成 Package接下来的操作,为方便起见,将以我自己这次做成 Package 组件为例进行讲解。在命令窗口中输入 cd D:workspace 命令,进入 D:workspace 文件夹。在命令窗口中输入 sencha generate package NumericField,必须进入 workspace 文件夹,才能输入生成 Package 的命令,如下图。NumericField,就是咱们要生成的 Package 的名字。三、编辑生成的 Package 1、简单介绍一下生成的文件夹和相关文件进入生成的 D:workspacepackagesNumericField,显示如下的文件结构,如下图。.sencha.sencha 文件夹:Cmd 生成的与 Package 相关的基础配置文件夹,不用修改。docsdocs 文件夹:可以存入与当前 Package 相关的介绍文档,不放也 OK,本次未触及。exampleexample 文件夹:可以放入如何使用该 Package 的例子程序,不放也 OK, 本次未触及。licenseslicenses 文件夹:该 Package 的 License 方面的文件,不做处理也 OK, 本次未触及。overridesoverrides 文件夹:根据需要自行设置,本项目中未触及。resourcesresources 文件夹:如果当前 Package 需要使用到 css 或是图片等一些资源,可以在将相关内容存入该文件夹中。sasssass 文件夹:如果当前 Package 使用到 sass 一些定义,可以将相关文件存入该文件夹中,本次未触及srcsrc 文件夹:代码文件存放地,必须要放的!build.xmlbuild.xml 文件:build 处理流程文件,基本上不需要修改,本次未触及。package.jsonpackage.json 文件:package 的定义文件,非常非常重要,修改是必须的哦!Readme.mdReadme.md 文件:不多说了,你懂得,就是 Readme 文件。2、将代码装入 Src 文件夹中Src 文件夹中放的是,最重要的文件之一源代码。本次放入 NumericField.js。对应的类继承自 Ext.form.field.Number,是对 Number 做了千位分割符和货币符号的扩展。具体代码见附录。3、生成 architect 文件夹,并装入 NumericField.Definition.js在用 Package 命令生成的文件夹中,没有 architect 文件夹,如果没有该文件夹,无法被Architect 3.0 加载,所有必须手动创建这个文件夹,如下图。文件夹生成后,在该文件夹中手动创建 NumericField.Definition.js,该文件会定义这个组件在 Architect 3.0 中的基本信息。以上述内容为例简单介绍一下。ClassAlias:控件别名。ClassName:类名。Inherits:从那个类继承而来。AutoName:控件创建时,自动带上控件名称。HelpText:控件的帮助信息。Toolbox(参考下图)Name:在 ToolBar 中显示该控件的名称。Category:在 Architect 中导入后的目录名称。Groups:在默认组中显示在哪个 Group 中。后续还可以配置 Config,定义控件被加载时控件的默认属性,这里就不写了,大家自己查查吧,让你们体会一下我的痛苦!4、修改 package.json 文件,如下图。内容有点多,整点重点的说说。Architect 中CompatFrameworks:支持的 ext 版本。Classes 中Definition:定义 js 文件名,就是咱们上面定义的 NumericField.Definition.js。ClassName:类名Js:定义的代码文件。就是咱们上面定义的 NumerField.jsCss:使用到的 css,因本控件中无使用所以就不用填写。5、接下来最最重要的一步,将做好的控件包文件名重新处理一下(就是这一步困住我好几天啊,就是因为不太清楚需要这样处理,造成一直无法加载) ,如下图将 package 中 NumericField 文件夹中,追加一个叫 1.0 的文件夹,代表该版本为 1.0,将前面步骤作好的 Package 包中的所有内容,移入到这个 1.0 文件夹中,如下图好,至此我们香喷喷的 Package 就算做好了,但是它还不是 SenchaSencha ArchitectArchitect FilesFiles,其他同志们还是不能非常方便的导入它,咋办?!且听下章分解。四、Architect 中生成 Sencha Architect Files1、打开 Architect3.0,点击 Edit-Preferences-File,出现如下图将 Extensions 改成:D:/workspace/packages,其实把这里的东西拷贝到它默认的Extensions 路径中也可以,随便大家了,点 save 保存。2、在 Toolbar 的 Extensions 中就能看见这个控件了。如果不行,请重启 Architect右键点击该控件,如果有在 Package 下还有 2.0,3.0 的文件夹,这时候可以进行选择。3、导出 Sencha Architect Files(aux 文件)右键点击控件,选中 Package Extensions,弹出如下窗口。选好保存路径和 Archive Name 文件名,点击保存,就会生成一个 Numberic Field.aux 文件。至此导出大成功!掌声!接下来,把这个文件发给同志们,然后各个同志们在 Architect 中点击 Install User Extension,就可以把这个控件安装到自己的 Architect 中。啥?找不到在什么地方,能不能再来个图?!大胆,把这个小子拖出去!附录:NumericField.js 原代码:没有办法在代码在 word 里面排版就是这个德行了。大家忍着点吧。/* GNU General Public License Usage* This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http:/www.gnu.org/copyleft/gpl.html.* http:/www.gnu.org/licenses/lgpl.html* description: This class provide aditional format to numbers by extending Ext.form.field.Number* author: Greivin Britton* email: brittongrgmail.com* version: 2 compatible with ExtJS 4*/Ext.define(Ext.ux.form.NumericField, extend: Ext.form.field.Number,/Extending the NumberFieldalias: widget.numericfield,/Defining the xtype,currencySymbol: null,useThousandSeparator: true,thousandSeparator: ,alwaysDisplayDecimals: false,fieldStyle: text-align: right;,initComponent: function()if (this.useThousandSeparator el
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号