Extjs
组件的使用
组件可以直接通过new 关键子来创建，比如控件一个窗口，使用new Ext.Window()，
创建一个表格则使用new Ext.GridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。
组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性
及值，组件根据构造函数中的参数属性值来初始化组件。比如下面的例子：
grid Ext.grid.GridPanel 表格
paging Ext.PagingToolbar 工具栏中的间隔
panel Ext.Panel 面板
progress Ext.ProgressBar 进度条
splitbutton Ext.SplitButton 可分裂的按钮
tabpanel Ext.TabPanel 选项面板
treepanel Ext.tree.TreePanel 树
viewport Ext.ViewPort 视图
window Ext.Window 窗口
工具栏组件有
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 Ext.FormPanel Form 面板
checkbox Ext.form.Checkbox checkbox 录入框
combo Ext.form.ComboBox combo 选择项
datefield Ext.form.DateField 日期选择项
field Ext.form.Field 表单字段
fieldset Ext.form.FieldSet 表单字段组
hidden Ext.form.Hidden 表单隐藏域
htmleditor Ext.form.HtmlEditor html 编辑器
numberfield Ext.form.NumberField 数字编辑器
radio Ext.form.Radio 单选按钮
textarea Ext.form.TextArea 区域文本框
textfield Ext.form.TextField 表单文本框
timefield Ext.form.TimeField 时间录入项
trigger Ext.form.TriggerField 触发录入项
一个页面中只能有一个ViewPort 实例
窗口应用：
窗口基本应用
ExtJS 中窗口是由Ext.Window 类定义，该类继承自Panel，因此窗口其实是一种特殊的
面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。看下面的代码：
items:[{title:"面板1"},
{title:"面板2"}]
}
]
});
});
页面中的html 内容：
执行上面的代码，当点击按钮“新窗口”的时候，会在页面中显示一个窗口，窗口标题为
“窗口x”，窗口可以关闭，可以最大化，点击最大化按钮会最大化窗口，最大化的窗口可以
还原，如图xxx 所示。
5.2
窗口分组
窗口是分组进行管理的，可以对一组窗口进行操作，默认情况下的窗口都在默认的组
Ext.WindowMgr 中。窗口分组由类Ext.WindowGroup 定义，该类包括bringToFront、getActive、
hideAll、sendToBack 等方法用来对分组中的窗口进行操作。
var i=0;
function newWin()
{
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true});
win.show();
}
Ext.onReady(function(){
Ext.get("btn").on("click",newWin);
});
<input id="btn" type="button" name="add" value="新窗口" />
看下面的代码：
页面中的html 代码
执行上面的代码，先点击几次“新窗口”按钮，可以在页面中显示几个容器，然后拖动这
些窗口，让他们在屏幕中不同的位置。然后点“放到后台”按钮，可以实现把最前面的窗口移
动该组窗口的最后面去，点击“隐藏所有”按钮，可以隐藏当前打开的所有窗口。如下图所示：
var i=0,mygroup;
function newWin()
{
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true,
manager:mygroup});
win.show();
}
function toBack()
{
mygroup.sendToBack(mygroup.getActive());
}f
unction hideAll()
{
mygroup.hideAll();
}
Ext.oReay(function(){
mygroup=new Ext.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
});
<input id="btn" type="button" name="add" value="新窗口" />
<input id="btnToBack" type="button" name="add" value="放到后台" />
<input id="btnHide" type="button" name="add" value="隐藏所有" />