基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)

简介: 基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
原文转载: https://www.yundashi168.com/322.html

因为各种原因,需要在extjs项目中开发点新功能,由于之前没好好接触过extjs,我前端领域主要学的是React技术栈。所以开始找资料搭建ExtJs运行环境。

说一段小插曲,由于看见extjs项目下有index.html文件,于是,在webstorm工程中用浏览器打开index.html文件,试图把项目跑起来,在浏览器中打开index.html的时候,是一片空白,活生生的打脸了。我潜意识的意识到,跑项目肯定需要搭建extjs的开发环境的。然而我也不知道需要用什么工具来搭建,没有关键字,搜索百度也是徒劳。我在项目代码中偶然看见了SenchaCmd这个关键字,于是百度下来,就能顺利找到资料了,知道要安装好SenchaCmd。

大家需要学习ExtJS可以上中文网站 http://extjs.org.cn/ 看这本书:《ExtJS 6.2实战》

安装软件

安装SenchaCmd-6.7.0.63-windows-64bit

  • 安装Cmd: SenchaCmd-6.7.0.63-windows-64bit

安装ext-6.2.0-gpl

  • 安装SDK:ext-6.2.0-gpl

安装步骤

解压安装压缩包

解压SenchaCmd-6.7.0.63-windows-64bit和ext-6.2.0-gpl

安装SenchaCmd-6.7.0.63-windows-64bit,记住安装位置目录,我这里安装的目录地址是

C:\Users\Arison\bin\Sencha\Cmd

window cmd切换到C:\Users\Arison\bin\Sencha\Cmd目录下,执行命令

sencha help

如果显示如图所示,就代表安装成功

配置系统环境变量

为什么要配置系统环境变量呢?为了接下来运行项目的命令不会报错。 运行项目的命令:sencha app watch

新建系统变量:EXTJS\_CMD\_HOME 路径就是:C:\Users\Arison\bin\Sencha\Cmd

编辑系统变量Path

新建环境变量:%EXTJS\_CMD\_HOME%

新建ExtJS项目

在路径 C:\Users\Arison\bin\Sencha\Cmd下创建项目:

sencha -sdk [解压后的ext-6.2.0的位置] generate app [项目名称] [项目地址] 

创建项目 extjsDemo extjsDemo是我随便取的项目名。

sencha -sdk C:\ExtJs\ext-6.2.0-gpl\ext-6.2.0  generate app extjsDemo C:\Project\ext

运行ExtJS项目

项目路径执行:

sencha app watch

在你创建的ExtJs项目目录下执行命令: 默认访问路径是:http://localhost:1841 如果你执行了多个extjs项目,端口会随机变化!

项目运行如下:

然后我在sdk自带的项目目录下ext-6.2.0-gpl\ext-6.2.0\templates\admin-dashboard 执行命令 sencha app watch 运行sdk自带的demo工程 然后根据命令行提示,找到访问路径:http://localhost:57346

这是Ext JS Examples项目,项目路径位于: ext SDK ext-6.2.0目录下的templates下的admin-dashboard

C:\ExtJs\ext-6.2.0-gpl\ext-6.2.0\templates\admin-dashboard

项目目录结构

用WebStorm打开项目,项目目录文件结构如下:

原文地址:http://cloud.yundashi168.com/archives/708

相关文章
|
数据采集 存储 前端开发
【爬虫pyspider教程】1.pyspider入门与基本使用
爬虫框架pyspider入门和基本用法。
1943 0
|
2月前
|
数据采集 Web App开发 存储
用Python的Requests+BeautifulSoup爬取微博热搜榜及话题内容
用Python的Requests+BeautifulSoup爬取微博热搜榜及话题内容
|
自然语言处理 前端开发 API
解析CSS文件
【5月更文挑战第23天】解析CSS文件。在Python中,可以使用一些第三方库来帮助解析CSS文件,例如`cssutils`。
195 2
|
9月前
|
CDN
阿里云CDN怎么收费?看这一篇就够了,CDN不同计费模式收费价格全解析
阿里云CDN的费用由基础费用和增值费用组成。基础费用有三种计费方式:按流量、按带宽峰值和月结95带宽峰值,默认为按流量计费,价格根据使用量阶梯递减。增值费用包括静态HTTPS请求、QUIC请求等,按实际使用量收费,不使用不收费。具体收费标准和详细规则可参考阿里云官方页面。
|
运维 监控 NoSQL
【Redis】哨兵(Sentinel)原理与实战全解~炒鸡简单啊
Redis 的哨兵模式(Sentinel)是一种用于实现高可用性的机制。它通过监控主节点和从节点,并在主节点故障时自动进行切换,确保集群持续提供服务。哨兵模式包括主节点、从节点和哨兵实例,具备监控、通知、自动故障转移等功能,能显著提高系统的稳定性和可靠性。本文详细介绍了哨兵模式的组成、功能、工作机制以及其优势和局限性,并提供了单实例的安装和配置步骤,包括系统优化、安装、配置、启停管理和性能监控等。此外,还介绍了如何配置主从复制和哨兵,确保在故障时能够自动切换并恢复服务。
|
机器学习/深度学习 人工智能 监控
Spring Boot与AI机器学习技术探索方向和实施方
Spring Boot与AI机器学习技术探索方向和实施方
405 0
|
机器学习/深度学习 数据挖掘 程序员
Python学习难度的具体标准
【5月更文挑战第6天】Python学习难度因个人编程背景、目标、资源和学习能力而异。对有编程经验者来说,Python的简单语法使其易上手;而对于新手,理解基础概念可能需更多时间。不同应用领域(如Web开发、数据分析)的学习曲线也不同。丰富的学习资源适应各种水平,但选择合适资源很重要。成功学习Python需要逻辑思维、问题解决能力及毅力。总的来说,Python学习难度因人而异,需结合自身条件评估。
421 0
|
机器学习/深度学习 PyTorch 算法框架/工具
时间序列pytorch搭建lstm用电量预测 完整代码数据
时间序列pytorch搭建lstm用电量预测 完整代码数据
945 0
|
XML Java 数据库连接
详解SpringBoot整合Mybatis框架
详解SpringBoot整合Mybatis框架
详解SpringBoot整合Mybatis框架
|
SQL Java 数据库连接
mybatis+PageHelper分页查询及问题解决
mybatis+PageHelper分页查询及问题解决
475 0