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 ...
随机推荐
- 使用checked关键字处理“溢出”错误
在进行算术运算时,可以使用checked关键字有效处理溢出错误,使用checked关键字可能对程序的性能会有一点点的影响,这是一种以牺牲性能换取健康的做法. private void button1_ ...
- hdu 5349 MZL's simple problem
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5349 MZL's simple problem Description A simple proble ...
- WIndows7 多版本
Windows7 安装U盘 删除source\ei.cfg 以后开机安装会提示安装的版本
- ListView与GridView异步加载图片
原理很简单,主要是用到了回调方法,下面是异步加载图片的类 <span style="font-size:16px;">package com.xxx.xxx; impo ...
- windows下查看所有进程以及pid
import ctypes import sys __metaclass__ = type class PROCESSENTRY32(ctypes.Structure): _fields_ = [ ( ...
- Effective Objective-C 2.0之Note.03(属性详解)
用Objective-C等面向对象语言编程时,“对象”(object)就是“基本构造单元”(building block),开发者可以通过对象来存储并传递数据.在对象之间传递数据并执行任务的过程就叫做 ...
- [备忘]Asp.net MVC 将服务端Model传递的对象转为客户端javascript对象
<script type="text/javascript"> var jsObject = @Html.Raw(Json.Encode(Model.Objects)) ...
- verilog中级别到底是什么？级别的分类是什么？？？
1.级别到底是什么? 答:所谓的系统级,算法级,RTL级,门级,开关级,就是在不同的层次上来描述某个电路模块.当然行为级和结构级就是在行为上和结构上来描述电路模块. 模块可以用不同级别语言来描述,当然 ...
- 认识Linux
Linux的内核版本 1.如何查看Linux的内核版本 # uname -r -.el6.i686 2. 2.6.32-358的含义 主版本.次版本.释出版本-修改版本 3.主次版本编号规则 ...
- linux 负载 待读
相关文章: 理解 Linux 的处理器负载均值(翻译)