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 ...
随机推荐
- 如何在ios 系统 中抓包？？
为了实现在ios系统上抓包,如下步骤: 1,设备越狱 2,在cydia-软件源-设置中改为开发者,否则有些deb搜索不到 安装如下软件:OpenSSH,OpenSSL,wget (下载工具) Apti ...
- Swift Tips - Array 类型
在开发中,数组这个概念我们应该很熟悉了,Objective-C 中为我们提供了 NSArray 作为数组的实现.大家应该对很熟悉了.而在 Swift 中,为我们提供了它自己对于数组的实现,也是这里我们 ...
- DHCP Server软件使用教程
DHCP Server软件使用教程 前提网络环境配置 电脑连接上wifi 网络和共享中心中更改适配器,共享无线网卡给以太网网卡 手动设置以太网网卡ipv4地址为192.168.1.1,子网掩码为255 ...
- GCC编译默认的头文件搜索路径
对于c语言来说: gcc -xc -E -v - 截图: 对于c++来说: gcc -xc++ -E -v - 截图: gcc的arg和opt解释: 后面一干啥作用暂时不知道
- VS2013中如何更改主题颜色(深色)和恢复默认的窗口布局
1.通常情况下,我们会根据个人爱好更改VS2013的主题颜色,一开始我喜欢白色,后来我偏爱深色. 依次选择:工具->选项->常规->主题->深色->确定,ok 2.我们在 ...
- 第三次作业，github的基本操作
chengjiangtao@pc MINGW32 ~$ git config --global user.name "chengjiangtao" chengjiangtao@pc ...
- 卷积神经网络CNN介绍：结构框架，源码理解【转】
1. 卷积神经网络结构 卷积神经网络是一个多层的神经网络,每层都是一个变换(映射),常用卷积convention变换和pooling池化变换,每种变换都是对输入数据的一种处理,是输入特征的另一种特征表 ...
- android应用程序的安装方式与原理
android应用程序的安装方式与原理 四种安装方式: 1.系统应用安装――开机时完成,没有安装界面 2.网络下载应用安装――通过market应用完成,没有安装界面 3.ADB工具安装――没有安装界面 ...
- android 实现2张图片层叠效果
如图: 代码: <RelativeLayout android:layout_width="match_parent" android:layout_height=" ...
- 将通过find命令找到的文件拷贝到一个新的目录中
将通过find命令找到的文件拷贝到一个新的目录中 有这样的一个需求,需要将一部分符合条件的文件从一个目录拷贝到另一个目录中,我通过find命令从源目录查找到符合条件的文件然后使用cp命令拷贝到目标目录 ...