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="隐藏所有" />