ExtJS教程：全面解析工具栏与菜单使用

“ExtJS工具栏”是一篇关于ExtJS库中工具栏和菜单使用的教程，适合初学者。文章提到了菜单的各种类型，如下拉菜单、分组菜单、右键菜单，并强调EXT实现这些功能的简便性。内容涵盖创建简单菜单、在菜单中添加分隔线、创建多级菜单以及高级菜单的实现。 在EXTJS中，工具栏（Toolbar）通常用于放置功能按钮，用户点击这些按钮执行相应操作。创建工具栏的基本步骤包括：首先在HTML中定义一个容器，如`<div id="toolbar"></div>`，然后通过JavaScript代码创建一个Ext.Toolbar对象并将其渲染到指定的DOM元素上，接着使用`add`方法添加按钮并可绑定点击事件。 例如，以下代码展示了如何创建一个简单的工具栏，包含“新建”、“修改”、“删除”和“显示”四个按钮： ```javascript Ext.onReady(function(){ var tb = new Ext.Toolbar(); tb.render('toolbar'); tb.add({ text: "新建N", handler: function(){ Ext.Msg.alert('提示','新建'); } },{ text: "修改C" },{ text: "删除" },{ text: "显示" }); }); ``` 在工具栏中添加分隔线有助于视觉区分不同的菜单项。在EXTJS中，有两种方法实现这一功能：一是使用连字符`-`或字符串`'separator'`作为参数添加到`add`方法中，这会在菜单项之间插入一条水平线。 例如，要在上述简单菜单中添加分隔线，可以这样修改： ```javascript tb.add({ text: "新建N", handler: function(){ Ext.Msg.alert('提示','新建'); } }, "-", { text: "修改C" }, { text: "删除" }, { text: "显示" }); ``` 此外，文章还可能涉及了创建多级菜单和更复杂的菜单结构，以及如何在菜单中嵌入其他组件如单选框、按钮等。高级菜单可能涉及到动态加载、异步数据源、自定义事件处理等功能，这些都是EXTJS中工具栏和菜单使用的重要部分。 这篇教程旨在帮助开发者理解并熟练运用EXTJS库中的工具栏和菜单组件，从而构建功能丰富的Web应用界面。