雪庐小酒学ExtJS(一):ExtJS 6.2 项目搭建

一、  安装:

(创建的前提是必须是电脑的环境中有java和tomcat才行,在ExtJS6.2就不需要再装ruby)

下载两个压缩包:分别是

ext-6.2.0-gpl(这个是Extjs 的sdk文件,创建新项目的时候需要用)。

SenchaCmd-6.5.2-windows-64bit (这个下载下来是解压,或者不解压。反正最后看到的是一个.exe 结尾的安装文件 ,直接安装运行即可PS:一定要记住安装到哪个文件夹下面了)

二、  运行:

安装好SenchaCmd-6.5.2-windows-64bit.exe 之后,点击Windows的命令提示窗

进入到提示窗中:

使用cd 命令进入刚才 SenchaCmd-6.5.2-windows-64bit.exe 安装的那个文件夹中,我的路径是:C:\Users\win7\bin\Sencha\Cmd

效果如下:

命令行提示符如下:

在此驶入sencha help 可以查看命令相关的提示信息(有点与javac 之后出现的那些东西类似)。

三、  创建第一个项目:

创建项目首先得找到ext-6.2.0-gpl 的解压路径如下图所示

然后在刚才打开的那个命令行中,切记一定是在C:\Users\win7\bin\Sencha\Cmd 也就是说在SenchaCmd-6.5.2-windows-64bit.exe 的安装路径下运行如下语句,创建第一个demo项目。

创建语句如下:

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

第一个红圈是刚才解压的ext-6.2.0-gpl 文件路径 ,第二个红圈是你要生成的demo的路径

但是很显然,我这个生成的太乱了所以我决定在此创建一下,这回我单独在创建一个项目文件夹来保存生成的这些文件。

再次创建的情况如上。当出现如下画面的时候,就表示已经完成了demo的创建。

那么新创建的demo目录则如下图所示:

四、  运行demo:

此时进入新建好的项目文件夹中运行 sencha app watch 即可运行。但是此时会出现如下问题(我所遇到的)

这很明显是因为cmd的命令没有添加到path环境变量中,导致sencha 命令无法再全局使用(一般情况下,会在安装cmd的时候直接把命令添加到path中,但是不知道为什么我的不行,所以需要手动添加)。所以需要把之前的cmd的安装路径添加到path中,如何添加我就不说了,安装过java的都应该知道怎么添加。

C:\Users\win7\bin\Sencha\Cmd------》此路径添加到path环境变量中。即可在生成的demo文件夹下运行sencha app watch 如下图所示

打开浏览器输入:localhost:1841(如果1841端口号占用,会自动变成其他的端口号,留意里面的提示就好),即可查看默认生成的项目

此时,一个完整的demo就展现在眼前了。

原文地址:https://www.cnblogs.com/lightsnowy/p/8342054.html

时间: 2024-10-08 01:26:35

雪庐小酒学ExtJS(一):ExtJS 6.2 项目搭建的相关文章

ExtJS项目打包部署:雪庐小酒学ExtJS

雪说 之前写过的一篇关于ExtJS + Java的部署.不过当时还不知怎么去打包ExtJS 程序,所以把整个ExtJS的项目上传了上去.具体的过程可以看我上一篇的博客. 这回将介绍真正的打包发布的方式,主要有两个过程,一个是打包(后面介绍)另外一个就是部署(博客链接) 打包 打包,是将ExtJS的项目(此处单指,使用官方模板以命令行的方式生成的项目)文件.经过处理之后,只保留有效的部分,其余的都压缩,形成的小的压缩包文件.可以大大的减少浏览器的加载时间. 过程很简单,不过需要几个步骤: 第一步:

ExtJS视频教程 ExtJS实战教程完整版30讲

本教程由齐学网整理提供,更多好资源尽在齐学网! ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架.        其功能丰富,无人能出其右.        无论是界面之美,还是功能之强,ext的表格控件都高居榜首.单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现.自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能.再加上可编辑g

小故事学设计模式之Decorate: (二)老婆的新衣服

老婆有一件蓝色的裙子和一件粉色的裙子, 不管怎么穿,她还是原来的老婆. 但是在软件里就不一定了, 如果把老婆比作一个class的话, 有一种做法是会因为增加了两个新的Property而继承出两个子类: "穿裙子的老婆, 穿粉色上衣的老婆". 你这样弄出两个子类也没什么不对, 问题是当MM的有上百件服装的时候,就会产生上百个子类,这个不好,将来万一父类一变化,下面上百个子类都要一个个地去修改,太乱了. 有一个更合理的方式来解决这个"老婆的装饰问题".我们的要求是:  

ExtJS之基本概念、环境搭建

一.基本概念 ExtJS 简介 - ExtJS 是一个兼容各浏览器的纯 JavaScript 应用程序框架,使用它可以创建最佳跨平台互联网应用程序 为什么 ExtJS 原因 二.环境搭建 目录结构 - 推荐下面这种目录结构 使用ExtJS 动态加载 引入库的方法 发布 Containers容器 Panel Layouts布局 布局系统如何工作 组件component 别名和延迟初始化 显示和隐藏 浮动组件 数据 模型和存储(Model & Stores) 创建一个模型 Model 创建一个存储S

UESTC_小panpan学图论 2015 UESTC Training for Graph Theory<Problem J>

J - 小panpan学图论 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit Status 小panpan不会图论,所以图论专题他非常刻苦地学习图论. 今天他认真地学习了萌神的ppt,学习了一下Floyd算法,手持两把锟斤拷的他, 口中疾呼烫烫烫,马上找了到OJ上找了道FLoyd的题: n个点,m边的无向连通图,无重边,无自环,每条边的长度都是1,求任意两点之间的

【ExtJs】ExtJs的富文本编辑器

对于ExtJs表单中的多行文本框,本身就自带一个没有格式的textareafield. 如果要呈现一个带格式的文本编辑器给用户,ExtJs本身就自带一个htmlEditor. 一.基本目标 比如下图的带编辑器的文本框. 这个组件具有加粗.斜体.下划线,增加减少字号,颜色等功能,而且自动会对文本自动编码,无需担心跨站攻击,只要在后台防范好SQL注入就可以了. 如下图,即使在文本框输入如下网页脚本,也是能够正常运行的. 二.基本思想 首先,这个网页在ExtJs的布局如下,这个组件是由一个含有bbar

【ExtJs】ExtJs的文件上传

ExtJs的文件上传也是采用Ajax的方式,基本上,用户上传之后,其结果马上推回给前台.下面以一个ExtJs图片上传系统,说明这个问题. 一.基本目标 实现如下的一个图片上传的系统,不是基本图片格式,大于1M的图片不给予上传,上传成功显示图片,上传不成功,则显示错误信息. 二.基本思想 这个工程的目录结构如下, 如FileUpload.html的HTML布局所示,js与ext-theme-classic下面皆是Ext的基本资源.然后Upload文件夹用来存放上传的图片,FileUpload.ht

Extjs Hello extjs

<html > <head runat="server"> <title></title> <link rel="stylesheet" href="Js/ext-4.2/resources/css/ext-all-neptune.css"/> <script src="Js/jQuery/jquery-1.8.2.min.js" type="text

小代学Spring Boot之数据源

想要获取更多文章可以访问我的博客?-?代码无止境. 经过一天对Spring Boot的研究,小代同学已经对Spring Boot框架有了一个大概的认识.并且还创建了一个简单的Spring Boot的Web应用程序,如果你还不知道如何创建的话,可以访问<小代学Spring Boot之开篇>这篇文章.下一步陈Boss让小代做的是使用Spring Boot项目连接数据库. 相信我们都知道,在连接数据库的时候我们一般都会使用数据库连接池,这样做的好处在于可以重用数据库资源,还可以统一管理数据库连接,避