工具栏的使用很简单，关键是向工具栏上面添加内容，默认地工具栏添加的是按钮，不过实际上可以向工具栏添加任意的组件。下面是一个例子：复制代码代码如下：脚本类型=' text/JavaScript ' Ext。onready(function(){ var TB=new Ext .工具栏({ renderTo: document.body，width: 600，height: 100，items :[{//xtype : ' Button '，工具栏的默认值，与tbbutton' text: 'Button '相同)}，{ xtype: 'splitbutton '，//与“拆分按钮”文本3:“拆分按钮”相同)},//开始使用右对齐的按钮容器'-',//与工具栏。填充{ xtype: 'textfield '，名称：“字段1”，空文本：输入搜索词' },//在工具栏项目之间添加一个垂直分隔条'-',//与{ xtype :“tbseparator”}相同，以创建分机.工具栏。分隔符"文本1 "，//与{ xtype :“tbtext”，text :“text 1”}相同，用于创建分机.工具栏TextItem {xtype: 'tbspacer' }，//与' '相同，用于创建分机.工具栏。分隔符" text 2 "，{ xtype :"tbspacer，width: 50 }，//添加50px空格" text 3 "]})；});/脚本框架添加组件的方式很灵活，可以在项目数组中直接添加对象，比如新分机.按钮(…),也可以直接添加配置项，如上例所示，其实就是把对象的构造函数中的参数直接取出来，省略了新的，取而代之的是xtype，由框架根据神秘类型去构造相应的对象xtype。是在延伸文件系统成分中定义的，xtype是一个字符串，它的作用是一个类型的别名Extjs。有一些默认的xtype，用户自己也可以设置某个类型的xtype，不过这个超出了本文的范围xtype。和类型的对应在框架的美国石油学会(美国石油协会)文档中有，下面摘抄出一部分备查工具栏组件-分页扩展。分页工具栏外部。工具栏按钮外部。工具栏。按钮（已弃用；使用按钮)t填充外部。工具栏。填充项目外部。工具栏。项目分隔符文本。工具栏。分隔符文本。工具栏。间隔框拆分外部。工具栏。拆分按钮（已弃用；使用文本扩展.工具栏。TextItem菜单组件-菜单延伸文件系统菜单。菜单颜色菜单文本。菜单。颜色菜单日期菜单文本。菜单。日期菜单菜单菜单项延伸文件系统菜单。基本项目菜单检查项目文本。菜单。检查项目菜单项ext。菜单。项目用户界面或延伸文件系统菜单。文字。文本项目表单组件-表单延伸文件系统表单面板复选框组ext。形式。复选框组ext。形式。组合框日期字段ext。形式。datefield displayfield ext。形式。显示字段再仔细看下神秘类型的美国石油学会(美国石油协会)文档的原文：xtype :字符串要创建的注册xtype .将配置对象传递给构造函数时，不使用此配置选项。此配置选项仅在使用惰性实例化时使用，并且容器的子项目不是被指定为完全实例化的组件，而是被指定为组件配置对象。将在渲染时查找xtype，以确定要创建哪种类型的子组件。这句话说的是如果在新的的时候使用xtype，这个神秘类型是忽略的，这个是明显的，用了新的就肯定要指定一个类型，xtype是无用的。

后半句是关键，意思是如果使用xtype，对象不会立即构造，而是采用延迟加载机制，只在需要显示对象时才构造。在第一次使用之前，它只是内存中的一个组件配置对象。虽然API文档没有明确提到，但它暗示如果可能的话，使用xtype而不是new是更好的选择，这样可以节省内存。实际上，并不是所有的组件都需要显示，所以那些没有显示的组件不需要实例化。本文讨论了EXT中XT type的含义，介绍了XT type，然后回到工具栏。上述代码的运行效果为：。

一个很美观的工具栏就出现了。接下来的工作是为这些按钮添加方法，不过这不是本文的讨论范围，以后再讲。接下来介绍菜单，菜单和工具栏是很类似的菜单上能添加的组件在上面的神秘类型表中已经列出，直接看一个例子：复制代码代码如下：脚本类型=' text/JavaScript ' Ext。onready(function(){ var TB=new Ext .工具栏({ renderTo: document.body，宽度： 600，高度： 100 })；变量文件菜单=新文本。菜单。菜单({ shadow : ' frame '，items: [{ text: 'New' }，{ text: 'Open' }，{ text: 'Save' }，'-'，{ text: 'Export' }，{ text : ' Import ' })；tb.add({ text: 'File '，菜单： File菜单})；var日期菜单=新文本。菜单。dateMenu({ })；var颜色菜单=新文本。菜单。颜色菜单({ })；tb.add({ text: '七彩，menu: { xtype: '菜单，items :[{ text : }选择日期，menu: '日期菜单，{ text: '选择颜色，menu: '颜色菜单，'-'，{text: '单选选项，menu: { //-嵌套配置对象的子菜单items: [ //将任何标记粘贴到肺结核。dolayout()；});/script效果如下