<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>
扫一扫
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
