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

逃离我推掉我的手 2024-03-25 23:42 7阅读 0赞

Ext JS的面板（比如form, grid） 中添加工具栏按钮的方式有多种， 具体如下表：

<table> 
 <thead> 
  <tr> 
   <th>配置方式</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>tbar</td> 
   <td>Top Bar ，顶部工具栏</td> 
  </tr> 
  <tr> 
   <td>bbar</td> 
   <td>Bottom Bar，底部工具栏</td> 
  </tr> 
  <tr> 
   <td>lbar</td> 
   <td>Left Bar ，左侧工具栏</td> 
  </tr> 
  <tr> 
   <td>rbar</td> 
   <td>Right Bar ，右侧工具栏</td> 
  </tr> 
  <tr> 
   <td>fbar</td> 
   <td>Footer Bar ，页脚工具栏</td> 
  </tr> 
  <tr> 
   <td>dockedItems</td> 
   <td>停靠项</td> 
  </tr> 
  <tr> 
   <td>buttons</td> 
   <td>dockedItems 的便捷方式</td> 
  </tr> 
 </tbody> 
</table>

### tbar ，bbar ，lbar ，rbar ###

这四个配置表示工具栏位于面板的四个不同的位置， 分别是上、下、左、右。 显示的效果如下：  
![在这里插入图片描述][994311b465b74525b3aec9794ff406d7.png]

定义方式是：

{
    					xtype: 'panel',
    					title: 'tbar顶部工具栏',
    					tbar: [{
    						iconCls: 'x-fa fa-edit',
    						text: '按钮1'
    					}]
    				}

### < ###

[994311b465b74525b3aec9794ff406d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/962a62b76a5340359c8b67b46844d31b.png

发表评论取消回复

表情：

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

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

相关阅读

相关 uniapp 给 editor 添加简单的工具栏

开发App时遇到富文本编辑，我首先的思路在uniapp官网找一下，确实官网给提供了内置组件editor。相信测试过案例时，都会发现没有工具栏。我也想如果有现成可以直接使用...

快来打我*/ 2024年04月22日 15:06/ 0 赞/ 37 阅读

相关 [Ext JS]图片显示方式

Ext JS 应用的图片应用场景以及图片显示实现方式在Ext JS应用中，图标一般使用图标字体实现，比如使用 Font Awesome 或是Pictos ，使用方式

淩亂°似流年/ 2024年04月08日 09:37/ 0 赞/ 26 阅读

相关 [Ext JS]textfield 添加 compositionstart、compositionupdate 和 compositionend

中秋节前夕有朋友通过信息研讨在Ext JS 中如何给现有类添加事件，之前大致给了我的一些思路。假期后，看到了发来的大致需求是给textfield 添加 compositi

绝地灬酷狼/ 2024年04月07日 16:06/ 0 赞/ 34 阅读

相关 [Ext JS] Grid Summary(汇总行)特性

Ext.grid.feature.Summary 是 Grid 的feature之一。这个特性会在表格的最下方多一行汇总。汇总行主要包含两个部分：值的计算

今天药忘吃喽~/ 2024年03月27日 09:12/ 0 赞/ 32 阅读

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

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

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

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

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

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

相关 10.8.1 Ext JS 组件获取方式汇总介绍

在Ext JS 中，初始化某种类型的组件之后，如何获取到定义的组件对象呢？典型的场景类似：初始化了一个Grid组件，后面要获取这个组件的Store，重新加载Stor

Myth丶恋晨/ 2024年03月25日 14:04/ 0 赞/ 20 阅读

相关 Spring Boot+Ext JS 前后端交互之Ajax参数传递方式汇总

JSP 与Spring 的后端参数接收方式 JSP/Servlet 获取请求参数的方式是调用request对象的方法，主要是两种： 1. `request.getP

桃扇骨/ 2024年03月24日 14:14/ 0 赞/ 30 阅读

相关 Ext JS 静态公用方法的定义方式

在Ext JS 应用中，页面组件的显示和操作功能的的开发模式主要有两种： MVC ：传统的Model，View, Controller 模式，视图中相关功能函数定义

川长思鸟来/ 2024年03月17日 20:53/ 0 赞/ 31 阅读

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

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

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