Extjs5.0(4):开始正式的编写Extjs5.0代码

在编写代码之前,先熟悉一下我们上一篇文章中介绍的用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



交流群:170198012



  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值