extjs学习笔记

1。组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件。

var obj={title:"hello",width:300,height:200,html:'Hello,easyjf open source'};
var panel=new Ext.Panel(obj); panel.render("hello");
<div id="hello">&nbsp;</div>

 

2。关于render

render 方法后面的参数表示页面上的div 元素id，也可以直接在参数中通过renderTo 参
数来省略手动谳用render 方法，只需要在构造函数的参数中添加一个renderTo 属性即可，
如下：
对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要
父组件的构造函数中，通过给属性items 传递数组方式实现构造。如下面的代码：
New Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});

 

3。容器中的子元素组件，延迟加载子元素组件实现方式

对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要父组件的构造函数中，通过给属性items 传递数组方式实现构造。如下面的代码：

var panel=new Ext.TabPanel({width:300,height:200,items:[ {title:"面板1",height:30},{title:"面板
2",height:30},{title:"面板3",height:30}]});panel.render("hello");

注意中括号中加粗部份的代码，这些代码定义了TabPanel 这个容器控件中的子元素，这里包括三个面板。上面的代码与下面的代码等价：

var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel( {title:"面板1",height:30}),new
Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]});panel.render("hello");

前者不但省略掉了new Ext.Panel 这个构造函数，最重要前者只有在初始化TabPanel 的时候，才会创建子面板，而第二种方式则在程序一开始就会创建子面板。也就是说，前者实现的延迟加载。

 

4。组件的配置属性

关注组件基类Ext.Component的配置属性

 

5。组件的事件响应处理

<script>标签中window.onload(function(){});方法的作用和意义

ExtJs组件的事件处理与该方法相类似：

<script>
function a(){
alert('some thing');
}
Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input id="btnAlert" type="button" value="alert框" />

Ext.get("btnAlert")得到一个与页面中按钮btnAlert 关联的Ext.Element 对象，可以直接调用该对象上的addListener 方法来给对象添加事件，同样实现前面的效果。在调用addListener方法的代码中，第一个参数表示事件名称，第二个参数表示事件处理器或整个响应函数。

ExtJS 支持事件队列，可以往对象的某一个事件中添加多个事件响应函数：

Ext.onReady(function(){
Ext.get("btnAlert").on("click",a);
Ext.get("btnAlert").on("click",a);
});

 

 

ExtJS 还支持事件延迟处理或事件处理缓存等功能：

Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});

延迟2000毫秒

 

第四章。。使用面板

6.面板panel的组成

面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。
面板的类名为Ext.Panel，其xtype 为panel，下面的代码可以显示出面板的各个组成部
分：

Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板头部header",
width:300,
height:200,
html:'<h1>面板主区域</h1>',
tbar:[{text:'顶部工具栏topToolbar'}],
bbar:[{text:'底部工具栏bottomToolbar'}],
buttons:[{text:"按钮位于footer"}]  
});
});

注意构造参数中的另一个属性tbar:[{pressed:true,text:'刷新'}]

红色部分多出一个,导致整个面板都不能显示。。

 

7.工具栏

注意概念上的区别：这里的工具栏相当于窗口的工具栏，xtype值是tools，系统默认。顶部工具栏是用户自定义的,xtype值是tbar，用户自定义。

面板由一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件组成。

注意区分顶部工具栏和面板头部的区别。

可添加的组件不同，位置不同，任务不同：

除了在面板头部加入这些已经定义好的工具栏选择按钮以外，还可以在顶部或底工具栏
中加入各种工具栏选项。这些工具栏选项主要包括按钮、文本、空白、填充条、分隔符等。

Ext中的工具栏项目主要包含下面的类：
Ext.Toolbar.Button－按钮，xtype为tbbutton
TextItem－文本信息
Ext.Toolbar.Fill－
Separator－
Spacer－
SplitButton－

 

8.选项面板的TabPanel

VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。