我们还是以alert为例
首先我们如果想创建一个alert 可以先去文档中查看
Ext.MessageBox包下
文档中我们可以看到一些demo
和属性 方法 事件的介绍。
这里只存在属性和方法
这就是alert方法的介绍 很详细
下面我们想要一个有警告框的alert
我们在方法中发现了一个show方法 接受的参数是配置选项(属性)
直接用样例代码
可以在属性介绍中看到描述是"The CSS class that provides the INFO icon image",来替换icon的样式 即图标样式
对于按钮的样式也可以改变"Button config that displays a single OK button "具体使用同上
对于组件来说主要有三大类:基本组件、工具栏组件、表单及元素组件
Component是顶级组件 及 其它组件是由他进行定义的 每一个组件都有一个xtype属性值,该值可以知道一个组件类型或者说是定义一个该类型的组件
我们可以看到每一个xtype代表一个组件,可以清楚的看到三大类的分割
我们来建一个panel
这里我们通过render方法进行渲染得到的。
我们也可以通过renderTo属性直接进行渲染
xtype是指定组件类型
下面我们以tabpanel为例
activeItem:0表示第几个items是活动状态
items:Mixed (数组类型)
还有一点需要注意的是items可以放数组,如果只有一个也可以直接使用对象方式 如{}或new
看到最后一个treepanel了吗 我们是采用xtype来告诉panel当前组件的类型,由于第一第二各tab是标准panel所以不用显示指明(tp items下默认如此),第三第四个则需要显示指明
如果第四个不加xtype 将按panel进行解析 由于没有html所以显示为空
为什么会是这样的呢 可以看一下Container(容器组件,所有容器组件的父类 如panel)其父类是BoxComponent(包含长宽高)
首先我们如果想创建一个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(包含长宽高)