- 论坛徽章:
- 0
|
Ext JS 4: 动态加载与新的类体系
Ext JS 4: 动态加载与新的类体系
1
Ext 4 部分新特性介绍:
define 新的类定义方式,使用增强的原型方式实现继承
mixin 混入类,类似多继承
setter/getter 属性读写方法配置
require 动态的依赖加载
2
3
Define
Js代码- /**
- * 组件扩展 - 登录窗口
- */
- Ext.define('App.LoginWindow', {
- extend : 'Ext.Window',
-
- title : '登录',
-
- initComponent : function() {
- Ext.apply(this, {
- items : [{
- xtype : 'textfield',
- name : 'username',
- fieldLabel : '账号'
- }, {
- xtype : 'textfield',
- name : 'password',
- fieldLabel : '密码'
- }]
- });
-
- App.LoginWindow.superclass.initComponent.apply(this, arguments);
- }
- });
- /**
- * 组件扩展 - 登录窗口
- */
- Ext.define('App.LoginWindow', {
- extend : 'Ext.Window',
- title : '登录',
- initComponent : function() {
- Ext.apply(this, {
- items : [{
- xtype : 'textfield',
- name : 'username',
- fieldLabel : '账号'
- }, {
- xtype : 'textfield',
- name : 'password',
- fieldLabel : '密码'
- }]
- });
- App.LoginWindow.superclass.initComponent.apply(this, arguments);
- }
- });
复制代码 4
Mixin
Js代码- /**
- * 音乐人
- */
-
- Ext.define('Model.Musician', {
- extend : 'Model.Person',
- requires: ['Model'],
- mixins : {
- guitar : 'Interface.CanPlayGuitar',
- compose : 'Interface.CanComposeSongs',
- sing : 'Interface.CanSing'
- }
- });
-
- /**
- * 混入用法
- */
-
- /*
- var someone = Ext.create('Model.Musician');
-
- someone.getMixin('guitar').playGuitar();
-
- */
- /**
- * 音乐人
- */
- Ext.define('Model.Musician', {
- extend : 'Model.Person',
- requires: ['Model'],
- mixins : {
- guitar : 'Interface.CanPlayGuitar',
- compose : 'Interface.CanComposeSongs',
- sing : 'Interface.CanSing'
- }
- });
- /**
- * 混入用法
- */
-
- /*
- var someone = Ext.create('Model.Musician');
- someone.getMixin('guitar').playGuitar();
-
- */
复制代码 Js代码- /**
- * 玩吉它
- */
-
- Ext.define('Interface.CanPlayGuitar', {
- playGuitar : function() {
- Ext.Msg.alert('info', 'Play Guitar');
- }
- });
- /**
- * 玩吉它
- */
- Ext.define('Interface.CanPlayGuitar', {
- playGuitar : function() {
- Ext.Msg.alert('info', 'Play Guitar');
- }
- });
复制代码 5
setter/getter
Js代码- /**
- * 人
- */
- // ExtJS3
- /*
- Model.Person = Ext.extend(Object, {
- name : 'noname',
-
- getName : function() {
- return this.name;
- },
-
- resetName : function() {
- this.setName('noname');
- },
-
- setName : function(newName) {
- this.name = this.applyName(newName) || newName;
- },
-
- applyName : function(newName) {
-
- }
- });
- */
-
- // ExtJS4 框架会自动上面的四个方法.
- Ext.define('Model.Person', {
- config : {
- name : 'noname'
- },
-
- // @override
- applyName : function(newName) {
- // 值改变时,执行一些动作
- }
- });
- /**
- * 人
- */
- // ExtJS3
- /*
- Model.Person = Ext.extend(Object, {
- name : 'noname',
- getName : function() {
- return this.name;
- },
- resetName : function() {
- this.setName('noname');
- },
- setName : function(newName) {
- this.name = this.applyName(newName) || newName;
- },
- applyName : function(newName) {
-
- }
- });
- */
- // ExtJS4 框架会自动上面的四个方法.
- Ext.define('Model.Person', {
- config : {
- name : 'noname'
- },
-
- // @override
- applyName : function(newName) {
- // 值改变时,执行一些动作
- }
- });
复制代码 6
require
Model.js
Js代码- /**
- * 命名空间
- */
-
- Ext.ns('Model');
- /**
- * 命名空间
- */
-
- Ext.ns('Model');
- Musician.js
复制代码 Js代码- /**
- * 音乐人
- */
-
- Ext.define('Model.Musician', {
- extend : 'Model.Person',
- requires: ['Model'],
- mixins : {
- guitar : 'Interface.CanPlayGuitar',
- compose : 'Interface.CanComposeSongs',
- sing : 'Interface.CanSing'
- }
- });
- /**
- * 音乐人
- */
- Ext.define('Model.Musician', {
- extend : 'Model.Person',
- requires: ['Model'],
- mixins : {
- guitar : 'Interface.CanPlayGuitar',
- compose : 'Interface.CanComposeSongs',
- sing : 'Interface.CanSing'
- }
- });
复制代码 ExtJS3 需要等框架加载完成后才能执行, 而ExtJS4 则会根据依赖动态加载JS执行.上面的 Model.Musician 会加载以下JS:- Musician.js
- Model.js
- Person.js
- CanPlayGuitar.js
- CanComposeSongs.js
- CanSing.js
- Interface.js
复制代码 官方动态加载示例:
dev.sencha.com/deploy/LoaderDemo.zip
|
|