Ext Js 6+ 如何引入dashboard模版
最近很多人问我在ext js 6+的版本中怎么引入官方的dashboard模版,正好我好久没写博客了,这里我写一篇博客来说明一下。
在这里以ext js 6.2.1版本为例(注:需要安装Sencha Cmd,以及下载对应的sdk)
1.创建空白项目
在命令行中输入sencha -sdk D:\ASPX\ext-6.2.1 generate app --classic app D:\ASPX\Test
D:\ASPX\ext-6.2.1 是指sdk目录
generate app --classic app 是创建pc端应用,这个应用的包名是app
D:\ASPX\Test 就是所创建项目的目录了
运行一下项目,效果是这样的,这并不是我们想要的模版
2.移植模版
a.打开你所创建的项目,打开app目录
删掉里面所有的文件
b.找到sdk所在目录,依次打开templates->admin-dashboard->app目录
将app目录里面的文件全部复制并替换到你创建项目的app目录中,在这里是指D:\ASPX\Test\app
返回到sdk所在目录,依次打开templates->admin-dashboard->classic->src目录
同样的将这里面的文件全部复制并替换到你创建项目的app目录中,在这里是指D:\ASPX\Test\app
c.打开你创建项目目录中的app.js文件,修改成以下内容
Ext.application({
name: 'app',
extend: 'app.Application',
});
打开你创建项目的app目录中的Application.js文件
注意这里的项目包名是Admin,而我们自己创建的包名是app,所以我们需要对代码进行一些修改才可以使用
Ext.define('app.Application', {
extend: 'Ext.app.Application',
name: 'app',
stores: [
'NavigationTree'
],
defaultToken: 'dashboard',
mainView: 'app.view.main.Main',
requires: ['app.*'],
onAppUpdate: function () {
Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
function (choice) {
if (choice === 'yes') {
window.location.reload();
}
}
);
}
});
用编辑器自带的工具把app目录下所有js文件中的Admin.包名替换为app. 注意别替换错了。在这里因为我们的项目名称是app所以才替换为app
你自己创建的项目名称是什么替换为对应的名称即可
d.返回到sdk所在目录,依次打开templates->admin-dashboard->resources目录
将这里面的文件全部复制到你创建项目的resources目录中,在这里是指D:\ASPX\Test\resources
f.返回到sdk所在目录,依次打开templates->admin-dashboard->sass目录
将这里面的etc,src,var三个文件夹全部复制并替换到你创建项目的sass目录中,在这里是指D:\ASPX\Test\sass
返回到sdk所在目录,依次打开templates->admin-dashboard->classic->sass目录
将这里面的etc,src,var三个文件夹全部复制并替换到你创建项目的sass目录中,在这里是指D:\ASPX\Test\sass
g.返回到sdk所在目录,依次打开templates->admin-dashboard->overrides目录
将这里面的文件全部复制到你创建项目的overrides目录中,在这里是指D:\ASPX\Test\overrides
h.找到你创建项目中app.json文件,找到requires配置,修改为如下配置
"requires": [
"charts",
"font-awesome",
"ux"
]
3.编译
打开cmd,进入你所创建的项目目录中,这里是指D:\ASPX\Test目录,运行sencha app build命令打包
运行一下项目,这就是我们想要的效果(注:我没有放到服务器中运行,所以看不到具体数据)
4.自定义模版
我们看一下项目结构,简单介绍一下各个目录的作用
app目录---------------项目文件目录
data目录------------数据源目录
model目录-----------模型目录
proxy目录------------自定义代理目录
store目录-------------数据仓库目录
view目录-------------视图目录
overrides目录---------重写类目录
resources目录--------资源文件目录
sass目录--------------sass样式目录
app.js----------------项目入口文件
app.json-------------项目配置文件
这里我们重点关注app下的view目录与sass目录,目录结构对比如下
以Dialog视图为例,在sass目中下src,var目录下都生成了对应的sass文件
src里面是具体sass样式
.auth-dialog{ .auth-profile-wrap{
background:$base-color;
color:$lightest-color;
line-height:24px;
.user-name-text{
font-size: 18px;
font-weight:bold;
}
.user-post-text{
font-size:14px;
}
.auth-profile-img{
@include border-radius($circle-border-radius);
}
} .x-form-text-default, .x-placeholder-label-default {
padding: 15px;
} .register-page-back-button,
.register-page-back-button .x-frame-mc{
background-color: $lightest-color;
border:none;
padding:5px 0 0 0;
.x-btn-inner-default-small{
padding :;
height:20px;
color: $base-color;
&:hover{
text-decoration:underline;
}
}
&.x-btn-pressed.x-btn-default-small{
background-color: transparent;
}
}
.trigger-glyph-noop {
cursor:default;
}
.x-form-trigger{
text-align:right;
width:50px;
}
.password-trigger,
.auth-email-trigger,
.auth-password-trigger,
.auth-envelope-trigger{
&:before{
top: 10px;
left:-18px;
position: relative;
color: $dialog-trigger-color;
font-size: 30px;
} &.password-trigger:before,
&.auth-password-trigger:before{
content: "\f023";
}
&.auth-email-trigger:before{
content: "\f007";
}
&.auth-envelope-trigger:before{
content: "\f0e0";
}
}
.seperator{
text-align: center;
color: $create-account-background-color;
font-family: "Open Sans";
display: inline-block;
background: $lightest-color;
position: relative;
z-index:;
padding: 0 8px;
}
.link-forgot-password {
line-height:32px;
color: $base-color;
text-decoration:none;
margin-left:5px;
&:hover{
text-decoration:underline;
}
} .x-btn{
.x-btn-icon-el{
&:before{
right: 10px;
font-size: 24px;
position: absolute;
}
}
} .auth-facebook-button .x-fa{
color: $lightest-color;
font-size: 24px;
top:10px;
right: 13px;
} .auth-login-button .x-fa,
.auth-resetpassword-button .x-fa{
font-size: 32px;
right: 11px;
top:10px;
line-height: 16px;
}
.auth-create-account-button .x-fa {
color: $lightest-color;
right: 24px;
top:10px;
} .outer-div{
width:100%;
text-align: center;
&:after{
content: " ";
width:100%;
height: 1px;
background-color: $blank-page-color;
position:absolute;
left:;
top: 9px;
}
}
}
var里面是sass变量
1 $dialog-login-background-color: #83c748;
2 $create-account-background-color: #a1a1a2;
3 $dialog-trigger-color: #e5e5e5;
我们需要某个页面的样式,只需要用同样的规则建立对应的sass配置即可,这里篇幅有限就不细讲了。(注别忘了all.scss,这里面有一些公用sass)
Ext Js 6+ 如何引入dashboard模版的更多相关文章
- ExtJS 6 如何引入Dashboard模版
最近很多人问我在ext js 6+的版本中怎么引入官方的dashboard模版,正好我好久没写博客了,这里我写一篇博客来说明一下. 在这里以ext js 6.2.1版本为例(注:需要安装Sencha ...
- Ext JS 5的声明式事件监听
在前文<在Ext JS 5使用ViewControllers>中,简单的介绍了Ext JS 5的一项重要改进——声明式事件监听.在本文,将深度探讨如何使用声明式事件监听啦简化应用程序的视图 ...
- 【翻译】Sencha Ext JS 5公布
原文:Announcing Sencha Ext JS 5 简单介绍 我代表Sencha和整个Ext JS团队,非常自豪的宣布,在今天,Sencha Ext JS 5公布了.Ext JS 5已经迈出了 ...
- 【翻译】要理解Ext JS 5小工具
原版的:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件. 同一时候,还 ...
- 谈谈Ext JS的组件——容器与布局
概述 在页面中,比较棘手的地方就是布局.而要实现布局,就得有能维护布局的容器.可以说,在我试过和使用过的Javascript框架中,Ext JS的布局是做得最棒的一个,而这得益于它强大的容器类和丰富的 ...
- 【翻译】了解Ext JS 5的小部件
原文:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件.同时,还在Ext ...
- 【翻译】Sencha Ext JS 5发布
原文:Announcing Sencha Ext JS 5 简介 我代表Sencha和整个Ext JS团队,很自豪的宣布,在今天,Sencha Ext JS 5发布了.Ext JS 5已经迈出了一大步 ...
- [转]使用Sencha Ext JS 6打造通用应用程序
原文地址:http://www.uedsc.com/using-sencha-ext-js-6-to-build-universal-apps.html 在Sencha和整个Ext JS团队的支持下, ...
- 初探 Ext JS 6 (sencha touch/ext升级版)
Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/product ...
随机推荐
- swiper默认显示三个,中间放大且显示全部图片两边显示部分图片的实现方法
本页面内容最后的红色部分有惊喜哦! 最近在做一个活动页面,要求触摸切换图片时,默认在可视区域中显示三张图片,其中中间的一张图片比其他两张都大且全部显示,而其他两张图片只显示部分即可,于是就想到了swi ...
- SpringBoot 2.x 集成QQ邮箱、网易系邮箱、Gmail邮箱发送邮件
在Spring中提供了非常好用的 JavaMailSender接口实现邮件发送,在SpringBoot的Starter模块中也为此提供了自动化配置. 项目源码已托管在Gitee-SpringBoot_ ...
- 通过groovy表达式拓展oval——实现根据同一实体中的其他属性值对某个字段进行校验
在java的参数校验中,开源验证框架OVAL基本能够满足所有需求,如下面通过简单的添加注解,就可实现对参数的非空和长度校验. @NotNull(message="计息周期月数不能为空&quo ...
- webstorm11.0下载地址和webstorm11.0破解程序patcher.exe下载使用方法说明 前端IDE工具的利器
20160107以下亲测可行. webstorm11.0下载地址:http://www.fxxz.com/soft/109234.html webstorm11.0下载安装破解使用说明: 下载完Web ...
- OSI(Open System Interconnect) 网络七层协议
你作为用户想发个快递,你叫来了顺丰,顺丰快递员从你手里拿走了快递,又装进一个盒子,然后把一个快递单子贴在了上面. 快递员回到集散中心,将快递往那一扔不管了,分拣员把快递按投递的省市分开,发往同一地区的 ...
- java字符串的替换replace、replaceAll、replaceFirst的区别详解
如果不是刚刚复习了下正则表达式,我可能也不会注意到,原来String的replaceAll跟replaceFirst用到了正则表达式! 不多解释,看代码: String s = "my.te ...
- DMA(直接存储器存取)
DMA(Direct Memory Access) DMA(Direct Memory Access)即直接存储器存取,是一种快速传送数据的机制. 工作原理 DMA是指外部设备不通过CPU而直接与系统 ...
- Atitit 3种类型的公司:运营驱动型;产品驱动型; 技术驱动型。
Atitit 3种类型的公司:运营驱动型:产品驱动型: 技术驱动型. 领导驱动,产品驱动,运营驱动还是工程师驱动 3种类型的公司: 一种是运营驱动型: 一种是产品驱动型: 一种技术驱动型. 运营驱动 ...
- 根据IP查地理位置信息
IP地址库下载地址: https://www.ipip.net/product/ip.html 使用方式(Python): https://github.com/ipipdotnet/datx-pyt ...
- idea 配置普通web项目
跟配置maven项目类似 idea 配置 maven 项目 注意点 1.取消第一步 2.添加依赖的时候,如果lib下没有servlet依赖包,可以加个tomcat环境进来编译 ps:在artifact ...