ExtJs之工具栏及菜单栏
先培养一下大概的感觉吧。
基本按书上都弄出来了。
<!DOCTYPE html>
<html>
<head>
<title>ExtJs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="ExtJs/bootstrap.js"></script>
<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var toolbar = new Ext.toolbar.Toolbar({
renderTo: 'toolbar',
width: 800
});
var infoMenu = new Ext.menu.Menu({
ignoreParentClicks: true,
plain: true,
items: [{
text: 'personal info',
menu: new Ext.menu.Menu({
ignoreParentClicks: true,
items: [{
text: 'basic info',
menu: new Ext.menu.Menu({
items: [
{text: 'height', handler: onMenuItem},
{text: 'weight', handler: onMenuItem}
]
})
}]
})
},
{text: 'company info', handler: onMenuItem}
]
});
var fileMenu = new Ext.menu.Menu({
shadow: 'frame',
allowOtherMenus: true,
items: [
new Ext.menu.Item({
text: 'new',
handler: onMenuItem
}),
new Ext.menu.Item({
text: 'open',
handler: onMenuItem
}),
new Ext.menu.Item({
text: 'close',
handler: onMenuItem
}),
new Ext.menu.Item({
xtype: 'textfield',
hideLabel: true,
width: 100
}),
new Ext.menu.Item({
text: 'select color',
menu: new Ext.menu.ColorPicker()
}),
new Ext.menu.Item({
xtype: 'textfield',
menu: new Ext.menu.DatePicker()
}),
{
xtype: 'buttongroup',
colums: 3,
title: 'buttons',
items: [{
text: 'user manage',
scale: 'large',
colspan: 3,
width: 170,
iconCls: 'userManagerIcon',
iconAlign: 'top'
},
{text: 'newnew', iconCls: 'newIcon'
}]
}
]
});
var themeMenu = new Ext.menu.Menu({
items: [{
text: 'theme color',
menu: new Ext.menu.Menu({
items: [{
text: 'red theme',
checked: true,
group: 'theme',
checkHander: onItemCheck
}, {
text: 'blue theme',
checked: false,
group: 'theme',
checkHander: onItemCheck
}, {
text: 'black theme',
checked: false,
group: 'theme',
checkHander: onItemCheck
}]
})
}, {
text: 'isUse',
checked: false
}]
});
var editMenu = new Ext.menu.Menu({
shadow: 'drop',
allowOtherMenus: true,
items: [
{text: 'copy', handler: onMenuItem},
{text: 'paste', handler: onMenuItem},
{text: 'cut', handler: onMenuItem}
]
});
toolbar.add([
{
text: 'file',
//handler: onButtonClick,
//iconCls: 'newIcon'
menu: fileMenu
},
{
text: 'edit',
//handler: onButtonClick,
//iconCls: 'openIcon'
menu: editMenu
},
{
text: 'save',
handler: onButtonClick,
iconCls: 'saveIcon'
},
{
text: 'config',
menu: infoMenu
},
{
text: 'style select',
menu: themeMenu
},
'-',
{
xtype: 'textfield',
hideLabel: true,
width: 150
},
'->',
'<a href=#>url</a>',
{
xtype: 'tbspacer',
width: 500
},
'static text'
]);
function onMenuItem(item) {
alert(item.text);
};
function onButtonClick(btn) {
alert(btn.text);
};
Ext.get('enableBtn').on('click', function(){
toolbar.enable();
});
Ext.get('disabledleBtn').on('click', function(){
toolbar.disable();
});
function onItemCheck(item) {
alert(item.text);
};
});
</script>
</head>
<body>
<div id='toolbar'></div>
<div >
<button id="enableBtn">enableBtn<button>
<button id="disabledleBtn">disabledleBtn<button>
</div>
</body>
</html>
ExtJs之工具栏及菜单栏的更多相关文章
- C# winfrom容器布局与工具栏&&右键菜单栏&&隐藏显示小图标的的简单事件
前两天的时候学习了winfrom,简单地说就是各种布局,然后给按钮,textbox等各种控件添加各种事件的操作,经过前天一晚上,昨天一天的练习操作的还算熟练,但是对构造函数传值还是不是很了解,由于各种 ...
- wxpython 创建工具栏和菜单栏
下面看一下关于创建工具栏,状态栏和菜单的方法,看下面一个例子: import wx class ToolBarFrame(wx.Frame): def __init__(self,parent,id) ...
- qt 工具栏和菜单栏
在前面的QMainWindow的基础之上,我们开始着手建造我们的应用程序.虽然现在已经有一个框架,但是,确切地说我们还一行代码没有写呢!下面的工作就不那么简单了!在这一节里面,我们要为我们的框架添加菜 ...
- Virtual Box 工具栏（菜单栏）消失的解决方法
异常处理汇总-开发工具 http://www.cnblogs.com/dunitian/p/4522988.html 现在Virtual Box非常牛逼(不排除Oracle又准备像Java SE那样 ...
- Javascript - ExtJs - Toolbar - 工具栏
Toolbar组件 创建工具栏 Toolbar类是一种子组件,它不能独立存在,需要依附在其它组件上面.很多容器组件都具备tbar(顶部工具栏).bbar(底部工具栏)的配置,所以可以像下面那样使用它. ...
- wx工具栏，菜单栏，状态栏
#!/usr/bin/env python # -*- coding: utf- -*- import wx import wx.py.images class ToolbarFrame(wx.Fra ...
- 隐藏gvim中的工具栏和菜单栏
在vim的配置文件.vimrc中添加如下代码: "Toggle Menu and Toolbar set guioptions-=m set guioptions-=T map <si ...
- gvim最简化设置，去掉工具栏和菜单栏
编辑vimrc文件(该文件位于gvim安装目录下),在文件末尾添加以下语句即可 set gfn=Courier_New:h14colorscheme torteset guioptions-=mset ...
- QT学习之菜单栏与工具栏
QT学习之菜单栏与工具栏 目录 简单菜单栏 多级菜单栏 上下菜单栏 工具栏 简单菜单栏 程序示例 from PyQt5.QtWidgets import QApplication, QMainWind ...
随机推荐
- hdu 5166 Missing number
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5166 Missing number Description There is a permutatio ...
- AFNetworking 2.0 使用
AFNetworking 下载地址:https://github.com/AFNetworking/AFNetworking/ AFNetworking 2.0 当Deployment Target ...
- go语言包与包引用
go语言中包(package)与java中的包(package)非常类似,都是组织代码的方式,而且都和磁盘上的目录结构存在对应关系. go语言中,包名一般为go代码所在的目录名,但是与java不同的是 ...
- OC中类的扩展介绍
对OC类的扩展总结如下: 共有4个: 1.子类 subClass 作用:可以使用类的继承来增添父类的变量和方法. 写法:在.h文件中 @interface Student : Person 2.分类 ...
- 关于Swift中实现Lazy initialize的方式
在oc中我们通过 -(CardMatchingGame *)game { if(!_game) _game=[[CardMatchingGame alloc] initWithCardCount:[s ...
- OC-通讯录
要求描述:用OC语言完成简易通讯录(实现增删改查)功能.(注:使用MRC) 1.创建AddressBook类. 1)使用字典作为容器,字典的Key值为分组名(姓名首字母),value值为数组,数组中存 ...
- 团队项目（NABC分析）
我们团队开发的是<校园导航>软件 (1)N(Need需求) 我们的团队主要考虑到我们学校没有自己的校园导航,有时会给同学及参观人员带来不便,又看到好多学校都有自己的导航,所以就从这个需求方 ...
- 主元分析PCA理论分析及应用
首先,必须说明的是,这篇文章是完完全全复制百度文库当中的一篇文章.本人之前对PCA比较好奇,在看到这篇文章之后发现其对PCA的描述非常详细,因此迫不及待要跟大家分享一下,希望同样对PCA比较困惑的朋友 ...
- C#委托详解（3）：委托的实现方式大全（续）
接上篇(C#委托详解(2):实现方式大全),本篇继续介绍委托的实现方式. 4.Action<T>和Func<T>委托 使用委托时,除了为每个参数和返回类型定义一个新委托类型之外 ...
- android webview开启html5支持
最近做的一个小项目需要用到webview.虽然只是一个简单的网页,但是由于以前用的都只是显示本地文件,没有显示网页文件.现在需要显示网页文件,发现许多网站的webapp做的挺不错的,无论是显示还是用户 ...