Extjs 6.2 实战 (一)

我是根据Extjs 6.2实战这本书来学习的

现在就把这本书上面的例子与大家分享一下 顺便记录一下我的学习轨迹

ExtJs4 到 ExtJs5 是从MVC到MVVM模型的转变,MVVM模型带来的好处是控制器终于可以跟随视图创建或者销毁了

MVVM另一个好处就是绑定,例如在5之前的版本中,要根据网格(Ext.grid.Panel)是否已经选择了数据来判断是否启用或者

禁用按钮,基本的实现思路是监听网格的选择改变(selectionchange)事件,然后根据选择结果来调整按钮状态。使用绑定,这个就很简单了,只要将网格的属性selection绑定到数据对象selection,再将按钮的disabled 属性与数据对象selection绑定就可以了。

首先要说一下Extjs5 跟Extjs6的区别 因为Extjs5推出后不久就推出了Extjs6.0

最大的区别就是把Ext JS 跟 Sencha Touch合二为一了,也就是可以开发出既适用于桌面又适用于移动设备的通用应用程序了(赶紧拍拍手 wowowowow~

然后来看看Ext Js中的一些常见配置吧,这些都是Ext Js一些必须用到的

requires:如果你需要引用其他类的时候就会用到这个属性,相当于java开发中的import

我理解的Extjs的类,比如说一个页面有展示数据的grid 还有用来查询的输入框跟查询按钮,这时候我就可以把查询的这个事件专门写成一个类,然后再展示数据的页面来调用这个类这时候就用到了requires,至于怎么获取这个展示页面的数据我们以后再说

extend:再自定义类时,用来指定自定义类的扩展类,与java的继承概念是一样的,如果学过java的小伙伴一定回理解的

mixins:将一个类混入要定义的类。这个等以后用到再详细说

items:用来定义当前组件的子组件

xtype:用来声明当前配置对象使用的是那个类,在类的API文档中,在类的旁边可以查到这个类的xtype

Extjs 6.2 实战 (一)_第1张图片

config:在config中定义的属性,框架会自动为属性创建修改和访问方法。其实还有一些其他方法跟事件,具体可以查看Ext.Class源代码中的getConfigNameMap方法

id:可以为组件定义个唯一的标识符,以方便查找组件。该标识符也会作为组件最终的HTML代码的标识符

itemId:作用与id类似,不过不会将它作为组件最终的HTML代码标识符,而且该标识符的使用范围也被限制在容器内。这样做的好处就是,避免标识冲突

scope:用来定义作用域。javascript中有关作用域的详细描述可以参考,不明白的童鞋可以去看看

defaults:用来简化组件的定义。当父组件使用了defaults配置项,在创建子组件的时候,会将该配项中定义的配置应用到子组件中。

defaultType:与default的作用类似,不过它是用来设置子组件的默认类型的,如工具栏中可以会有很多按钮,若将工具栏的defaultType指定为按钮,则在定义按钮的时候就不需要写xtype配置项了

layout:用来定义容器的布局

reference:为组件指定一个名称,以便在视图控制器内使用lookupReference方法来获取组件,这也就是我在第一个requires中提到的怎么获取这个展示页面的数据 就是用这个属性啦~

bind:为组件设置绑定。它的值可以是配置对象,也可以是字符串。当值为配置对象时,配置对象的属性为组件的属性,值为要绑定的数据对象。当值为字符串时,会使用组件defaultBindProperty属性指定的属性作为绑定的属性




博客部分内容是从Extjs6.2实战摘抄,特此感谢


你可能感兴趣的:(Extjs 6.2 实战 (一))