`

〖ExtJS〗之ToolBar

阅读更多

面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏,可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。
比如下面的代码:

 

Ext.onReady(function(){
new Ext.Panel({
    renderTo:"hello",
    title:"hello",//面板标题
    width:300,
    height:300,
    html:'<h1>Hello,HelloWorld!</h1>',
    tools:[{       //生成面板右上角的工具栏
        id:"save",
      handler:function(){Ext.Msg.alert('最大化','呵呵');}    //点击工具栏调用些方法
        },
        {id:"help",
      handler:function(){Ext.Msg.alert('帮助','please help me!');}
        },
        {id:"close"}],
    tbar:[new Ext.Toolbar.TextItem('工具栏:'),//添加一文本
      {pressed:true,text:'刷新'},
      {xtype:"tbfill"},//加上这句,后面的就显示到右边去了
      {pressed:true,text:"添加"},
      {pressed:true,text:"保存"}
      ]
      });
  });
 

在没有特别指定使用哪种类型的情况下,会默认自动转成按钮类型。
{pressed:true,text:'刷新'},

一、简单菜单

创建一个简单工具条的方法如下,注意的一点是HTML代码必须要有:<div id="toolbar"></div>

过程大致包括:先创建一个工具条,用工具条的render()函数把它渲染在DIV上,然后调用Toolbar的add函数,向Toolbar添加4个按钮,同时还可以添加单击处理事件。

  1. Ext.onReady(function(){  
  2.              var tb=new  Ext.Toolbar();  
  3.              tb.render('toolbar' );  
  4.                
  5.              tb.add({  
  6.                 text:"新建N" ,  
  7.                 handler:function(){  
  8.                     Ext.Msg.alert('提示' , '新建' );  
  9.                 }  
  10.              },{  
  11.                 text:"修改C"   
  12.              },{  
  13.                 text:"删除"   
  14.              },{  
  15.                 text:"显示"   
  16.              });  
  17.         });  

效果如图1所示:

1

图1 简单的工具条


二、向菜单中添加分隔线

分隔线显示就是一条水平线,可以使用它将菜单中不同类型的菜单项分隔显示,Ext中向菜单中添加分隔线的方式有两种。

1、使用连字符或'separator'作为参数, 如下面的代码所示:

  1. var menu1= new  Ext.menu.Menu({  
  2.                 items:[  
  3.                     {text:'菜单一' },  
  4.                     {text:'菜单二' }  
  5.                 ]  
  6.              });  
  7.              //menu1.add('-'); \\最简单的写法
  8.              menu1.add('separator' );  
  9.              var tb=new  Ext.Toolbar();  
  10.              tb.render('toolbar' );  
  11.                
  12.              tb.add({  
  13.                 text:'新建' ,  
  14.                 menu:menu1  
  15.              });  

2、用Ext.menu.Separator的实例作为参数 ,如下面的代码所示:

  1. menu1.add( new  Ext.menu.Separator());  
 

具体效果如图2所示:

2.1

图2.1 无分隔线效果

2.2

三:Ext.Toolbar.Fill

他的作用是将处于他右侧的工具条组件以右对齐的方式排列在工具条右侧

xtype:tbfill

如实例1代码所示。

 

 

四:总结:

工具条的主要作用是添加工具条组件,可参考工具条组件的xtype,还可以添加表单的输入控件,例如Ext.form.TextField形式的直接填写文字内容的输入框,还有Ext.form.DateField形式的日期选择框等其他组件。

分享到:
评论
1 楼 sailor119 2012-10-30  
学习一下!

相关推荐

    extJs4 toolbar工具条

    ### extJs4 toolbar工具条详解 #### 一、概述 `ExtJS` 是一款非常强大的企业级前端框架,它能够帮助开发者快速构建出美观且功能丰富的 Web 应用程序。在 `ExtJS 4` 版本中,`Toolbar`(工具栏)组件是一个重要的...

    storebar extjs通过store实现toolbar

    在EXTJS这个强大的JavaScript框架中,`Store`和`Toolbar`是两个核心组件,它们分别用于数据管理和用户界面的交互。本篇文章将深入探讨如何利用`Store`来实现`Toolbar`的功能,即所谓的`Storebar`,这在EXTJS开发中是...

    extjs4.2 动态生成toolbar

    "ExtJS 4.2 动态生成Toolbar" 在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar,包括视图层、 Toolbar.js 和后台调用...

    ExtJs开始之旅

    本讲将带你开启ExtJS的探索之旅,通过四个部分的学习,你将逐步掌握其核心概念和实践技巧。 首先,"初识ExtJS" 部分会介绍ExtJS的基本理念和架构,包括MVC(Model-View-Controller)设计模式的应用,以及如何利用这...

    ToolBar 样式更改Demo

    在Android开发中,`ToolBar`是App界面设计中不可或缺的一部分,它通常位于Activity或Fragment的顶部,用作应用的导航栏。`ToolBar`是自Android 5.0(API级别21)开始引入的,作为`ActionBar`的替代品,提供了更灵活...

    EXTJS讲解个人项目经历

    EXTJS 是一个强大的JavaScript前端框架,它主要用于构建富客户端应用,提供丰富的用户界面组件和灵活的可定制性。EXTJS 的核心在于其组件化的架构,允许开发者构建复杂的UI布局和功能丰富的应用程序。以下是对EXTJS...

    extjs6.6框架的web项目(登录+首页)

    5. **首页左菜单**:EXTJS的导航组件,如`Ext.menu.Menu`和`Ext.toolbar.Toolbar`,可以用来创建复杂的导航结构。在本项目中,左侧菜单可能使用了这些组件,提供多级菜单,允许用户在应用的不同部分之间导航。 6. *...

    extjs 分页

    3. Paging Toolbar:分页条是EXTJS提供的一种UI组件,它包含页码按钮、跳转输入框、每页记录数下拉框等,方便用户进行分页操作。 二、EXTJS分页实现 1. 配置Store:首先,我们需要在Store中配置分页参数,如设置每...

    ExtJs2.0学习系列

    工具栏(Toolbar)和菜单(Menu)在用户界面中起到辅助操作的作用。学习如何创建和定制这些元素,可以提供丰富的交互功能,如按钮、下拉菜单、分隔符等。 八、拖放功能 ExtJS 2.0支持拖放操作,允许用户通过鼠标...

    Extjs之--图片浏览器

    标题中的“Extjs之--图片浏览器”指的是使用Ext JS框架构建的一个用于展示和浏览图片的应用程序。Ext JS是一个流行的JavaScript库,它提供了丰富的组件和工具,用于构建交互式的Web应用程序。这个图片浏览器可能是...

    EXTJS实用开发指南_个人整理笔记.pdf

    2. 工具栏控件:Toolbar、Toolbar.Button、Toolbar.Fill、Toolbar.Item等。 四、高级EXTJS应用 EXTJS提供了许多高级功能,如: 1. 数据绑定:EXTJS提供了数据绑定的功能,可以将数据绑定到控件上。 2. 事件处理:...

    EXTJS4之类系统和编码规范

    ### EXTJS4之类系统和编码规范 #### 一、概述 ExtJS4 是一款功能强大的JavaScript框架,提供了超过300个内置类,支持不同后端语言的开发者使用。为了应对如此大规模框架所带来的挑战,ExtJS4 需要具备以下几个特点...

    extjs 源码

    EXTJS 3.0是其历史版本之一,提供了一套完整的组件模型、数据绑定、布局管理以及丰富的用户界面控件。这个源码包不仅包含了EXTJS 3.0的核心库,还提供了相关的文档和代码示例,这对于开发者深入理解EXTJS的工作原理...

    ExtJS 3.4.0

    7. **工具栏和菜单**:提供易于使用的工具栏(Toolbar)和菜单(Menu)组件,支持添加按钮、下拉列表、分隔符等元素,便于创建丰富的用户交互界面。 8. **表单组件**:ExtJS 3.4.0 包含各种表单字段(如文本框、...

    EXTJS3.0中文API (离线)

    8. **工具栏和菜单**:EXTJS提供了工具栏(Toolbar)和下拉菜单(Menu)组件,可以用于添加按钮、分隔符、下拉列表等元素,增强用户界面的功能性。 9. **拖放功能**:EXTJS支持拖放操作,允许用户将组件或数据在...

    extjs上方动态导航栏

    在ExtJS中,上方的动态导航栏(通常称为Header或Toolbar)是一种常见的组件,用于展示应用的菜单、按钮、下拉框等交互元素,用户可以根据需求动态加载和更新。本篇文章将深入探讨如何在ExtJS中创建并实现上方动态...

    extjs小图标(项目小图标大全)

    在使用这些图标时,开发者通常会结合ExtJS的组件,如按钮(Button)、工具栏(Toolbar)或网格面板(Grid Panel),通过设置图标字段(iconField)或图标CSS类(iconCls)来添加图标。例如,你可以这样创建一个带有...

    图表颜色设置 extjs

    根据给定的信息,我们可以深入探讨如何在ExtJS中设置图表的颜色以及其他相关配置。ExtJS是一个用JavaScript编写的库,主要用于构建交互式的Web应用程序。它提供了丰富的UI组件、强大的数据处理功能以及灵活的主题...

    extJs之分页控件

    在本案例中,我们关注的是"extJs之分页控件",这将涉及如何使用ExtJS实现分页功能,并讨论"ux.Andrie.pPageSize"这个特定的组件。 分页控件通常与数据网格(Grid)或者数据视图(DataView)一起使用,用于处理...

Global site tag (gtag.js) - Google Analytics