zoukankan      html  css  js  c++  java
  • 1、手把手教你Extjs5(一)搭建ExtJS5环境

    Ext JS 5 的主要特性包括:

    • 新的数据绑定方式
    • 新增支持 MVVM 模式,并且依然支持 MVC 模式
    • 对手持设备更友好,针对触屏设备进行优化
    • 新的主题 Crisp / Neptune Touch(针对触屏优化)
    • Routing / URI
    • 抛弃对超旧浏览器的支持,目前支持 IE 8+ / Safari 6+ / Opera 12+ /Firefox / Chrome / Safari iOS 6+ / Chrome Android 4.1+ / IE 10+ Win 8
    • 抛弃旧浏览器带来的性能提升
    • Widgets
    • 新的组件(如 Tagfield 等)

    Sencha Cmd 5 with ExtJS 5 的注意事项

    下面我先来分享一下我在使用 Sencha Cmd 5 with ExtJS 5 时候遇到的需要注意的地方:

    • 如题所示,ExtJS 5 需要 Sencha CMD 5 ,不再支持 Sencha Cmd 4.x
    • Sencha Cmd v5.0.0116 有 BUG ,使用的时候会遇到 Ext.Factory.controller is undefined 的问题
    • sencha upgrade 命令还没准备好,无法安装最新的 Sencha Cmd v5.0.0.160,而是安装 5.0.0116

    Sencha CMD 5 with ExtJS 5

    1. 下载并安装 Sencha Cmd

    sencha upgrade 无法保证最新的版本(小版本)。

    所以请到官方网站: http://www.sencha.com/products/sencha-cmd/download 下载最新版本的 Sencha Cmd,并执行安装。

    sencha cmd intall

    安装后,需要重启你的终端(命令行面板),才可以启用 Sencha Cmd 5

    2. 下载并解压 ExtJS 5 SDK

    请到官方网站下载最新的 SDK :https://www.sencha.com/products/extjs/

    下载完解压后会得到一个 ext-5.0.0 的包(文件夹形式)

    3. 使用 sencha generate app 命令生成 ExtJS 项目环境

    需求:安装 Sencha Cmd 5  Ruby 1.9.3  ExtJS SDK ( Ruby 1.9.3 各平台的安装方式请自行谷歌,Sencha Cmd 4.x 的时候仅支持 Ruby 1.9.3 ,5.x 未验证是否支持其它版本,但支持 5.x )

    打开终端(Windows 下是 CMD),然后运行以下命令:

    sencha -sdk {pathToSDK} generate app {appName} {pathToProject}

    其中 pathtoSDK 是 ExtJS SDK 的路径,appName 是 ExtJS APP 的 app name ,pathToProject 是要生成后要保存的路径 
    举个例子:

    sencha -sdk /Users/lingyired/Documents/framework/ext-5.0.0 generate app fivedemo /Users/lingyired/Documents/extjs/fivedemo

    sencha generate app

    完成之后,/xxx/xxx/extjs5demo 这个目录下,就会有一个 名为 fivedemo 的 ExtJS 5 项目。

    ExtJS 5 项目结构

    4. 如何访问项目

    由于 ExtJS 项目使用 XMLHttpRequest 来动态加载不同的 JS 文件,所以项目无法支持直接打开静态的 HTML ,如果你直接打开,可能会得到类似的报错:

    *XMLHttpRequest cannot load file:xxx/fivedemo/bootstrap.json. Cross origin requests are only supported for HTTP. *

    也就是说,你想要访问这个 demo 项目,就需要一个小型的服务器环境。

    而 Sencha Cmd 是支持这个服务的。

    先在终端进入到项目的目录:

    cd /Users/lingyired/Documents/extjs/fivedemo

    然后运行:

    sencha web start

    然后就可以访问 http://localhost:1841/ 访问这个项目了

    ExtJS 5 原始项目 DEMO

    sencha web 支持 -port 参数来设定端口,如:

    Sencha Web port

    Last. Sencha Cmd 的其它运用

    • 使用 Sencha Cmd 的一个重要的原因是它方便项目的打包,使用 sencha app build 就可以打包(代码要规范)
    • ExtJS Theming 离不开 Sencha Cmd
    • ExtJS SDK 的升级

    这里不展开说明,大家可以自行谷歌或者查看官方文档。

  • 相关阅读:
    ssh时传递环境变量
    linux删除文件后磁盘空间未释放的问题
    gitlab-ci配置疑难备忘
    javac老提示无效的标记
    unity5.6里Baked Lighting下面几个Lighting Mode的解释
    屌爆的xamarin,一人单挑google/apple/windows
    xamarin.droid自己的示例工程有些都装不上模拟器,是因为它的architectures选项没设对
    使用NFC读卡器ACR122u读取银行卡信息
    【转】Gnirehtet – 为 Android 设备提供反向网络连接[Windows、macOS、Linux]
    【转】1分钟学会U盘启动安装Linux系统
  • 原文地址:https://www.cnblogs.com/niejunchan/p/4978746.html
Copyright © 2011-2022 走看看