1、获取元素
var myDiv = Ext.get('myDiv');
2、选择器获取多个元素
var ps = Ext.select('p');
select()方法返回的是Ext.CompositeElement对象,需用each方法遍历,ps.each(function(el) {el.highlight();});
3、为按钮添加单击事件响应
t.get('MyButton').on('click',click)
function click{...}
4、布局
Fit:在Fit布局中,子元素将自动填满整个父容器。注意:在fit布局下,对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件,则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件,grid组件的大小会随着父容器的大小改变而改变。
Border:边界布局,他将页面分隔为west,east,south,north,center这五个部分,我们需要在在其items中指定使用region参数为其子元素指定具体位置。
Accordion:手风琴布局,在accordion布局下,在任何时间里,只有一个面板处于激活状态。其中每个面板都支持展开和折叠。
card: 这种布局用来管理多个子组件,并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式,也就是我们所说的分布提交。
Anchor:将使组件固定于父容器的某一个位置,使用anchor布局的子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
Absolute
Column:一般被称为列布局,这种布局的目的是为了创建一个多列的格式。其中每列的宽度,可以为其指定一个百分比或者是一个固定的宽度。
5、类的创建使用
在目录ExtJSTEST\My\sample下创建Person.js,文件内代码如下
· Ext.define('My.sample.Person', {
name: 'Unknown',
constructor: function(name) {
if (name) {
this.name = name;
}
return this;
},
eat: function(foodType) {
alert(this.name + " is eating: " + foodType);
return this;
}
});
然后在ExtJSTEST目录下新建first.js,内容为
var aaron = Ext.create('My.sample.Person', 'Aaron');
aaron.eat("Salad");
可以创建一个Person类的实例、
6、ExtJS4.0的配置属性apply:
每个配置的属性自动生成一个apply方法.自动生成的setter方法内部在设置值之前调用apply方法.如果你要在设置值之前自定义自己的逻辑,那就重载apply方法.如果apply没有返回值,则setter不会设置值.
· Ext.define('Window', {
/** @readonly */
isWindow: true,
config: {
title: 'Title Here',
},
constructor: function(config) {
this.initConfig(config);
return this;
},
applyTitle: function(title) {
if (!Ext.isString(title) || title.length === 0) {
alert('Error: Title must be a valid non-empty string');
}
else {
return title;
}
}
});
7、Static属性的设置和使用:
Ext.define('Computer', {
statics: {
//静态变量instanceCount,值为0
instanceCount: 0,
//静态方法factory,作用为设置config中的属性brand
factory: function(brand) {
return new this({brand: brand});
}
},
config: {
brand: null
},
//类的构造方法
constructor: function(config) {
this.initConfig(config);
// the 'self' property of an instance refers to its class
this.self.instanceCount ++;
return this;
}
});
var dellComputer = Computer.factory('Dell');
var appleComputer = Computer.factory('Mac');
alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"
alert(Computer.instanceCount); // Alerts "2"
8、ViewPort
VeiwPort 代表整个浏览器显示区域,该对象渲染到页面的body 区域,并会随着浏览器显示区域的大小自动改变,一个页面中只能有一个ViewPort 实例。Viewport 不需要再指定renderTo,而我们也看到Viewport 确实填充了整个浏览器显示区域,并会随着浏览器显示区域大小的改变而改改。Viewport 主要用于应用程序的主界面,可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport 上常用的布局有fit、border 等,当然在需要的时候其它布局也会常用。
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
9、Ext中get()方法的使用
get方法用来得到一个Ext元素,也就是类型为Ext.Element的对象,Ext.Element类是Ext对DOM的封装,代表DOM的元素,可以为每一个DOM创建一个对应的Element对象,可以通过Element对象上的方法来实现对DOM指定的操作,比如用hide方法可以隐藏元素、initDD方法可以让指定的DOM具有拖放特性等。get方法其实是Ext.Element.get的简写形式。
get方法中只有一个参数,这个参数是混合参数,可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。看下面的示例代码:
Ext.onReady(function(){
vare=new Ext.Element("hello");
alert(Ext.get("hello"));
alert(Ext.get(document.getElementById("hello")));
alert(Ext.get(e));
});
//Html页面中包含一个id为hello的div,代码如下:
<div id="hello" >aaa</div>
10、<scripttype="text/javascript" src="ClockByZhi.js" ></script>
放在body前和body后的区别,假设HTML中为<div id=”hello” ></div> 如果在前,直接用hello.innerHTML会出错,在后就不会了,这取决于页面加载机制,如果说HTML还没加载完毕就通过ID获取其中的元素,是不可行的,需要等HTML加载完毕才行。