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 ...
随机推荐
- CSS3中新出现的技术
CSS3中新出现的技术 CSS媒体查询 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定 ...
- Android开发遇到的异常及解决办法
Android开发遇到的错误及解决方法1. Unable to resolve target 'android-7' 解决方案: 修改工程目录下的default.properties文件里的内容tar ...
- orcle 查询数据集对变量赋值函数
create or replace function test(Name in varchar2 ) return varchar2 is V_CONTAINERDESC CHAR ); BEGIN ...
- golang构造函数与转换函数
golang的每种类型, 凡是用type定义的类型, 其类型名既是其构造函数,也是其转换函数. 其中,构造函数后眼{...}, 转换函数后跟(...)
- Object-c 语法 - NSObject常用方法和反射
NSObject常用方法 - (BOOL)isKindOfClass:(Class)aClass //判断是否为aClass或者aClass的子类的实例,aClass可以通过[类名 class]获取 ...
- Android编程: ViewPager和Dialogs组件
学习内容:ViewPager和Dialogs组件 ====ViewPager组件==== 它的作用主要是支持屏幕左右滑动切换列表元素,使用方式如下: 1.首先定义ID号信息,创建res/values/ ...
- Chr()和chrb()的含义(转)
http://blog.csdn.net/cunxiyuan108/article/details/5989701 Chr(charcode) 必要的 charcode 参数是一个用来识别某字符的 L ...
- C++设计模式系列
该系列主要总结了使用C++来实现各种设计模式,并结合实际的案例来分析如何使用,以及在什么场合下使用设计模式.以下是该系列所有文章的链接.希望对大家有帮助. C++设计模式——简单工厂模式 C++设计模 ...
- Spring事务总结
事务是什么? 事务就是用来解决类似问题,事务是一系列的动作,它们综合在一起才是一个完整的工作单元,这些动作必须全部完成,如果有一个失败,那么事务就会回滚到最开始的状态,仿佛什么都没有发生过.在企业级应 ...
- Java 7 中 NIO.2 的使用——第四节 文件和目录
Files类提供了很多方法用于检查在于你真正实际去操作一个文件或目录.这些方法强烈推荐,也非常有用,也能避免很多异常的发生.例如,一个很好的习惯就是在你试着移动一个文件从一个地方到另一个地方的时候,先 ...