Extjs6 --- 学习笔记（1）创建一个新项目

原公司使用的前端框架是Extjs，于是系统学习了Extjs的4和6。旧东家的项目主要为后台管理系统，因此对前端界面UI的要求并不高，侧重于数据的展示与处理，刚开始使用的是Extjs4，后升级成6。现在，把自己的学习过程及学习成果整理记录并分享给大家。

Extjs4有中文API，因此，这里主要分享一下Extjs6.6的学习心得。(っ•̀ω•́)っ✎⁾⁾

网络上有很多搭建Sencha环境的教程，这里我就不教大家啦，给你们一个传送门(✪ω✪)。注意：Sencha CMD的版本要和Extjs SDK的版本一致，不然有可能会报错|ू･ω･` )。遇见过CMD版本低于SDK版本，导致新建项目时报错，无法新建。

现在，我们创建一个新项目，项目模板是Extjs的官方模板admin-dashboard。
新建口令：
sencha -sdk 【SDK安装目录】 generate app -s 【模板目录】【项目名称】【项目目标目录】
例：sencha -sdk E:\Extjs_6.7.0.210 generate app -s E:\Extjs_6.7.0.210\templates\admin-dashboard MyWeb C:\Users\Lily\Extjs\MyWeb

根据模板新建的项目启动后访问项目地址，发现首页没有样式，需要修改配置文件。
① 配置文件：根目录下的app.json。
② 将文件中的代码"【base": "${ext.dir}/build/examples/admin-dashboard/${build.id}",】替换成【"base":"${workspace.build.dir}/${build.environment}/${app.name}/${build.id}",】。

"output": {/*"base": "${ext.dir}/build/examples/admin-dashboard/${build.id}",*/"base": "${workspace.build.dir}/${build.environment}/${app.name}/${build.id}","page": "../index.html","manifest": "../${build.id}.json","appCache": {"enable": false}
},

③ 删除"${ext.dir}"目录，重新build。build口令：sencha app build。
④ 在Cmd操作界面，输入口令：【sencha app watch】，以启动项目，如左图所示。
⑤ 访问项目地址：http://localhost:1841，访问成功后，界面如下图所示。

引用汉化包，代码如右图所示。
将根目录下的app.json中的"requires": ["charts", "font-awesome", "ux" ],
替换成

"requires": ["charts","font-awesome","ux","locale"],"locale": "zh_CN",

再次启动项目，就能看见项目已经成功应用官方模板了，很好看哦~~~(◕ᴗ◕✿)

Extjs6 --- 学习笔记（1）创建一个新项目相关推荐

sandy引擎学习笔记：创建一个立方体
问题:如何利用sandy的类库去创建一个立方体呢? 首先,我们要先了解sandy类库的结构可以看到上面就官方网放出的类库表,有一些很容易理解,像sandy.events 这个和flash.event ...
Vue学习笔记：创建一个Vue实例
目录 1.访问Vue官网https://cn.vuejs.org,进入学习模块下的教程 2.创建页面index.html 3.通过script标签在head部分引入vue.js 4.在body部分创建 ...
【I】ZF2安装和创建一个新项目
2019独角兽企业重金招聘Python工程师标准>>> 参看zend文档 : http://framework.zend.com/manual/2.2/en/user-guide 目 ...
vue react angular 分别如何创建一个新项目
前提,这三个框架都需要依赖node.js 环境,并且node.js 包含npm环境 Vue: (vue-cli 3之前的版本) 1. 全局安装vue-cli 和 webpack npm install ...
vue2.0学习——使用webstorm创建一个vue项目
背景:小白自学vue,翻阅了好多大神的博客,看了网上很多的视频,过程很吃力,好在功夫不负有心人,磕磕绊绊的也算入门了,现为自己vue的学习阶段做个小小的总结.vue2.0的基础知识的总结暂时不总结成文 ...
微信小程序创建一个新项目
1. 新建一个文件夹. 2. 打开微信小程序开发工具,导入新建文件夹:然后输入创建的appId:会自动生成一个project.config.json,打开这个文件,会看到appid这个字段. 3.可以 ...
CAD二次开发学习笔记二(创建一个对话框)
打开资源视图->右击->添加资源->Dialog 双击对话框,弹出MFC类向导,输入类名FirstClass, 确定,创建对话框类.FirstClass.h与FirstClass.c ...
DirectX11 学习笔记3 - 创建一个立方体和轴
该方案将在进一步的程序面向对象. 独立的模型类.更像是一个框架. 其中以超过遇到了一个非常有趣的问题,.获得一晚.我读了好几遍,以找到其他的列子.必须放在某些功能Render里面实时更新,而不是仅仅 ...
Vue 学习笔记（4）Vue-cli4 项目搭建 + 目录结构 + 项目打包、部署
VueCLI 脚手架 Vue CLI 介绍 Vue CLI 安装 Node.js 环境准备安装 Vue 脚手架第一个 Vue 脚手架项目命令创建项目图形化界面创建项目 vue-cli4 目录结 ...

Extjs6 --- 学习笔记（1）创建一个新项目

Extjs6 --- 学习笔记（1）创建一个新项目相关推荐

最新文章

热门文章