3.4 Ext JS工具栏 toolbar全介绍

我会带着你远行 2024-03-25 21:54 100阅读 0赞

Toolbar，工具栏 ，是容器类的一个子类， 用于放置按钮等组件。其对应的类是Ext.toolbar.Toolbar , xtype 是 toolbar。类结构如下：  
![在这里插入图片描述][c249106838474819868bbd012a987cc1.png]

### Toolbar 的子元素类型 ###

Toolbar 的默认的元素是 Ext.button.Button ， 也可以是其他类型的组件，另外， 还可以使用下面的一些快捷字符串。

<table> 
 <thead> 
  <tr> 
   <th>简写字符串</th> 
   <th>xtype</th> 
   <th>类</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>'-&gt;'</code></td> 
   <td>tbfill</td> 
   <td>Ext.toolbar.Fill</td> 
   <td>右对齐按钮， 在该按钮后面的按钮都居右对齐</td> 
  </tr> 
  <tr> 
   <td><code>'-'</code></td> 
   <td>tbseparator</td> 
   <td>Ext.toolbar.Separator</td> 
   <td>垂直分隔条</td> 
  </tr> 
  <tr> 
   <td><code>''</code></td> 
   <td>tbspacer</td> 
   <td>Ext.toolbar.Spacer</td> 
   <td>在元素之间添加水平间距</td> 
  </tr> 
 </tbody> 
</table>

示例代码如下：

Ext.create('Ext.toolbar.Toolbar',{
    				renderTo:'div1',
    				items:[{
    					text: '默认的按钮类型'
    				},{
    					xtype: 'splitbutton'

[c249106838474819868bbd012a987cc1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f80e5026092243db9d61e9f208f8375a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，100人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ext Direct 开发全介绍

Ext Direct 是 Ext JS 框架中的一个功能模块，用于简化前端 JavaScript 应用程序与后端服务器之间的通信和数据交换。 Ext Direct是什么？

￡神魔★判官ぃ/ 2024年03月26日 22:22/ 0 赞/ 84 阅读

相关 10.1.1 Ext JS 面板添加工具栏的方式汇总

Ext JS的面板（比如form, grid）中添加工具栏按钮的方式有多种，具体如下表： <table> <thead> <tr> <th>配置方式</

逃离我推掉我的手/ 2024年03月25日 23:42/ 0 赞/ 38 阅读

相关 3.4 Ext JS工具栏 toolbar全介绍

Toolbar，工具栏，是容器类的一个子类，用于放置按钮等组件。其对应的类是Ext.toolbar.Toolbar , xtype 是 toolbar。类结构如下： !

我会带着你远行/ 2024年03月25日 21:54/ 0 赞/ 101 阅读

相关 Ext JS 如何设置工具栏按钮和一般按钮保持统一样式

在Ext JS 中， Button的背景色保持和系统的主色调一致，样式如下： ![在这里插入图片描述][f7ad948c81f843e7a692492d22e31bda.

﹏ヽ暗。殇╰゛Y/ 2024年03月17日 16:12/ 0 赞/ 58 阅读

相关 Ext Direct 全解密

Ext Direct 相关的类 Ext Direct旨在通过提供单一接口来简化客户端和服务器之间的通信，从而减少验证数据和处理返回数据包（读取数据、错误条件等）通常需要的

港控/mmm°/ 2024年03月08日 07:03/ 0 赞/ 104 阅读

相关组合控件——顶部导航栏——工具栏Toolbar

![0c6b8bbcb6d12e353da09b0c7f1322a9.png][] 工具栏位于页面顶部，引入工具栏的步骤如下： (1)在styles.xml中定义一个不包含

ゝ一世哀愁。/ 2023年09月28日 23:02/ 0 赞/ 13 阅读

相关 ueditor修改工具栏toolbar

修改ueditor.config.js文件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

川长思鸟来/ 2023年07月18日 06:53/ 0 赞/ 141 阅读

相关 Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏

本篇讲解三个工具栏控件。其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单，Ext.toolbar.Paging专门用来控制数据集的分页展示，Ext

不念不忘少年蓝@/ 2022年08月12日 14:30/ 0 赞/ 213 阅读

相关使用Toolbar工具栏

Toolbar工具栏是谷歌推荐使用的工具栏（相对于ActionBar)。因为它属于Material控件，具有更好的灵活性。本记录是从《第一行代码andriod》中学习到的。应该

心已赠人/ 2022年06月16日 04:16/ 0 赞/ 290 阅读

相关 Unity3D ToolBar控件（工具栏）

ToolBar工具用于创建工具栏，并且以Tab页面的形式显示，选择其中任意一项后就可返回所选项的ID 工具栏常位于界面顶部或底部。常用形式：GUI.Toolbar (位置

蔚落/ 2021年11月27日 04:20/ 0 赞/ 551 阅读