Search ML NLP Java

ExtJS6从小白到熟练使用(二)——熟悉ExtJS(组件篇)

上一部分我们大概认识了ExtJS,是用来干嘛的。这一部分,将学习ExtJS的一些组件以及布局。鉴于这部分涉及的东西比较多,将分为几个小部分讲解

ExtJS基础组件

ExtJS既然是一款富客户端框架,而且之前我也说过了,它是基于各种组件的,所以,我们在这节了解一下这些组件。

首先,什么是组件呢,所谓组件,我个人是这样理解的,在传统的前端开发中,比如要开发一个登陆页面,我首先要用HTML写一个form表单,然后再用CSS装饰一下,最后在用JavaScript添加一些行为效果。在这里,我们就可以把这个表单看做是一个组件。这个只是个简单的例子,在ExtJS中,我们所看到的,都是组件,如:下拉列表,表格等等。

知道了什么是组件,那我们来学习一下ExtJS里的组件。上篇文章讲了如何创建一个项目,这篇我们在上篇的基础之上,继续学习。在firstDemo文件夹打开命令行,运行 sencha app watch 命令,然后在浏览器输入localhost:1841,看到了项目。ok,然后我们看下这个网页,它左边有个bar,右边是内容区,左边点击某一个,右边显示的是对应的。这个就是ExtJS里最典型的一个组件,叫做tab,我们在日常的开发中把这种效果叫选项卡,选择对应的选项,显示对应的内容。这个如果用传统的开发方式,使用jquery,应该不是太难。但是,写的时候,布局要考虑的吧?css要自己一点点调的吧?然后js的事件监听也要写的吧?如果观察的再仔细些,拖动浏览器窗口大小,你会发现,它里面的表格是跟随浏览器窗口大小自动调整的。综上,如果用jquery开发,结果是,可以开发,但是会耗费很多的事件。但是在ExtJS里,这个只是一种最常见的组件而已。

下面我们来看看这个组件的代码:

我们打开 app -> view -> main -> Main.js 这个就是我们看到的tab的代码。简单介绍一下这些代码。

我们看到,整个文件,都是写在一个Ext.define()方法里,这个define()方法,就是用来定义一个组件,我们看到它传了两个参数,第一个是这个组件路径,每个点代表一级,根路径是app文件夹下Application.js name属性的值,也就是这个项目的名称。第二个参数是一个json,它里面就重点写组件的配置。

我们再看extend,它是这个组件的父类,什么意思呢?ExtJS牛逼就牛逼在这里,它自己定义了tab这种组件,但是我们在项目中使用的时候,不可能只有一种tab,所以,就有一个父类tab,它有tab必须的功能,然后我们根据不用的项目需求,继承它,然后根据需求进行扩展。

xtype:组件的别名,我们的这个组件在引入的时候,可以通过直接使用别名来达到使用组件的效果

requires:在这个组件中引入了哪些组件

controller:这个组件使用的控制器,通常用来写一些事件操作

viewModel:组件的数据源

items:组件的核心,定义组件有哪些东西

除此之外,还有很多的配置,这些配置在API里都可以查到。而且我们还可以根据不用的需求,添加一些自定义的配置,因为它是一个json,所以可以很灵活的进行配置

了解了以上这些,我们写个小demo练习下。在写之前,先把UI上面的水印去掉
在根目录/ext/classic(或者modern)/theme-base/sass/etc/all.scss文件中修改$ext-trial: true !default; 为$ext-trial: false !default;即可

就写个最简单的登录注册吧

这个是写完的一个效果,非常简单的一个例子。
点击注册弹出注册窗口,然后保存用户信息,再进行登录。成功提示登录成功。

这个是实现的代码。大概总结一下,ExtJS里,看到的都是组件,组件需要被定义才能使用,定义的时候需要继承父类。在例子里只用了很简单的一个用来入门,当然还有很多复杂的组件,比如table,tree等,他们是如何定义的呢?下篇我们将会学习。

看完别忘点个赞呐(:з」∠)

                                                                            by:小明
赞(3) 打赏
未经允许不得转载:Mayabot技术团队 » ExtJS6从小白到熟练使用(二)——熟悉ExtJS(组件篇)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

开源项目

Mynlp开源项目

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏