在编写代码之前,先熟悉一下我们上一篇文章中介绍的用sencha cmd生成的项目的目录结构。
.sencha/ # sencha特定的主要配置文件
app/ # 应用特定的内容
sencha.cfg # Sencha Cmd配置
Boot.js # 动态加载 JS 和 CSS
Microloader.js # 加载app.json 里面的内容
build-impl.xml # 构建应用程序的标准t
*-impl.xml # 实现不同的构建阶段
defaults.properties # 属性的默认值和文档
ext.properties # 构建特定的Extjs默认值
*.defaults.properties # 构建属性的环境
plugin.xml # sencha cmd插件
codegen.json # 升级期间数据合并生成的数据
workspace/ # 工作空间内容
sencha.cfg # sencha cmd工作空间配置
plugin.xml # sencha cmd插件
ext/ #extjs 的sdk
cmd/ # Sencha Cmd模板内容
sencha.cfg #Sencha Cmd模板配置
packages/ # 框架需要的包
ext-theme-classic/ # Ext JS 经典主题包
ext-theme-neptune/ # Ext JS 海王星主题包
... # 其他主题
src/ # extjs 源码
...
index.html # 应用入口
app.json # 应用的配置清单
app.js # 启动应用
app/ # 应用的MVVM结构代码
model/ # 模型
store/ # 仓库
view/ # 视图
main/ # 主界面内容
Main.js # 主界面
MainModel.js # 视图模型
MainController.js # 视图控制器
Application.js # 应用程序入口
packages/ # Sencha Cmd 的包
build/ # 接收构建应用时输出的文件夹
以上只是对包的简单介绍,如果字面理解不清楚,那么自己一个一个打开文件去看里面的说明,这里就不做介绍了。除了app包外,其他文件对我们的编程没太大影响,不理解也没关系,不要去修改它就好了。
下面开始编写代码,首先我们要实现的是,修改一下主界面,给主界面上方添加一个标题,例如我们经常看到一些软件最上方写着的“XX系统”。
先看看我们的当前界面是什么样子的,打开cmd,切换到当前extjs项目根目录
启动web服务器,并监听项目
打开浏览器,输入http://localhost:1841/
这就是我们当前界面。
接下来打开app/view/main/Main.js,会发现有这么一段代码
layout: {
type: 'border'
},
表示我们界面使用的布局是border布局,它将整个容器分为5个部分,分别是:east(东)、south(南)、west(西)、north(北)和center(中),看下面的border布局示意图:
显然,要在最上面加一个标题,只需要加一个组件,放在北方(north)就可以了。
再看Main.js代码:
发现他里面两个组件都放在items里面,一个region属性是west,一个region属性是center,我们只需要在items里面再放一个region为north的组件就行了。
这个north组件可以直接在Main.js里面编写,也可以新建一个js文件,定义一个组件之后再把组件引入到Main.js中,放在north位置。这里我们选择后者。
在Main.js同级目录下,建立Header.js:
Header.js:
//注意这里的命名空间,命名规则为js文件路径,这里MyApp.view.main.Header命名的同时也指定了Header.js的路径为view/main/Header.js,MyApp为我们项目的命名空间(name),在Application.js中已经做了命名。
Ext.define('MyApp.view.main.Header', {
extend: 'Ext.Container',
xtype: 'app-header',//别名,在Main.js使用该组件时,可以直接用别名
cls:'app-header',//css
height: 52,
layout: {
type: 'hbox',
align: 'middle'
},
items:[{
xtype: 'component',
cls: 'app-header-logo'
},{
xtype: 'component',
cls: 'app-header-title',
html: 'Extjs5.0实例',
flex: 1
}]
});
在Header.js中我们使用了css,所以我们还需要创建css文件,而且我们css中还用到图片,也要把需要的图片加入到我们项目中。在resources文件夹下,建立images文件夹和css文件.
css.css:
.app-header{
background-color:#2a3f5d;
border-bottom:1px solid #121b28
}
.app-header-title{
padding:15px 0 10px 0;
color:#fff;
font-size:18px;
font-weight:bold
}
.app-header-logo{
width:40px;
height:25px;
background:url(images/logo.png) no-repeat center 4px
}
Images中放入logo图片,logo.png,图片我就不上传了,大家可以自己找一张logo,或者在文章的最下面下载本篇文章的代码,里面有logo图片。
把css.css引入到我们项目中。
接下来引入css,找到app.json,
修改app.json文件的此处
最后,在Main.js中使用Header.js。
Main.js:
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'MyApp.view.main.MainController',
'MyApp.view.main.MainModel',
'MyApp.view.main.Header'//引入Header
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [
{
region: 'north',
xtype: 'app-header'//使用Header
}, {
xtype: 'panel',
bind: {
title: '{name}'
},
region: 'west',
html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
width: 250,
split: true,
tbar: [{
text: 'Button',
handler: 'onClickButton'
}]
}, {
region: 'center',
xtype: 'tabpanel',
items: [{
title: 'Tab 1',
html: '<h2>Content appropriate for the current navigation.</h2>'
}]
}]
});
这样已经添加了Header了,浏览器中输入http://localhost:1841/
至此已经成功的添加了header,下篇文章介绍如何修改左侧导航栏为树形结构。
附上本篇文章的源码。
另外,我也把这个项目托管在github上:https://github.com/likeadog/Extjs5.0Demo