2、使用Ext.panel.Panel--创建面板
3、使用Ext.toolbar.ToolBar--创建工具条
4、使用Ext.tab.Panel--创建Tab面板
5、使用Ext.container.Viewport--整体布局
6、使用Ext.window.Window--创建窗口
7、使用Ext.window.MessageBox--创建对话框
8、使用Ext.menu.CheckItem、Ext.menu.ColorPicker、Ext.menu.DatePicker实现特殊菜单项
9、使用Ext.Ation--创建按钮
10、使用Ext.ProgressBar--创建进度条
11、使用Ext.slider.Single--创建滑动条
12、使用Ext.Img--创建图片
13、使用Ext.Editor--创建编辑器
14、使用Ext.tip.ToolTip--创建提示
15、使用Ext.QuickTipManager和Ext.tip.QuickTip--创建提示
16、使用Ext.ux.GMapPanel实现Google地图
17、使用Ext.form.field.ComboBox--创建复合框
18、使用Ext.data.Store与Ext.data.Model管理数据
19、使用Ext.data.Proxy.Proxy和Ext.data.reader.Reader读取数据
20、使用Ext.grid.Panel--生成表格
21、使用Ext.grid.column.Column-定义列
22、使用Ext.grid.Panel显示远程数据
23、使用Ext.tree.Panel生成数
xtype Class 描述
button Ext.Button 按钮
splitbutton Ext.SplitButton 带下拉菜单的按钮
cycle Ext.CycleButton 带下拉选项菜单的按钮
buttongroup Ext.ButtonGroup 编组按钮(Since 3.0)
slider Ext.Slider 滑动条
progressExt.ProgressBar 进度条
statusbar Ext.StatusBar 状态条，2.2加进来，3.0 又去了
colorpaletteExt.ColorPalette调色板
datepicker Ext.DatePicker 日期选择面板
xtype Class 描述
window Ext.Window 窗口
viewportExt.ViewPort视口，即浏览器的视口，能随之伸缩
box Ext.BoxComponent盒子组件，相当于一个 <div>
component Ext.Component 组件
container Ext.Container 容器
panel Ext.Panel 面板
tabpanelExt.TabPanel选项面板
treepanel Ext.tree.TreePanel 树型面板
flash Ext.FlashComponent 显示 Flash 的组件(Since 3.0)
gridExt.grid.GridPanel 表格
editorgrid Ext.grid.EditorGridPanel可编辑的表格
propertygridExt.grid.PropertyGrid 属性表格
editor Ext.Editor 编辑器
dataviewExt.DataView数据显示视图
listviewExt.ListView列表视图
xtype Class 描述
paging Ext.PagingToolbar 分页工具条
toolbar Ext.Toolbar 工具栏
tbbuttonExt.Toolbar.Button 工具栏按钮
tbfill Ext.Toolbar.Fill工具栏填充区
tbitem Ext.Toolbar.Item工具条项目
tbseparator Ext.Toolbar.Separator 工具栏分隔符
tbspacerExt.Toolbar.Spacer 工具栏空白
tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮
tbtext Ext.Toolbar.TextItem工具栏文本项
xtype Class 描述
menuExt.menu.Menu 菜单
colormenu Ext.menu.ColorMenu 颜色选择菜单
datemenuExt.menu.DateMenu 日期选择菜单
menubaseitemBaseItem
menucheckitem Ext.menu.CheckItem 选项菜单项
menuitemExt.menu.Item
menuseparator Ext.menu.Separator 菜单分隔线
menutextitemExt.menu.TextItem 文本菜单项
xtype Class 描述
formExt.FormPanel/Ext.form.FormPanel表单面板
checkboxExt.form.Checkbox 多选框
combo Ext.form.ComboBox 下拉框
datefield Ext.form.DateField 日期选择项
timefield Ext.form.TimeField 时间录入项
field Ext.form.Field 表单字段
fieldsetExt.form.FieldSet 表单字段组
hidden Ext.form.Hidden 表单隐藏域
htmleditor Ext.form.HtmlEditor HTML 编辑器
label Ext.form.Label 标签
numberfield Ext.form.NumberField数字编辑器
radio Ext.form.Radio 单选按钮
textareaExt.form.TextArea 多行文本框
textfield Ext.form.TextField 表单文本框
trigger Ext.form.TriggerField 触发录入项
checkboxgroup Ext.form.CheckboxGroup 编组的多选框(Since 2.2)
displayfieldExt.form.DisplayField 仅显示，不校验/不被提交的文本框
radiogroup Ext.form.RadioGroup 编组的单选按钮(Since 2.2)
xtype Class 描述
chart Ext.chart.Chart 图表组件
barchartExt.chart.BarChart 柱状图
cartsianchart Ext.chart.CartesianChart
columnchart Ext.chart.ColumnChart
linechart Ext.chart.LineChart 连线图
piechartExt.chart.PieChart 扇形图
xtype Class 描述
arraystore Ext.data.ArrayStore
directstore Ext.data.DirectStore
groupingstore Ext.data.GroupingStore
jsonstore Ext.data.JsonStore
simplestore Ext.data.SimpleStore
store Ext.data.Store
xmlstoreExt.data.XmlStore
Redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想。明智的做法是只在最顶层组件（如路由操作）里使用 Redux。其余内部组件仅仅是展示性的，所有数据都通过 props 传入。
那么为什么需要容器组件和展示组件相分离呢？
这里有个基本原则：容器组件仅仅做数据提取，然后渲染对应的子组件，记住这个点，Trust me！
看下面这个展示列表的例子，不区分容器和展示组件的情况
// CommentList.jsclass CommentList extends React.Component { constructor() { super() this.state = { comments: [] }
}
componentDidMount() {
$.ajax({ url: "/my-comments.json", dataType: 'json', success: function(comments) { this.setState({comments: comments})
}.bind(this)
})
}
render() { return <ul>{this.state.comments.map(renderComment)} </ul>
}
renderComment({body, author}) { return <li>{body}—{author}</li>
}
}
可用性：CommentList不可以复用
数据结构：组件应该对所需要的数据有所预期，但这里其实没有，PropTypes可以很好的做到这一点
那么来看下分离的情况：
// CommentListContainer.jsclass CommentListContainer extends React.Component {constructor() { super() this.state = { comments: [] }
}
componentDidMount() {
$.ajax({
url: "/my-comments.json",
dataType: 'json',
success: function(comments) { this.setState({comments: comments})
}.bind(this)
})
}
render() { return <CommentList comments={this.state.comments} />
}
}// CommentList.jsclass CommentList extends React.Component {
constructor(props) { super(props)
}
render() {
return <ul>{this.props.comments.map(renderComment)} </ul>
}
renderComment({body, author}) { return <li>{body}—{author}</li>
}
}
这样就做到了数据提取和渲染分离，CommentList可以复用，CommentList可以设置PropTypes判断数据的可用性
来看下容器组件和展示组件的区别:
展示组件
容器组件
关注事物的展示 关注事物如何工作
可能包含展示和容器组件，并且一般会有DOM标签和css样式 可能包含展示和容器组件，并且不会有DOM标签和css样式
常常允许通过this.props.children传递 提供数据和行为给容器组件或者展示组件
对第三方没有任何依赖，比如store 或者 flux action 调用flux action 并且提供他们的回调给展示组件
不要指定数据如何加载和变化 作为数据源，通常采用较高阶的组件，而不是自己写，比如React Redux的connect(), Relay的createContainer(), Flux Utils的Container.create()
仅通过属性获取数据和回调
很少有自己的状态，即使有，也是自己的UI状态
除非他们需要的自己的状态，生命周期，或性能优化才会被写为功能组件
优势：
展示和容器更好的分离，更好的理解应用程序和UI
重用性高，展示组件可以用于多个不同的state数据源
展示组件就是你的调色板，可以把他们放到单独的页面，在不影响应用程序的情况下，让设计师调整UI
迫使你分离标签，达到更高的可用性
