ExtJs4基础概念总结

Ext.application

代表一个ExtJs富客户端的应用程序的入口点。从Ext4.0开始提出一个新的概念:Ext MVC application Architecture。

这个概念用于帮助开发者以最快的速度组织起一个高效、稳定的的Ext前端。定义Ext.application的文件脚本一般起名为

app.js。将这个文件加载到index.html中。app.js文件的作用如下:

  1. 指定Ext Framework类加载路劲
  2. 定义全局命名空间
  3. 定义自动创建视图属性
  4. 罗列控制器

app.js在html文件中解释时,首先加载出app/view/目录下的Viewport.js,由这个文件来加载引用的其他视图,在罗列控制器的时候,要指定清楚controller文件夹下的脚本文件路劲,如somnus.UserController。示例代码如下

<span style="font-family:Courier New;font-size:14px;">// extjs程序入口
extRoot = app.basePath+"/jslib/ext-4.2.1";
// 配置动态加载路径
Ext.Loader.setConfig({
	enabled: true,
	paths: {
		'Ext.ux': extRoot + '/ux',
		'somnus':app.basePath+'/app'
	}
});
Ext.onReady(function () {
	Ext.application({
		name: 'somnus',//定义一个全局命名空间 somnus
		appFolder: 'app',
		autoCreateViewport: true,
		controllers: [],
		launch: function() {}
	});
});</span>

Ext.define()

内置3个参数,包括类名称(className)、对象数据逻辑和方法和回调函数。

Ext.define()和Ext.extend()方法都用于自定义类,但是从4.0以后开始不再推荐使用extend()。

完整样式:Ext.define(String className,Object data,[Function fn])

这里第二个参数是一个对象,该对象用于为新创建的类指定属性,该对象可以指定任何合法属性。

比如:

  1. self:引用当前类本身
  2. alias:定义类别名
  3. config:用于该类指定配置选项,Extjs会自动为config指定的选项添加setter方法和getter方法
  4. extend:用于指定该类继承的父类
  5. staticsL用于为该类定义静态方法和属性
  6. mixins:用于列出所有要被混入的类
  7. override:定义要覆盖的类
  8. requires:用于列出实例化之前必须预先加载的类
  9. singleton:如果该属性为true,则这个类是单例的
  10. uses:用于列出必须与该类同时使用的类

Ext的组合属性-Mixins

组合是extjs4的新特性,可用于实现多继承。该属性会以同步方式加载类文件,并实例化该类

基本用法:

Ext.define('MyClass.A',{
	showA:function(){
		console.log('A');
	}
});
Ext.define('MyClass.B',{
	showB:function(){
		console.log('B');
	}
});
Ext.define('MyClass.C',{
	mixins:['MyClass.A','MyClass.B']
	showC:function(){
		console.log('C');
	}
});
var c = Ext.create('MyClass.C');
c.showA();
c.showB();
c.showC();

Ext.create()

用来创建对象。语法格式为: var aa =Ext.create(String name,Object args);

参数1指定要创建对象的类名;参数2是一个对象,用于向新生成的对象传入构造参数值(也称为配置选项,

可以为config属性指定选项传入参数值)。参考代码如下:

<span style="font-family:Courier New;font-size:14px;">Ext.define('somnus.User',{
	remark:'',
	config:{
		username:'aa',
		password:'123456'
	},
	constructor:function(cfg){
		this.initConfig(cfg)
	}
});
var user = Ext.create('somnus.User',{
	username:'bb',
	password:'123456'
	remark:'xxxx'
});
console.log(user.remark);
console.log(user.getUsername());
console.log(user.getPassword());</span>

Ext.Class.alias

alias 属性是作为这个类的别名来使用的。就是说它是这个类的第二个名称。它的作用是当你定义的这个类

使用非常频繁,而且类名较长时替代这种创建对象的方式来使用

var a = Ext.cteate(‘AM.view.user.List‘);

利用alias创建对象的方式是这样的:Ext.widget(‘userlist‘);

Ext.define('MyApp.CoolPanel',{
	extend:'Ext.panel.Panel',
	alias:['widget.coolpanel'],
	title:'Yeah'
});
Ext.create('widget.coolpanel');
Ext.widget('coolpanel');

Ext.AbstractCompent-->xtype

相对于用类全名的方式创建对象,这个属性提供了一个简短的对象创建方式。使用xtype定义

component组件实例在Ext界面程序设计中非常广泛,最典型的的就是当你定义一个container容器。

例如创建form文本域(text fields)的两种方式对比如下:

items:[
       Ext.create('Ext.form.filed.Text',{
    	   filedLabel:'foo1'
       }),
       Ext.create('Ext.form.filed.Text',{
    	   filedLabel:'foo2'
       }),
       Ext.create('Ext.form.filed.Text',{
    	   filedLabel:'foo3'
       })
]
//上面的创建方式改为xtype
items:[
       {
    	   xtype:'textfield',
    	   filedLabel:'foo1'
       },{
    	   xtype:'textfield',
    	   filedLabel:'foo2'
       },{
    	   xtype:'textfield',
    	   filedLabel:'foo3'
       }
]
时间: 2024-07-31 22:34:00

ExtJs4基础概念总结的相关文章

关系型数据库常用基础概念知识归纳

声明:我的文章都是只挑主要的写,次要细节太多,归纳就没意义了,同时归纳主要是给自己看的, 而且基本都是凭自己的一些记忆和理解即时写的.不一定对和全(但大多是一些需要理解的概念),请各位看管见谅! 数据库设计篇 1.范式 A.1范式,原子性,即列不可分 B.2范式,完全依赖,即有个主键唯一区分 C.3范式,不能传递依赖,即表中不能还有其他表的非主键信息 2.模型 A.概念模型,即ER图等 B.逻辑模型,即建逻辑表 C.物理模型,即生成物理表 事务 1.四大特性, A.原子,要么..要么.. B.隔

分布式学习——基础概念篇

概述 最近这段时间一直在看分布式有关的东西,但是关于分布式自己还是不能很好的理解,所以本文对分布式基础概念进行下学习. 分布式处理 首先先了解一下分布式处理,分布式处理和集中式处理正好是相反的的体系架构,集中传输集中到式处理顾名思义就是将所有的信息都一个统一的信息中心进行处理:分布式处理就是将不同地点的,或具有不同功能的,或拥有不同数据的多台计算机利用通信网络连接起来,让各个计算机各自承担同一个工作任务的不同部分,在控制中心的管理下,同时运行,共同完成同一个工作任务. 提到分布式处理就不能不提到

js基础--javascript基础概念之语法

掌握一门语言 必须先掌握它的语法! javascript 的语法和C.Java.Perl 的语法有些相似.但是比它们更加宽松. javascript 中的一切都是严格区分大小写的.例如变量: demo 和 Demo 两个变量是完全不同的. javascript 标示符,所谓标示符 是指 变量.函数.属性 的名字或函数的参数.标示符的格式是按照以下规则组合的一个或多个字符. 1.第一个字符必须是字母,下划线,或 $ 符号. 2.其他字符可以是字母.下划线.$ . 或数字. 注意 不能把关键字 保留

js基础--javascript基础概念之数组(二)

js基础--javascript基础概念之数组 数组栈方法 数组可以像栈一样.栈是一种先进后出的数据结构,最先添加的数据最后一个出来.栈方法添加数据也称为 推入  移除数据称为 弹出. js为数值栈方法提供了 push()   和  pop() ;  两个方法. push() push() 方法接受参数就是你要添加进入到数组的值.push()  方法会将他们逐一添加到数组的末尾  数组的length属性会跟着更新数据. *push(多个数组元素值) 返回的修改后的数组长度 var array =

js基础--javascript基础概念之数组

js基础--javascript基础概念之数组 在ECMAScript 中 ,数组是很常用的数据类型,js中的数组和其他很多语言的数组有明显的区别.js的数组可以保持任何类型的数值,一个数组中可以保存着多个不同类型的数值.js数组大小(长度)是可以调整的.可以随着数据的添加自动增长数组长度. 创建数组: 一.数组字面量 数组字面量由一对包含数组项的方括号[]表示. var array = [ 'kin', 'cheong', 'change', 'hello', 'haha', 'hi' ];

Linux基础概念-----环境变量

Shell 环境变量 Shell也是应用程序,工作与用户模式 变量类型 整形 浮点型 字符型 布尔型 bash变量类型 本地变量:仅对当前Shell有效 局部变量:仅对局部代码段有效(函数) 环境变量:expor VAR_NAME=Value,对当前Shell及子Shell有效 位置变量:$1;$2 .... 特殊变量:$?;$!;$$ .... 查看环境变量 printenv export 查看所有变量 set bash的引号 双引号:弱引用,可以实现变量替换: 单引号:强引用,不替换,而显示

Linux基础概念-----Linux I/O重定向 ,管道

标准输入:键盘 标准输出:显示器 错误输出:显示器 FD:文件描述符:让程序可以文件交互,并且便于内核识别文件,打开的每一个文件都有一个描述符 程序在和文件交互式,通过文件描述符来进行交互,而非文件名,文件名是方便用户分别文件. Linux一切皆文件,所以标准输入,标准输出都有各自的文件描述符 标准输入描述符:0 标准输出描述符:1 标准错误输出描述符:2 将其默认数据流改为其他设备:IO重定向 输出重定向 > 覆盖重定向 >> 追加重定向 /dev/null  黑洞 只针对当前Shel

js基础--javascript基础概念之语句(二)

js基础--javascript基础概念之语句(二)label,break,continue.. break .  continue 语句. break  continue 语句用于在循环中精确控制代码的执行,其中break语句会立即退出循环,执行循环后面的语句. continue 则退出循环后返回到再次进入循环中. 如: var num = 0; for(var i = 0; i<=100; i++){ if(i >= 10){ break; } num = i; } alert(num);

iOS开发OC基础:OC基础概念总结,OC面向对象的思想

一.什么是OOP: OOP(Object Oriented Programming):面向对象编程 二.面向对象和面向过程的区别: 面向过程编程:分析解决问题的步骤,实现函数,依次使用面向对象编程:分解问题组成的对象,协调对象间的联系和通信,解决问题. 面向过程是以事件为中心,关心的是完成这个事件的详细步骤:面向对象是以事物为中心,关心的是事物应该具备的功能,而完成一个事件只是事物所有功能里面的一个小功能(以过程为中心,以对象为中心) 三.类和对象 对象定义了解决问题的步骤中的行为,不刻意完成一