jQuery和Extjs的比较
一、jQuery和Extjs的比较
- jQuery是一个常用javascript对象方法的集合框架,主要功能包括:dom选择器、css效果、ajax功能、通用对象方法等。
- Ext是一个具有丰富组件的javascript集合类库,除了自身提供的一套选择器、效果、ajax等功能,还提供了大量的javascript创建页面元素的类、方法。这个意味着:只要客户端支持javascript,可以使用ext方便的生成所有页面元素,再不必搞大量的html代码,而且生成的页面的样式还很漂亮。
二、使用建议
如果是普通的网页建议使用 jQuery 框架;
如果是制作网页应用如 ERP 管理系统等等建议使用 ExtJS 。
当然也可以更加自己的知识体系自由选择;相对来说 jQuery 更偏向前端开发人员而 ExtJS 对于程序开发人员使用起来会更顺手。
三、Ext中Class创建
- Class中的define的源代码:
- Class各个属性的含义和作用
- Class创建过程
四、Extjs基础
1. Extjs定义类时requires uses singleton
三个配置项的使用
requires
:加载需要的类时机是,当前类初始化之前被加载。uses
:加载需要的类时机是,当前类初始化之后被加载,在使用的时候加载。singleton
:当前类初始化时,该实例是一个单例对象,不可创建和继承。
参考链接🔗:https://www.2cto.com/kf/201411/352086.html
https://blog.csdn.net/shadowkiss/article/details/7560966
http://blog.csdn.net/lovelyelfpop/article/details/50920569
https://www.cnblogs.com/SharkBin/p/6956937.html
2. Ext.Class 属性详解(alias/alternateClassName /config/extend /inheritableStatics /mixins /uses/requires/singleton/static
等属性)
alias
:相当于别名,可以取多个,通过xtype和Ext.widget()创建。alternateClassName
:和alias类似,给类替换一个别名,可以多个,可通过Ext.create()创建。config
:类的属性配置,属性可以自动生成getter/setter方法。extend
:继承,单继承。inheritableStatics(可继承static)/ static
:定义静态方法,通过“类名.方法名”调用,类似于static属性,区别是:子类也可以使用改静态方法,但是会static定义的静态方法子类是不会继承的。mixins
:实现多继承。singleton
:创建单例模式的类,如果singleton为true,该类不能创建和继承,方法调用:“类名.方法名”。uses和requires
:都是对某些类引用;uses–被引用的类可以在该类初始化之后才加载;requires—被引用的类在该类初始化之前加载。
参考链接🔗:http://blog.csdn.net/shadowkiss/article/details/7560966
3. Ext.ComponentQuery.query
Ext.ComponentQuery.query用法:
- 基于xtype查找组件:
var panels = Ext.ComponentQuery.query('panel')
; - 查找二级xtype:
var buttons = Ext.ComponentQuery.query('panel button')
; - 基于属性值检索组件:
var saveButton =Ext.ComponentQuery.query('button[action="saveUser"]')
- 混合查找组件:
var buttonsAndTextfields = Ext.ComonentQuery.query('button, textfield')
; - 基于ID查找组件:
var usersPanel = Ext.ComponentQuery.query('#usersPanel')
; - 基于组件的presence(不太明白这个应该怎么翻译):
var extraOptionsComponents = Ext.ComponentQuery.query('component[extraOptions]')
; - 使用组件的成员方法查找:
var validField = Ext.ComponentQuery.query('form > textfield{isValid()}')
;