使用Sencha cmd安装extjs6

1.安装Ruby（ruby的主题包，帮助extjs生成主题样式，而DevKit是ruby需要的）Ruby是sencha cmd 的一个支持环境

ruby32位下载地址：http://dl.bintray.com/oneclick/rubyinstaller/ruby-2.2.2-i386-mingw32.7z

ruby64位下载地址：http://dl.bintray.com/oneclick/rubyinstaller/ruby-2.2.2-x64-mingw32.7z

安装完成后，打开Dos命令窗口，输入：ruby -v，如果出现版本信息，则表示安装成功。

并且别忘记把ruby.bin目录地址加入本机用户变量的“path”变量中。

2.安装DveKit，这个是ruby需要的相关工具。

DevKit32位下载地址：http://dl.bintray.com/oneclick/rubyinstaller/DevKit-mingw64-32-4.7.2-20130224-1151-sfx.exe

DevKit64位下载地址：http://dl.bintray.com/oneclick/rubyinstaller/DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe

下载DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe完成后，双击解压，解压时选择自己指定的文件路径

（1）然后cmd进入DveKit解压后路径，输入ruby dk.rb init，然后显示了当前安装的Ruby处理系统，在DevKit展开文件夹中自动生成了config.yml文件。

（2）再输入ruby dk.rb instal，显示如下信息表示错误：

Invalid configuration or no Rubies listed. Please fix 'config.yml'
and rerun 'ruby dk.rb install'

①打开Devkit路径下的config.yml文件，在原来基础上添加Ruby路径

# Example:
#
# ---
# - C:/ruby19trunk
# - C:/ruby192dev
#
---

添加ruby路径

# Example:
#
# ---
# - C:/ruby19trunk
# - C:/ruby192dev
#
- D:\A_JAVALearn\Sencha\Ruby
---

（别忘记横线后还有一个空格哦）

②再次执行ruby dk.rb install显示如下即可成功：

[INFO] Updating convenience notice gem override for 'D:/A_JAVALearn/Sencha/Ruby'
[INFO] Installing 'D:/A_JAVALearn/Sencha/Ruby/lib/ruby/site_ruby/devkit.rb'

（3）cmd进入Ruby存放的bin地址：测试检查是否安装成功：gem install rdiscount --platform=ruby如果能安装成功rdiscount成功，说明Devkit成功

D:\A_JAVALearn\Sencha\Ruby\bin>gem install rdiscount --platform=ruby
Fetching: rdiscount-2.2.0.1.gem (100%)
Temporarily enhancing PATH to include DevKit...
Building native extensions.  This could take a while...
Successfully installed rdiscount-2.2.0.1
Parsing documentation for rdiscount-2.2.0.1
Installing ri documentation for rdiscount-2.2.0.1
Done installing documentation for rdiscount after 2 seconds
1 gem installed

①如果报错，那是因为ruby被墙，所以我们需要把镜像地址本国地址：http://gems.ruby-china.org/

首先在bin目录中输入gem source查看镜像地址

再输入

gem sources --remove http://rubygems.org/

最后输入

gem sources --a http://gems.ruby-china.org/

②替换成功后再次输入 gem install rdiscount --platform=ruby即可

（4）接下来cmd在此目录继续安装主题包

gem install compass

3.安装Sencha cmd

傻瓜式安装完毕后，dos界面进入sencha刚才存放的地址，直接输入sencha即可查看到当前版本。可以按照这个版本安装：

http://jingyan.baidu.com/article/335530da82d71d19ca41c34c.html

还有为了以后dos直接在c盘下都可以查询到版本（sencha即可查询版本），将存放sencha的根目录地址放入“系统变量”中

4.正式开始生成extjs

extjs6.0.0 gpl正式版下载地址：https://www.sencha.com/legal/gpl/。提示：在写地址时最好写163邮箱的，QQ邮箱就别写了，太慢。

（1）cmd进入想要存放项目的地址

（2）运行命令sencha -sdk [解压后的ext-6.0.0的位置] generate app [项目名称] [项目文件名] 。例如： sencha -sdk D:\A_JAVALearn\ext-6.2.0-gpl generate app first First

提示：项目名称first要项目跑起来在浏览器中才看得见，项目文件名First是存放整个项目的文件名

（3）然后cmd进入到创建的项目文件名中，运行

sencha app watch

（4）最后用浏览器输入地址即可成功查看。

http://localhost:1841

效果如下：

5.将sencha生成的extjs目录加入web项目中

extjs通过sencha 构建解压后的目录结构说明

     app     extjs的开发源码目录，包含应用的模型、视图、控制器及存储定义目录。  
     - -    controller 控制器     
     - -     model      模型  
     - -     store      数据  
     - -     view       视图  
     build              extjs和源码压缩和优化后的可发布的目录  
     ext                extjs的sdk包括源代码和样式  
     app.js             应用主入口javascript文件。  
     app.json           js配置文件  
     bootstrap.js       系统初始化和样式类加载文件  
     index.html         应用HTML入口文件  
     packager.json      用于Sencha Cmd 创建打包应用时的配置文件  
     resources          包含应用所需的CSS和图片资源。

web项目中需要extjs文件和目录：
-extjs-all.js
-extjs-base.js
-zoomkey
-resource
-plugins

将sencha 生成的extjs目录拷贝到web项目中

未完待续--------

前文1-3参照：http://www.cnblogs.com/eshinex/p/4617554.html

后文4参照：http://blog.csdn.net/cookysurongbin/article/details/49748787

使用Sencha cmd安装extjs6

猜你喜欢