ExtJS6的中sencha cmd中自动创建案例项目代码分析-阿里云开发者社区

开发者社区> pandamonica> 正文

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

简介: 在之前的博文中,我们按照sencha cmd的指点,在自己win7虚拟机上创建了一个案例项目,相当于创建了一个固定格式的文档目录结构,然后里面自动创建了一系列js代码。 然后我们将整个项目,copy到win7服务器上部署好的apache服务器上,运行一下,果然可以使用。
+关注继续查看

在之前的博文中,我们按照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的意思就是“外号” 或者 "别名"
和类型没有任何关系,就是一个外号而已。
_

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Spring AOP 源码分析——创建代理对象
1.简介 与筛选合适的通知器相比,创建代理对象的过程则要简单不少,本文所分析的源码不过100行,相对比较简单。在接下里的章节中,我将会首先向大家介绍一些背景知识,然后再去分析源码。
1001 0
makefile 分析 -- 内置变量及自动变量
makefile 分析1  -p 选项,可以打印出make过程中的数据库, 下面研究一下内置的变量和规则。 -n 选项, 只运行,不执行, -d 选项,相当于--debug=a,  b(basic),v(verbose),i(implicity),j(innvocation of command),m(remake files)  这里着重解释一下 -p make -p -f /dev/null 可以打印出内置变量和内置规则 变量可以分为3类, 第一类: 环境变量, 比较重要的是PATH, PWD 就不一一列举了。
1273 0
艾伟也谈项目管理,代码背后的点滴
  有段时间没有更新技术blog了,现在有空每天都写写围脖,记录生活和工作的点滴,但是有时候发现有些技术的想法和工作总结没有像过去那么完整的写很大一篇,但是也有零零散散的不少点滴,因此想着随意的写这么一个连续的片段分享。
884 0
创建SinaSAE云账号创建和发布基于SVN代码管理的PHP空工程
1、使用Sina微博账号登录,进入【新浪云控制台】 2、选择【云应用SAE】界面,选择【创建新应用】 3、点击【继续创建】,进入应用信息编辑界面     依次编辑“二级域名”“应用程序名”,再点【运行环境】中的【PHP空应用】,再点左下角的【创建应用】完成应用创建。
846 0
艾伟也谈项目管理,需求分析之六大原则
  需求分析的六个原则(一)   1、需求分析第一个原则:永远不要显得比客户更聪明。  聪明反被聪明误,这样的事情太多了,我们产品经理都是有智慧的人,而不是耍小聪明的人。  2、原则第一点:了解需求,而不是去批评客户。
937 0
艾伟也谈项目管理,只有好代码的项目能成功吗?
  Simon Brown,集开发者、架构师及作家于一身,他认为成功的项目需要的不仅仅是好代码。在他的演讲《好代码是不够的》中,Brown讨论了项目成功所需的所有元素,从前期设计到操作文档。   Brown认为好代码是一个好的开始,但要取得成功,人们需要知道要构建什么、要发布什么以及它可以运作起来。
775 0
+关注
159
文章
3
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载