ExtJS4.0的组件简介

一、概述：ExtJS 中的组件体系由框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext 的控件，Ext 组件是由Component类定义，每一种组件都有

二、组件大致可以分为三大类：基本组件、工具栏组件、表单及元素组件。

一个指定的xtype 属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组
件。
源码详解：创建一个paenl

var p2=Ext.create('Ext.panel.Panel',{
title:'第一个应用程序的面板',
width:200,//宽度
height:300,//高度
renderTo:'hi'//添加到指定的id上
});

var panel=new Ext.panel.Panel({
title:'第一个应用程序的面板',
width:200,//宽度
height:300,//高度
renderTo:'hi',//添加到指定的id上
html:'<spanstyle="color:red;">你好</span>'
});

两个面板的效果是一样，就是在3.0后，4.0创建的组件方法有些扩展，现在可以用create来创建指定组件。

详解讲解Panel的属性，items、id、tbar、bbar、tools等属性，

Items：组件，里面可以包含很多组件，例如按钮，需要用xtype指定是那一个组件，并可以设置基本的一些属性，例如fieldLabel、text等，需要根据组件的类型来指定。

Id：可以给指定的panel指定一个id，在后面等组件中访问和使用此面板

Tbar：显示的是header，头部信息。

Bbar：显示的是footer，底部信息。

Tools：是工具栏，可以添加指定的工具，用type属性指定的那一中工具，用qtip属性来指定提示文本，header属性是调用的时间，是触发后的事件，调用指定的function来处理。

var panel=Ext.create('Ext.panel.Panel',{
id:'myPanel',
title:'第一个Panel应用',
width:200,
height:300,
items:[
{xtype:'textfield',fieldLabel:'用户名'},
{xtype:'textfield',fieldLabel:'密码'},
{xtype:'textfield',fieldLabel:'邮箱'},
{xtype:'button',text:'按钮'}
],
tbar:[{xtype:'button',text:'头部按钮'}],
bbar:[{xtype:'button',text:'底部按钮'}],
tools:[{
type:'refresh',
qtip: 'Refresh form Data',
// hidden:true,
handler: function(event,toolEl, panel){
// refresh logic
}
},
{
type:'help',
qtip: 'Get Help',
handler: function(event,toolEl, panel){
// show help here
}
}]
});

三、浅析讲解viewport使用(Border)

首先理解viewport是用来指定的布局，与html中的frameSet标签效果相似，Border 布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，
分别由east，south, west，north, center来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素.

源码：

Ext.create('Ext.container.Viewport',{
renderTo:Ext.getBody(),
layout:'border',
items:[
{
title:'面板',
region:"north",
height:200,
html:'<h1>网站后台管理系统</h1>'
},{
title:'content',
region:'center',
html:'<h1>网站后台管理系统</h1>'
},{
title:'左',
region:'west',
width:100
}
]
});

经过指定layout属性指定哪一种类型的布局，然后items来指定布局中的信息。在border布局中，center不可以缺少。在指定items中的对象的时候，resgion用来指定在那一个方位，比如west和center等。