`

EXT工具栏

    博客分类:
  • ext
ext 
阅读更多
面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext 中工具栏是由Ext.Toolbar
类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具
栏,可以直接通过面板的tools 配置选项往面板头部加入预定义的工具栏选项。比如下面的
代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,easyjf open source!</h1>',
tools:[
{id:"save"},
{id:"help",handler:function(){Ext.Msg.alert('help','please help me!');}},
{id:"close"}],
tbar:[{pressed:true,text:'刷新'}]
});
});

注意我们在Panel的构造函数中设置了tools属性的值,表示在面板头部显示三个工具栏
选项按钮,分别是保存"save"、"help"、"close"三种。
点击help按钮会执行handler中的函数,显示一个弹出对话框,而点击其它的按钮不
会有任何行为产生,因为没有定义他们的heanlder。
除了在面板头部加入这些已经定义好的工具栏选择按钮以外,还可以在顶部或底工具栏
中加入各种工具栏选项。这些工具栏选项主要包括按钮、文本、空白、填充条、分隔符等。
代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,easyjf open source!</h1>',
tbar:[new Ext.Toolbar.TextItem('工具栏:'),
{xtype:"tbfill"},
{pressed:true,text:'添加'},
{xtype:"tbseparator"},
{pressed:true,text:'保存'}
]
});
});

Ext中的工具栏项目主要包含下面的类:
Ext.Toolbar.Button-按钮,xtype为tbbutton
TextItem-
Ext.Toolbar.Fill-
Separator-
Spacer-
SplitButton-
分享到:
评论

相关推荐

    Ext 文件,表格,工具栏,邮件,RSS,小图标素材

    Ext 小图标素材. 文件操作图标,表格操作图标,工具栏图标,邮件操作图标,RSS操作图标.

    jq-extgrid v1.2 表格插件

    http: www extgrid com extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过...extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列 [更多]

    EXT扩展Htmleditor,在工具栏中添加插入图片按钮,可选择图片插入到编辑器中(也可添加其他功能按钮)

    提供给Htmleditor的插件栏使用,使用方法,在定义Htmleditor时,在plugins中创建该工具栏即可。不只可以添加插入图片按钮,其他任何功能都可以添加,此处只是做个添加按钮的示范。

    ext.js拖动3.4版本插件

    3.4ext拖动插件,可实现tab标签的随意拖动,https://www.onenaught.com/examples/ext/draggable-tabs-example.html

    EXT经典示例大全

    1.入门 2.ext事件处理 3.面板 4.工具栏 5.Viewport 6.窗口 7.对话框 内附:ext语法总结.txt

    Extjs 3.3切换tab隐藏相应工具栏出现空白解决

    今天心血来潮,想在切换tabpanel的时候,把相应的工具栏隐藏掉,结果出现空白,先熊板板的空白! 不废话,上代码,代码如下: 代码如下: //隐藏 Ext.getCmp(‘Tab2’).tbar.hide(); Ext.getCmp(‘Tab2’).tbar.dom....

    EXT简单案例

    EXT简单案例,包含面板、工具栏、对话框、窗口等,是入门的好资源。EXT简单案例,包含面板、工具栏、对话框、窗口等,是入门的好资源。

    ext学习资料,ext js开发前台页面

    ext学习资料,包含工具栏,panel,等组件的使用以及配置.....相关实例.

    Ext2Fsd-0.51 & UserManual

    Ext2Fsd 这个小工具,便可以实现在 Windows 中挂载 Linux 分区的目的。Ext2Fsd 能够在 Windows 2000、XP、2003、Vista 等系统中运行,支持挂载 Ext2/Ext3 类型的分区。 本款软件简体中文版,无需注册,直接使用。 ...

    ext3.0所有控件演示代码

    ext3.0中的99%的控件的用法。包括表格。表单。分页工具栏。图标等。非常的详细。可以直接运行!

    Ext 3.0--下载

    Ext3.0新特性一览 ...6.强大的按钮和工具栏组件 7.ARIA/Section 508 访问性改进 8.更新了样式表,方便自定义 9.更新了ext event注册模块 10.增强了ext.ajax 11.浏览器历史支持 当然最期待的还是IDE拉!!

    ext3.0 的23个小demo

    该资源是 针对于ext3.0的组件的小demo,包括表格,工具栏,动态提示,模板,reader,布局,事件,ajax,跨域ajax,dataview及控制台等

    ext js 7.0.0

    ext js 7.0.0 Ext JS提供了业界最全面的高性能,可定制的UI窗口小部件集合,包括HTML5网格,树,列表,表单,菜单,工具栏,面板,窗口等。Ext JS在现代浏览器上利用HTML5功能,同时保持与旧版浏览器的兼容性和功能...

    Ext Js权威指南(.zip.001

    9.3.3 面板标题栏构件:ext.panel.header与ext.panel.tool / 438 9.3.4 记录和恢复面板属性:ext.util.memento / 439 9.3.5 面板常用的配置项、方法和事件 / 439 9.4 布局 / 441 9.4.1 布局概述 / 441 9.4.2 ...

    深入浅出Ext JS(第2版).part3.rar

    目录 第1章EXT概述 第2章EXT框架基础 第3章表格控件 第4章表单与输入控件 第5章树形结构 第6章拖放 第7章弹出窗口 第8章布局 第9章工具栏和菜单 第10章数据存储与传输 第11章实用工具

    快意编程 EXT JS Web开发技术详解.pdf

    第12章 工具栏与菜单栏组件 219 第13章 AJAX应用与数据交互 233 第14章 REST介绍 246 第15章 封装Ext JS提高开发速度 262 第三篇 AJAX整合实践 第16章 Ext3+REST+Spring2+ Hibernate3整合方案 326 第17章 工时统计...

    深入浅出Ext JS

    第1章 EXT概述 1 第2章 EXT框架基础 11 ...第9章 工具栏和菜单 211 第10章 数据存储与传输 230 第11章 实用工具 256 第12章 一个完整的EXT应用 317 第13章 通过Ext Framework合理地应用EXT 339

    ext JS API 实战

    控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等,在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。...

    tweet-button-webext:Web扩展程序,向工具栏添加鸣叫按钮

    鸣叫按钮Webext Web扩展程序,向工具栏添加鸣叫按钮安装执照该软件是根据。学分已获得许可。作者foooomio-

Global site tag (gtag.js) - Google Analytics