EXTJs工具条,菜单,Tab标签

最新推荐文章于 2019-05-24 11:58:55 发布
最新推荐文章于 2019-05-24 11:58:55 发布
阅读量8.3k 收藏 7
点赞数 1
文章标签： EXTJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SJF0115/article/details/8881050
版权

<1>简单工具条

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.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="../examples.js"></script>
	<script type="text/javascript">
	
		Ext.onReady(function()
			{
				var tb = new Ext.Toolbar();
				tb.render('toolbar');
				tb.add(
					{
						text:'新建',
						handler:function(){
							Ext.Msg.alert('提示','新建');
						}
					},
					{
						text:'修改',
						handler:function(){
							Ext.Msg.alert('提示','修改');
						}
					},
					{
						text:'删除',
						handler:function(){
							Ext.Msg.alert('提示','删除');
						}
					},
					{
						text:'显示',
						handler:function(){
							Ext.Msg.alert('提示','显示');
						}
					}
				);
				tb.doLayout();
			}
		);
	</script>
</head>
<body>
	<div id = "toolbar">
	</div>
</body>
</html>


<2>简单菜单

Ext.onReady(function()
			{
				//工具条
				var tb = new Ext.Toolbar();
				tb.render('toolbar');
				//菜单
				var fileMenu = new Ext.menu.Menu();
				fileMenu.add({text:'新建'});
				fileMenu.add('-');
				fileMenu.add({text:'打开'});
				fileMenu.add('-');
				fileMenu.add({text:'保存'});
				fileMenu.add('-');
				fileMenu.add({text:'关闭'});
				//为工具条添加按钮
				tb.add(
					{
						text:'文件',
						menu:fileMenu
					}
				);
				tb.doLayout();
			}
		);

另一种写法：

Ext.onReady(function(){
			// 创建工具条
			var tb = new Ext.Toolbar();
			tb.render('toolbar');

			var menu1 = new Ext.menu.Menu({
				items: [
					{text: '新建'},
					{text: '打开'},
					{text: '关闭'}
				]
			});

			var menu2 = new Ext.menu.Menu({
				items: [
					{text: '复制'},
					{text: '剪切'},
					{text: '撤销'}
				]
			});

			var menu3 = new Ext.menu.Menu({
				items: [
					{text: 'HTML'},
					{text: 'Java'},
					{text: 'c++'}
				]
			});

			// 为工具条添加4个按钮
			tb.add(
				{
					text: '文件',
					menu: menu1
				},
				{
					text: '编辑',
					menu: menu2
				},
				{
					text: '语言',
					menu: menu3
				}
			);
			tb.doLayout();
		});

<3>多级菜单

Ext.onReady(function(){
			// 创建工具条
			var tb = new Ext.Toolbar();
			tb.render('toolbar');
			
			var menuHistory = new Ext.menu.Menu(
				{
					items:[
						{text:'今天'},
						{text:'昨天'},
						{text:'一周'},
						{text:'一月'},
					]
				}
			);
			
			var menu1 = new Ext.menu.Menu({
				items: [
					{text: '新建'},
					{text: '打开'},
					{text:'历史',menu:menuHistory},//嵌套子菜单
					{text: '关闭'}
				]
			});

			var menu2 = new Ext.menu.Menu({
				items: [
					{text: '复制'},
					{text: '剪切'},
					{text: '撤销'}
				]
			});

			var menu3 = new Ext.menu.Menu({
				items: [
					{text: 'HTML'},
					{text: 'Java'},
					{text: 'c++'}
				]
			});
			
			
			// 为工具条添加4个按钮
			tb.add(
				{
					text: '文件',
					menu: menu1
				},
				{
					text: '编辑',
					menu: menu2
				},
				{
					text: '语言',
					menu: menu3
				}
			);
			tb.doLayout();
		});


<4>多选菜单和单选菜单

Ext.onReady(function(){
			// 创建工具条
			var tb = new Ext.Toolbar();
			tb.render('toolbar');
			var checkItem1 = new Ext.menu.CheckItem(
				{
					text:'粗体',
					checked:'true',
					checkHandler:function(item,checked){
						Ext.Msg.alert('多选', (checked ? '选中' : '取消') + '粗体');
					}
				}
			);
			var checkItem2 = new Ext.menu.CheckItem(
				{
					text:'斜体',
					checkHandler:function(item,checked){
						Ext.Msg.alert('多选', (checked ? '选中' : '取消') + '斜体');
					}
				}
			);
			//字形菜单
			var menu1 = new Ext.menu.Menu(
				{
					items:[
						checkItem1,
						checkItem2
					]
				}
			);
			
			//字体菜单
			
			var radioItem1 = new Ext.menu.CheckItem(
				{
					text:'宋体',
					group:'font',
					checked:'true',
					checkHandler:function(item,checked){
						Ext.Msg.alert('多选', (checked ? '选中' : '取消') + '宋体');
					}
				}
			);
			var radioItem2 = new Ext.menu.CheckItem(
				{
					text:'楷体',
					group:'font',
					checkHandler:function(item,checked){
						Ext.Msg.alert('多选', (checked ? '选中' : '取消') + '楷体');
					}
				}
			);
			var radioItem3 = new Ext.menu.CheckItem(
				{
					text:'黑体',
					group:'font',
					checkHandler:function(item,checked){
						Ext.Msg.alert('多选', (checked ? '选中' : '取消') + '黑体');
					}
				}
			);
			var menu2 = new Ext.menu.Menu(
				{
					items:[
						radioItem1,
						radioItem2,
						radioItem3
					]
				}
			);
			// 为工具条添加4个按钮
			tb.add(
				{
					text: '字形',
					menu: menu1
				},
				{
					text: '字体',
					menu: menu2
				}
			);
			tb.doLayout();
		});



<5>Tab标签


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
        <title>TabPanel</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
        <script type="text/javascript">
			  
			Ext.onReady(function(){   
				var i = 4 ;   
				//注意:每个Tab标签只渲染一次   
				var tabs = new Ext.TabPanel({   
					renderTo: Ext.getBody(),//绑定在body标签上   
					activeTab: 0,//初始显示第几个Tab页   
					deferredRender: false,//是否在显示每个标签的时候再渲染标签中的内容.默认true   
					tabPosition: 'top',//表示TabPanel头显示的位置,只有两个值top和bottom.默认是top.   
					enableTabScroll: true,//当Tab标签过多时,出现滚动条 
					items: [//Tab的个数 
					{  
						title: '管理学科',   
						html: '管理学科面板',   
						listeners: {render:function(){//为每个Tab标签添加监听器.当标签渲染时触发   
							Ext.Msg.alert("管理学科","渲染管理学科面板成功") ;   
						}}   
					},{   
						title: '管理年级',   
						html: '管理年级面板'     
					},{   
						title: '管理班级',   
						html: '管理班级面板',   
						closable: true   //可以关闭  
					},{   
						title: '管理保障类型',   
						html: '管理保障类型面板',    
						closable: true   //可以关闭  
					}],  
					//添加一个底部工具栏,并且在该工具栏上添加两个按钮  
					bbar:[
					{ 
						text:'添加标签',  
						//添按钮被点击时触发这个匿名函数(注意:该属性在button中能查到). 
						handler:function(){ 
							
							var id = i ;   
							//添加一个Tab标签
							tabs.add({   
								id: id,   
								title:'Tab '+i,   
								closable: true  
							}) ;   
							i=i+1;   
							tabs.setActiveTab(id) ;//当id为"id"的Tab标签显示(变为活动标签).    
						}
					},{   
						text:'删除标签',   
						handler: function(){   
							//获得当前活动标签的引用  
							var t = tabs.getActiveTab(); 
							if(t.closable){   
								tabs.remove(t);//删除标签   
							}else{   
								Ext.Msg.alert("提示","该标签不能关闭") ;   
							}   
						}   
					}]   
				});   
				   
				//把TabPanel组件充满整个body容器.   
				new Ext.Viewport({   
					layout: 'fit',   
					items: tabs   
				});   
			});  

        </script>
    </head>
    <body>
        <script type="text/javascript" src="../shared/examples.js"></script>
    </body>
</html>


sjf0115
关注
专栏目录
ExtJS border布局之小案例
zhaohuanzh的博客
01-23 307
前言： layout:‘border’。该布局包含多个字面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，分别是east,south, west, north, center,加入到容器中的字面板需要指定region配置这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置，并且该布局还内建了对面板分割栏的支持。 一．实现界面： 二．实现思路： １－首先确定整体panel为Viewport,layout:"border"(东南西北中　五个区域) ２
calendar控件使用 extjs_ExtJS4.1常见问题及解决方案总结——小奎持续更新
weixin_39591386的博客
01-26 274
Extjs是怎样的技术？它的主要功能是什么？Extjs是一种用于开发富客户端Web应用程序的javascript技术，它不需要为客户端安装任何插件就可以实现丰富多彩的界面效果，是进行富客户端开发的理想选择之一。Extjs的主要功能包括：对标准信息提示框的扩展、对标准表单组件的扩展、支持面板及各种布局方式、提供了大量的工具类和工具方法、提供了增强的事件机制、提供了对Ajax功能的支持、具有结构完整的...
制作多级滑动tab菜单
03-01
NULL 博文链接：https://niunan.iteye.com/blog/278962
EXTJs工具条 菜单 Tab标签
sdfsdfytre的博客
11-18 300
EXTJs工具条 菜单 Tab标签
22.Extjs Panel中显示多行工具栏(tbar)
weixin_33935505的博客
09-21 231
转自：http://blog.sina.com.cn/s/blog_454fbf740100t0xj.html 在应用程序的制作中，我们经常性的会用到工具栏，在Extjs中Panel中提供了tbar和bbar两个内置的工具栏，极大的方便了大家的使用，但是在创建多行工具栏的时候，就会有一些问题产生了，不能正常的显示已经设计好的页面。下面通过对Panel的render事件的监听，在它被渲染的时候添加...
ExtTabMenu 控件
weixin_33725807的博客
07-16 80
由于项目的需要，开发了一个称之为TabMenu的控件，原理比较简单，主要使用到了ExtJS的TapPanel，Toolbar，Menu，特点是容易使用，并且数据源采用ASP.NET的SiteMap文件。 简单的介绍一下我的做法： 1. 先创建一个TabPanel， 2. 然后再添加相应的TabItem，每个TabItem都有一个对应的工具栏， 3. 根据需要在每个工具栏上添加按钮和菜单...
ExtJs 树形菜单 Tab标签页容器展现内容
andy_2的专栏
12-21 212
项目中用到了树形菜单，但看代码后，发现有些属性怪怪的，有和没有，页面显示的结果是一样的，为了搞清楚如果弄树形菜单，Ricki自己依样画葫芦，仿造了一个，过程中确实学到不少，所以说，看还不如动手更能掌握，代码如下： [code="java"]Ext.onReady(function(){ Ext.QuickTips.init(); var tabPanel = new E...
ExtJs 4.2
tumi
07-25 429
环境搭建 Ext下载， （需要注册）使用版本为4.2.0，可使用现有项目已下载文件。 Sencha Cmd下载，根据系统下载，可能依赖ruby(版本193)，ruby下载,用于编译的sass文件。 构建项目 使用sencha cmd 生成Ext应用 ,运行构建应用   sencha -sdk /path/to/sdk generate app M...
EXT WebUi标签库使用说明
05-03
- **gridWithPagingTool**：分页网格，包含分页工具条。 - **propertyEditor**：属性编辑器，用于编辑属性值。 - **propertyData**：属性数据，存储属性信息。 - **propertyEditors**：属性编辑器集合，管理多个...
ExtJs知识点概述
qq_44935705的博客
04-20 2519
ExtJs知识点概述
关于extjs中动态添加TabPanel的tab项并以iframe显示的整理(转)
weixin_34418883的博客
09-10 112
出处:http://blog.163.com/baihongtao_618/blog/static/1423479702012392948830/  近来的项目中用到了Extjs 的TabPanel,这也是Extjs最基本，最常用的组件了 网上或者书上的例子里大都是把tab项渲染到一个div中， 这对于在每个Tab页里加载一个页面的情况就不适合了  用ifame加载不同的页面应该是最合适的...
ExtJs菜单工具栏综合实例
魔术猿-Vezn
12-19 521
Ext.onReady(function () { var toolbar = new Ext.toolbar.Toolbar({ renderTo: 'toolbar', width: 300 }); var filemenu = new Ext.menu.Menu({ shadow: 'frame',
ext中使用iframe的tabs页
wmqdn的专栏
09-18 737
转自：http://www.blogjava.net/wangbing/archive/2009/06/16/282715.html DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> html> head>     meta http-equiv="Content
ExtJS 5.1 - tabpanel setActiveTab: Uncaught TypeError: c.isFocusable is not a function
weixin_30835923的博客
01-12 166
Description 在 ExtJS 5.1 中，使用 tabpanel，用setActiveTab 来指定激活哪个 tab 的时候抱错： 　　Uncaught TypeError: c.isFocusable is not a function Caused By 这是 ExtJS 5.1 的一个 open issue。 Solution 加上如下代码 1 Ext.def...
Extjs学习笔记之四——工具栏和菜单
weixin_30462049的博客
01-06 92
本文介绍在桌面程序开发中很常用也很简单的工具栏和菜单，但是在通常的web开发中，要实现好工具栏和菜单并非易事，然而extjs使我们能够用类似桌面程序开发的方法来开发web的工具栏和菜单。 ToolBar的使用很简单，关键是向ToolBar上面添加内容，默认地ToolBar添加的是Button，不过实际上可以向Toolbar添加任意的组件。下面是一个例子： <script type="te...
ExtJS5.1学习笔记8——tab控件的使用
大前端程序猿
05-07 1077
tab控件可以在多个页面间切换，如下图所示： 下面就是使用Ext实现tab控件的代码： Ext.onReady(function(){ var tabPanel = Ext.create('Ext.tab.Panel', { frame: true, renderTo: 'form', width
Ext.plugins.TDGi.tabScrollerMenu插件的使用
看看我都干了些啥！
03-10 260
Ext.plugins.TDGi.tabScrollerMenu插件的使用 效果: 调用代码: Ext.onReady(function() { Ext.QuickTips.init(); var scrollerMenu = new Ext.plugins.TDGi.tabScrollerMenu({  maxText  : 15,  pageSize : 5 }); new Ext.Wind...
Extjs5 Tab标签右键单击菜单
yelong0201的专栏
02-10 998
Extjs5 Tab标签右键单击菜单在使用Extjs的tabclosemenu时，发现需要双击右键才能弹出标签操作菜单，不符合我们的使用习惯，但是又没有找到相关的配置来实现单击右键显示菜单，我的解决办法是重写tabclosemenu的onAfterLayout方法，添加鼠标单击监听事件，在右键单击时调用tabclosemenu中的onContextMenu方法： 代码:{ ptype
Extjs Tabpanel的使用
Alex的博客
05-24 2022
本文导读：TabPanel继承于Ext.Panel，Ext.TabPanel就是有选项卡的Panel，可以在选项卡之间切换。它是多个不同内容的容器，任意组件直接使用add()函数便可添加到Ext.TabPanel中。通过activeTab指定激活哪个面板，索引从0开始。下面介绍extjs中tabPanel的用法 一、tabPanel主要配置项 activeTab 初始激活的tab，索引或者...
ExtJS 菜单与工具条实现详解
“EXTJS总结资源文件，包含了菜单和工具条的实现示例。” EXTJS是一个流行的JavaScript库，用于构建富客户端Web应用程序。该资源文件主要总结了EXTJS中菜单（Menu）和工具条（Toolbar）的创建和使用方法。下面将...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值