[ExtJS2.1教程-2]组件的使用

我们还是以alert为例
首先我们如果想创建一个alert 可以先去文档中查看
Ext.MessageBox包下
文档中我们可以看到一些demo
和属性 方法 事件的介绍。
这里只存在属性和方法

alert( String title, String msg, [Function fn], [Object scope] ) : Ext.MessageBox 
Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt). If a c...
Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt). If a callback function is passed it will be called after the user clicks the button, and the id of the button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button). 
Parameters:
 
title : String
The title bar text
msg : String
The message box body text
fn : Function
(optional) The callback function invoked after the message box is closed
scope : Object
(optional) The scope of the callback function
Returns:
 
Ext.MessageBox
this

这就是alert方法的介绍 很详细
下面我们想要一个有警告框的alert
我们在方法中发现了一个show方法 接受的参数是配置选项（属性）
直接用样例代码

Ext.onReady(function() {
	// Ext.Msg.alert("hello");
	Ext.Msg.show({
		title : 'Save Changes?',
		msg : 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
		buttons : Ext.Msg.YESNOCANCEL,
		// fn: processResult,
		animEl : 'elId',
		//警告图标
		icon : Ext.MessageBox.WARNING
	})

});

可以在属性介绍中看到描述是"The CSS class that provides the INFO icon image"，来替换icon的样式 即图标样式
对于按钮的样式也可以改变"Button config that displays a single OK button "具体使用同上

对于组件来说主要有三大类：基本组件、工具栏组件、表单及元素组件
Component是顶级组件 及 其它组件是由他进行定义的 每一个组件都有一个xtype属性值，该值可以知道一个组件类型或者说是定义一个该类型的组件

xtype            Class
-------------    ------------------
box              Ext.BoxComponent
button           Ext.Button
colorpalette     Ext.ColorPalette
component        Ext.Component
container        Ext.Container
cycle            Ext.CycleButton
dataview         Ext.DataView
datepicker       Ext.DatePicker
editor           Ext.Editor
editorgrid       Ext.grid.EditorGridPanel
grid             Ext.grid.GridPanel
paging           Ext.PagingToolbar
panel            Ext.Panel
progress         Ext.ProgressBar
propertygrid     Ext.grid.PropertyGrid
slider           Ext.Slider
splitbutton      Ext.SplitButton
statusbar        Ext.StatusBar
tabpanel         Ext.TabPanel
treepanel        Ext.tree.TreePanel
viewport         Ext.Viewport
window           Ext.Window

Toolbar components
---------------------------------------
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton
tbtext           Ext.Toolbar.TextItem

Form components
---------------------------------------
form             Ext.FormPanel
checkbox         Ext.form.Checkbox
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField

我们可以看到每一个xtype代表一个组件，可以清楚的看到三大类的分割
我们来建一个panel

Ext.onReady(function() {
	var panel = new Ext.Panel({
		title:"this panel",
		width:200,
		height:300,
		html:"hello world"
	});
	panel.render("hello");

});

这里我们通过render方法进行渲染得到的。

Ext.onReady(function() {
	var panel = new Ext.Panel({
		renderTo:"hello",
		title:"this panel",
		width:200,
		height:300,
		html:"hello world"
	});
	//panel.render("hello");

});

我们也可以通过renderTo属性直接进行渲染

xtype是指定组件类型
下面我们以tabpanel为例

var tp = new Ext.TabPanel({
		renderTo:"hello",
		width:300,
		height:300,
		activeItem:0,
		items:[{
			title:"this panel1",
			html:"hello world1"
		},{
			title:"this panel2",
			html:"hello world2"
		},new Ext.tree.TreePanel({
			title:"tree panel",
			loader:new Ext.tree.TreeLoader(),
			root:new Ext.tree.AsyncTreeNode({
				text:"根节点",
				children:[{
					text:"叶子1",
					leaf:true
				},{
					text:"叶子2",
					leaf:true
				}]
			})
		}),{
			title:"tree panel2",
			loader:new Ext.tree.TreeLoader(),
			root:new Ext.tree.AsyncTreeNode({
				text:"根节点",
				children:[{
					text:"叶子1",
					leaf:true
				},{
					text:"叶子2",
					leaf:true
				}]
			}),
			xtype:"treepanel"
		}]
	})

activeItem:0表示第几个items是活动状态
items：Mixed （数组类型）
还有一点需要注意的是items可以放数组，如果只有一个也可以直接使用对象方式 如{}或new
看到最后一个treepanel了吗 我们是采用xtype来告诉panel当前组件的类型，由于第一第二各tab是标准panel所以不用显示指明（tp items下默认如此），第三第四个则需要显示指明
如果第四个不加xtype 将按panel进行解析 由于没有html所以显示为空
为什么会是这样的呢 可以看一下Container（容器组件，所有容器组件的父类 如panel）其父类是BoxComponent（包含长宽高）