ExtJS6的中sencha cmd中自动创建案例项目代码分析

  1. 云栖社区>
  2. 博客>
  3. 正文

ExtJS6的中sencha cmd中自动创建案例项目代码分析

pandamonica 2017-11-25 14:55:42 浏览1433
展开阅读全文

在之前的博文中,我们按照sencha cmd的指点,在自己win7虚拟机上创建了一个案例项目,相当于创建了一个固定格式的文档目录结构,然后里面自动创建了一系列js代码。
这是使用sencha cmd自动创建的文件夹目录结构:
_
然后我们将整个项目,copy到win7服务器上部署好的apache服务器上:
_
运行一下,果然可以使用:
_
让我们来看看,这些自动创建的文件目录和js文件是如何工作的:
整个extjs项目的入口文件是app.js文件
_
之所以这么说估计ext就这么定义的,看看蒋锋的博客,下图,也是这么说的
_
如上图所示的目录结构,是eclipse中的视角,目录结构略有不同。
原因是,他首先在eclipse中创建一个D web project,然后将sencha创建的目录结构拷贝到了该project的WebContent目录中。意识是一样的,好了,我们将目录结构的话题转回来,继续说ext中各个文件的关系:
_
_
_

由上面的几个图片可以看到被显示的项目首页,实际上体现了ExtJS6.x中一些重要的概念比如,MVVM。
做几个实验吧

1.仅注释掉controller行:
_
结果就是new.js中的items中的项目的双击事件,无法触发了
只有“事件”没有被触发,但是数据都显示出来了
2.仅注释viewModel行
_
结果就是,什么都没有显示。这出乎意料,因为这与我们最初的认知很不一样。我最开始以为被显示的数据,一部分在new.js的items里面,另一部分在viewModel行对应的NewModel.js文件中。假如仅注释viewModel行,new.js中的代表左侧菜单栏中的数据,user乱七八糟的应该是被显示的。但是,结果是,全都不显示。下面是new.js中items中的代码:
_
3.不注释viewModel行,仅注释viewModel中对应文件中的数据
_
_
4.不使用alias,直接使用全限定名
_
5.修改app.js中主界面文件的名称
_
下面连同文件名一起修改
_
6.仅修改alias不修改文件名和全限定名
_
可以正常运行
7.修改alias和全限定名,不修改文件名
_
无法正常运行
8.alias、全限定名和文件名全都修改
_
可见,文件名和全限定名必须同时修改保持一致,才能正常找到文件。

下面我们看看List.js文件
_
如果在主界面中注释掉Home菜单项的xtype内容
_
继续看看List.js文件所代表的内容
_
直接看代码

/**
 * This view is an example list of people.
 */
Ext.define('SimpleCMS.view.main.List', {
    extend: 'Ext.grid.Panel',
    xtype: 'mainlist',

    requires: [
        'SimpleCMS.store.Personnel'
    ],

    title: 'Personnel',

    store: {
        type: 'personnel'
    },

    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone', flex: 1 }
    ],

    listeners: {
        select: 'onItemSelected'
    }
});

_
_
在此解释一下xtype是什么意思,xtype的意思就是“外号” 或者 "别名"
和类型没有任何关系,就是一个外号而已。
_

网友评论

登录后评论
0/500
评论
pandamonica
+ 关注