ExtJS基础第四讲学习

于 2018-11-10 14:34:58 发布
阅读量239 收藏
点赞数
分类专栏： EXTJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozhengN/article/details/83929352
版权

第四讲：工具栏和菜单栏

一、头部工具栏。

准备工作，创建一个Panel，代码如下。

Ext.onReady(

function() {

var mypanel = new Ext.Panel({

renderTo:hello,

width:300,

height:300,

title:"Panel",

html:"测试Panel",

floating:true,

x:300,

y:100

});

}

);

添加头部工具栏和提示信息，代码如下。

Ext.onReady(

function() {

//初始化提示信息

Ext.QuickTips.init();

 

var mypanel = new Ext.Panel({

renderTo:hello,

width:300,

height:300,

title:"Panel",

html:"测试Panel",

floating:true,

x:300,

y:100,

//工具栏

tools:[

{id:"save",qtip:"保存"},

{id:"help",qtip:"帮助"},

{id:"close",qtip:"关闭"}

]

});

}

);

 

 

 

 

二、工具栏组件Toolbar

示例二：添加工具栏。

Ext.onReady(

function() {

//初始化提示信息

Ext.QuickTips.init();

 

var mypanel = new Ext.Panel({

renderTo:hello,

width:300,

height:300,

title:"Panel",

html:"测试Panel",

floating:true,

x:300,

y:100,

//头部工具栏

tools:[

{id:"save",qtip:"保存"},

{id:"help",qtip:"帮助"},

{id:"close",qtip:"关闭"}

],

//工具栏

tbar:new Ext.Toolbar({

width:300,

height:20

})

});

}

);

 

常用工具。

Ext.Toolbar.Fill()  填充，可用来做对齐

Ext.Toolbar.TextItem() 文本

Ext.Toolbar.Spacer() 空格

Ext.Toolbar.Separator() 分隔线

Ext.Toolbar.Button()按钮

 

 

示例三：带工具的工具栏。

Ext.onReady(

function() {

//初始化提示信息

Ext.QuickTips.init();

 

var mypanel = new Ext.Panel({

renderTo:hello,

width:300,

height:300,

title:"Panel",

html:"测试Panel",

floating:true,

x:300,

y:100,

//头部工具栏

tools:[

{id:"save",qtip:"保存"},

{id:"help",qtip:"帮助"},

{id:"close",qtip:"关闭"}

],

//工具栏

tbar:new Ext.Toolbar({

width:300,

height:20

})

});

 

mypanel.getTopToolbar().add(new Ext.Toolbar.TextItem("工具栏"));

mypanel.getTopToolbar().add(new Ext.Toolbar.Fill());

mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"保存"}));

mypanel.getTopToolbar().add(new Ext.Toolbar.Separator());

mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"另存为"}));

}

);

 

Button中有一个menu属性，用来设置该按钮的下拉菜单。

示例四：

Ext.onReady(

function() {

//初始化提示信息

Ext.QuickTips.init();

 

var mypanel = new Ext.Panel({

renderTo:hello,

width:300,

height:300,

title:"Panel",

html:"测试Panel",

floating:true,

x:300,

y:100,

//头部工具栏

tools:[

{id:"save",qtip:"保存"},

{id:"help",qtip:"帮助"},

{id:"close",qtip:"关闭"}

],

//工具栏

tbar:new Ext.Toolbar({

width:300,

height:20

})

});

 

var mymenu = new Ext.menu.Menu({

items:[

{text:"保存"},

{text:"另存为"}

]

});

 

 

mypanel.getTopToolbar().add(new Ext.Toolbar.TextItem("工具栏"));

mypanel.getTopToolbar().add(new Ext.Toolbar.Fill());

mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"保存"}));

mypanel.getTopToolbar().add(new Ext.Toolbar.Separator());

mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"另存为"}));

mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"文件",menu:mymenu}));

}

);

 

 

Ext.Toolbar.SplitButton(),分隔按钮，使用该按钮作为下拉菜单按钮。

 

 

三、菜单栏。

示例五：响应事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

  <head>

    <title>MenuBar</title>

    <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="../Ext/ext-all-debug.js"></script>

    <script type="text/javascript" src="MenuBar.js"></script>

    <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"></link>

  </head>

  <body>

  <div id="showMenuBar">显示菜单</div>

  </body>

</html>

 

 

Ext.onReady(

function() {

Ext.get("showMenuBar").on("click",function(){

alert("fdsf");

}

);

}

);

 

示例六：显示菜单

Ext.onReady(

function() {

//菜单

var myMenu = new Ext.menu.Menu();

//添加文件菜单

myMenu.add({

text:"文件",

menu:[

{text:"打开"},//菜单选项

{text:"保存"}

]

});

//添加编辑菜单

myMenu.add({

text:"编辑",

menu:[

{text:"复制"},

{text:"粘贴"},

{text:"剪切"}

]

});

 

var divShow = Ext.get("showMenuBar");

divShow.on("click",function(){

myMenu.show(divShow);

}

);

}

);

 

文本菜单项：仅仅显示文本，没有其他作用。

Ext.onReady(

function() {

//菜单栏

var myMenu = new Ext.menu.Menu();

//文本菜单项

myMenu.add("文本菜单项");

//文本菜单项

myMenu.add(new Ext.menu.TextItem({text:"文本菜单项"}));

 

var divShow = Ext.get("showMenuBar");

divShow.on("click",function(){

myMenu.show(divShow);

}

);

}

);

 

单选、复选菜单项：Ext.menu.CheckItem，

当不设置其group属性时，则为复选菜单项，否则为单选菜单项。

Ext.onReady(

function() {

//菜单栏

var myMenu = new Ext.menu.Menu();

//字体菜单

myMenu.add({

text:"字体大小",

menu:[

new Ext.menu.CheckItem({text:"一号",group:"font"}),

new Ext.menu.CheckItem({text:"二号",group:"font"})

]

});

//字体效果菜单

myMenu.add({

text:"字体效果",

menu:[

new Ext.menu.CheckItem({text:"粗体"}),

new Ext.menu.CheckItem({text:"斜体"})

]

});

 

var divShow = Ext.get("showMenuBar");

divShow.on("click",function(){

myMenu.show(divShow);

}

);

}

);

 

日期选择及颜色选择菜单

Ext.onReady(

function() {

//菜单栏

var myMenu = new Ext.menu.Menu();

//字体菜单

myMenu.add({

text:"字体大小",

menu:[

new Ext.menu.CheckItem({text:"一号",group:"font"}),

new Ext.menu.CheckItem({text:"二号",group:"font"})

]

});

//字体效果菜单

myMenu.add({

text:"字体效果",

menu:[

new Ext.menu.CheckItem({text:"粗体"}),

new Ext.menu.CheckItem({text:"斜体"})

]

});

//其他菜单

myMenu.add({

text:"其他",

menu:[

{text:"时间选择",menu:new Ext.menu.DateMenu()},

{text:"颜色选择",menu:new Ext.menu.ColorMenu()}

]

});

 

var divShow = Ext.get("showMenuBar");

divShow.on("click",function(){

myMenu.show(divShow);

}

);

}

);

 

 

N级菜单

Ext.onReady(

function() {

//菜单栏

var myMenu = new Ext.menu.Menu();

//1级菜单

myMenu.add({

text:"1级菜单",

menu:[{

//2级菜单

text:"2级菜单",

menu:[{

text:"3级菜单",

menu:[{

text:"4级菜单",

menu:[{

text:"5级菜单"

}]

}]

}]

}]

})

 

var divShow = Ext.get("showMenuBar");

divShow.on("click",function(){

myMenu.show(divShow);

}

);

}

);

 

odng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJs6.0之tbar多行显示
飞鸟的轨迹
02-26 1089
创建toolbar toolbarTop = new Ext.toolbar.Toolbar({ // dock: 'top', renderTo: Ext.grid.GridPanel.tbar, items: [addBut, delBut, searchText, searchBut, grid2ExcelBut] }); toolbarBottom =...
extjs两个tbar问题探讨
01-19
版本：extjs3.4 接触过extjs的同志们都知道每个panel都有一个tbar(top bar 上面工具栏) ,bbar(bottom bar 底部工具栏) 大家做查询页面，一般都是啥样子的？ 最基本的是一个table，来显示数据。 再进一步： 添加对数据的操作，比如添加按钮 再进一步： 一般查询都会有查询条件，查询条件可以快速定位。 那对于extjs来说，extjs中封装了很多组件，其中组件的概念很类似于java swing，比如panel，button，component，container等这种东西。 对于上述的查询页面，做java开发，相比一点问题都没有，三个table，或三个d
EXT 方法集锦
coral0212的专栏
11-28 546
EXT 方法集锦 (后续添加中)   1. ext的tbar中加入其他的元素方法 tbar: [ '公司名称：', {xtype:'textfield',width:200,id:'sDepName',name:'sDepName'},{xtype:'tbseparator'}, {text:'搜索',iconCls:'search',ha...
22.Extjs Panel中显示多行工具栏(tbar)
weixin_33935505的博客
09-21 221
转自：http://blog.sina.com.cn/s/blog_454fbf740100t0xj.html 在应用程序的制作中，我们经常性的会用到工具栏，在Extjs中Panel中提供了tbar和bbar两个内置的工具栏，极大的方便了大家的使用，但是在创建多行工具栏的时候，就会有一些问题产生了，不能正常的显示已经设计好的页面。下面通过对Panel的render事件的监听，在它被渲染的时候添加...
extjs两行tbar的问题
qq_29663071的博客
04-01 3189
知道每个panel都有一个tbar(top bar 上面工具栏) ,bbar(bottom bar 底部工具栏)下面为大家介绍下extjs的两个tbar问题，感兴趣的朋友可以参考下 版本：extjs3.4 接触过extjs的同志们都知道每个panel都有一个tbar(top bar 上面工具栏) ,bbar(bottom bar 底部工具栏) 大家做查询页面，一般都是啥样子的
Extjs学习 bbar、tbar靠右，居中显示
jazywoo_在路上
07-17 8535
两边使用'->'  就可以挤到中间了 var courseGrid=Ext.create('Ext.grid.Panel',{       store:infoStore,       width:600,       selType:'checkboxmodel',       multiSelect:true,       viewConfig:{       forceF
extjs 学习笔记（一） 一些基础知识
10-29
相信很多人对使用js进行客户端的编程比较头大，其实现在已经有了很多优秀的js库，可以大大简化js编程的工作量，其中，jquery和extjs就是两款非常优秀的js库。
学习ExtJS（一） 之基础前提
10-29
学习ExtJS前提条件，大家要想学习，需要一些基础知识。
Extjs学习笔记之八 继承和事件基础
10-29
只有有了事件，页面才能真正的“活”起来。Extjs的事件也是经过良好封装的，对于事件的处理都由Ext.uitl.Observable类提供接口。
ExtJS基础学习
05-29
ExtJS学习
Extjs动态设置tbar
qq_29663071的博客
09-19 6098
实现按btn2按钮时,将btn1,btn2去掉,更新为新的tbar ,t var panel = new Ext.Panel({          title:'toolbar-changebar',                    renderTo:Ext.getBody(),          tbar:[{              text:'btn1',     
对panel顶部工具栏的操作
it_libo的专栏
12-17 322
对panel顶部工具栏的操作 panel.getTopToolbar() 得到panel的顶部工具栏对像.返回值是toolbar panel.getTopToolbar() .items 得到panel的顶部工具栏中的项目,如其中的按钮 panel.getTopToolbar() .items.length 得到panel的顶部工具栏中的项目的长度.如按钮的个数 panel...
Ext.Toolbar的分行布局
jayjjb的专栏
08-13 6761
var oneTbar=new Ext.Toolbar({  items:[  {text:'复制'},  {text:'粘贴'}  ] }); var twoTbar=new Ext.Toolbar({   items:[  new Ext.Toolbar.TextItem('工具栏：') //显示文本 ]  }); var threeTbar=new Ext.To
EXT 隐藏TBAR
yangping19830524的专栏
06-10 1301
Ext.getCmp('Tab2').tbar.dom.style.height = '0px';  //隐藏  Ext.getCmp('Tab2').tbar.hide();  Ext.getCmp('Tab2').tbar.dom.style.height = '0px';  //显示  Ext.getCmp('Tab2').tbar.show();  Ext.getCmp('Ta
引用gridPanel 中 tbar 中按钮的问题
cherryqiao的博客
11-11 1516
昨天调试代码，老是获取不到tbar中的按钮，今天正好看到一篇博文，总结一下： 情况一 环境：login窗体             步骤：打开浏览器控制台，输入一下命令，回车             Ext.ComponentQuery.query('button');             出现6个按钮，继续尝试：            Ext.ComponentQue
extjs4 TreePicker默认选中第一个
最新发布
05-13
您可以使用 TreePicker 的 `setValue` 方法来设置默认选中的节点，将节点的值设置为第一个节点的值即可实现默认选中第一个节点的效果。 示例代码： ```javascript var tree = Ext.create('Ext.tree.Panel', { // ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值