构建ExtJs项目

csnd苏先森

于 2024-01-11 08:00:00 发布

阅读量368

点赞数 7

分类专栏： ExtJs 文章标签： javascript 前端框架前端

本文链接：https://blog.csdn.net/qq_45946861/article/details/135516231

版权

ExtJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了使用npm和SenchaCmd两种方式安装和构建ExtJS7.7.0应用，包括AppGeneratorCLI的详细步骤，以及如何通过SenchaCmd创建不同版本的项目和执行常见任务，同时提及了原生JavaScript和CSS的引用方法。

摘要由CSDN通过智能技术生成

1、npm 方式（支持7.2及更高版本）

官方文档 CLI Reference | Ext JS 7.7.0

下载App Generator CLI ext-gen构建

构建命令

# 安装脚手架 
# 可指定版本 @版本号 
# 仓库地址https://www.npmjs.com/package/@sencha/ext-gen?activeTab=versions
npm install -g @sencha/ext-gen		

# 交互模式构建 app
ext-gen app -i	

#构建 工具包为classic 的  主题为theme-material的 APP name为Demo 的项目
ext-gen app -t classicdesktop -c theme-material -n Demo

命令参数

模板选项 -t

主题选项 -c / -m

命令脚本见package.json下 `scripts`配置项

运行: npm run start / npm start / npm run dev

打包: npm run build

2、Sencha Cmd 方式

官网下载sencha cmd：Try Sencha Ext JS: A Comprehensive JavaScript Framework - Sencha

某度网盘下载：百度网盘请输入提取码

若已安装旧版sencha cmd 可通过命令 sencha upgrade 下载更新最新版

若需要支持旧版sdk样式项目，安装过程中需要勾选以下按钮

构建命令

sencha geerate app --ext@6.2.0 --classic Demo ./demo

常用命令

sencha help 查看命令帮助

sencha help command 查看对应命令使用帮助如 sencha help generate app

sencha generate app --ext --classic Demo ./demo 再./tps目录下构建sencha cmd对应sdk版本classic工具包项目，项目名称为Tps

可通过-sd指定本地sdk
也可通过--ext@版本号 指定版本

如 sencha -sd path/to/sdk generate app -classic Demo ./demo

sencha app watch 运行并监视项目

可通过 -f 开启fashion 动态样式

sencha config -g -p sencha.sdk.path=path/to/sdks -s 全局保存配置属性指定sdk安装目录

sencha app build 打包压缩

3、原生js

js、css文件连接下载：extjs (v6.2.0) - Ext JS is the developer's choice for building powerful desktop web applications using JavaScript and web standards. | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

将js、css文件引入html中

<!-- 主题样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/extjs/6.2.0/classic/theme-aria/resources/theme-aria-all-debug.css"/>

<!-- extJs -->
<script src="https://cdn.bootcdn.net/ajax/libs/extjs/6.2.0/ext-all-debug.js"></script>

<!-- 自己的js代码 -->
<script src="./js/app.js"></script>