【免费】InlineToolbarTabPanel资源-CSDN文库

共3个文件

js：2个

html：1个

4星 · 超过85%的资源需积分: 0 149 浏览量更新于2009-02-03 收藏 3KB ZIP 举报

在EXTJS这个强大的JavaScript框架中，`InlineToolbarTabPanel`是一种自定义组件，它结合了TabPanel和Toolbar的功能，提供了一种高效的用户界面设计。这个组件通常用于在每个Tab页头内部显示一个工具栏，使得用户可以对当前的Tab进行操作，而无需额外的界面空间。这种设计模式在数据编辑、配置界面或者多任务处理场景中尤为常见。 `InlineToolbarTabPanel`的核心特性是将常用的控制项（如添加、删除、保存等）直接集成到TabPanel的标签中，这使得用户界面更加紧凑且易于使用。它继承自EXTJS的`TabPanel`类，通过扩展并修改其默认行为，实现了内嵌的Toolbar功能。我们来看`Ext.ux.InlineToolbarTabPanel.js`这个文件，这是实现`InlineToolbarTabPanel`功能的源代码。EXTJS中的`ux`目录通常用于存放第三方或自定义的组件。在这个文件中，开发者定义了一个新的构造函数，覆盖了`TabPanel`的一些关键方法，如`onRender`和`onTabChange`，来实现Toolbar的创建和更新。`onRender`方法是在组件渲染到页面时被调用的，这里可能包含了创建和布局内嵌Toolbar的逻辑；`onTabChange`则在用户切换Tab时触发，用于更新当前Tab的Toolbar状态。 `tabs-extension.html`和`tabs-extension.js`文件可能是示例代码或应用该组件的页面和脚本。`tabs-extension.html`可能包含了一个HTML结构，展示了如何在页面中使用`InlineToolbarTabPanel`，并引用了EXTJS库以及我们的自定义组件。`tabs-extension.js`则可能包含了设置TabPanel、定义Toolbar项、添加Tab页等内容的JavaScript代码。通过这两个文件，开发者可以快速了解如何在实际项目中集成和使用`InlineToolbarTabPanel`。在EXTJS的应用开发中，这样的自定义组件大大提高了UI的灵活性和可定制性。`InlineToolbarTabPanel`不仅节约了屏幕空间，还提高了用户体验，因为它将相关的操作直接放在了用户需要的地方。在实际使用时，开发者可以根据需求调整Toolbar上的按钮，例如添加或移除某些功能，或者改变按钮的样式和事件处理。总结一下，`InlineToolbarTabPanel`是一个EXTJS的自定义组件，它通过在每个Tab页头内部嵌入Toolbar，提供了更高效的操作方式。它的实现依赖于`Ext.ux.InlineToolbarTabPanel.js`文件中的源代码，而`tabs-extension.html`和`tabs-extension.js`则可能是展示如何使用该组件的示例。理解并熟练运用这种组件，能够帮助开发者构建更加直观、易用的Web应用程序。

收起资源包目录

InlineToolbarTabPanel-v0-1-001a.zip （3个子文件）

tabs-extension.js 1KB

Ext.ux.InlineToolbarTabPanel.js 2KB

tabs-extension.html 5KB

资源推荐

资源预览

资源评论

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Tab Toolbar Example</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="tabs-example.css" /> <link rel="stylesheet" type="text/css" href="../examples.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="Ext.ux.InlineToolbarTabPanel.js"></script> <script type="text/javascript" src="tabs-extension.js"></script> </head> <body> <script type="text/javascript" src="../examples.js"></script> <div style="font-size:18pt">Tab Panel Toolbar Extension Example</div><div style="font-size:8pt;">     by Chris Dawes</div> <br> <p>View the javascript here : <a href="tabs-extension.js">tabs-extension.js</a></p>  <div id="tabs1"> <div id="script" class="x-hide-display"> <p>1111 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p> </div> <div id="script2" class="x-hide-display"> <p>22222 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p> </div> <div id="script3" class="x-hide-display"> <p>33333 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p> </div> <div id="script4" class="x-hide-display"> <p>44444 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p> </div> <div id="script5" class="x-hide-display"> <p>55555 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p> </div> <div id="script6" class="x-hide-display"> <p>66666 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p> </div> <div id="markup" class="x-hide-display"> <p>77777 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p> </div> </div> </body> </html>