Ext.onReady(function(){
var toolbar=new Ext.toolbar.Toolbar({
renderTo:'toolbar',
width:600
});
toolbar.add([
{
text:'新建',
handler:onButtonClick
},
{
text:'打开'
},
{
text:'编辑'
},
{
text:'保存'
},
'-',
{
xtype:'textfield',
hideLabel:true,
width:150
},
'->',
'<a href=#>超链接</a>',
{
xtype:'tbspacer',
width:50
},
'静态文本'
]);
function onButtonClick(btn){
Ext.MessageBox.alert('结果','您点击的是:'+btn.text);
}
var enableTool=new Ext.Button({
text:'启用工具栏',
renderTo:'enabletool',
handler:function(){
toolbar.enable();
}
});
var disableTool=new Ext.Button({
text:'禁用工具栏',
renderTo:'disabletool',
handler:function(){
toolbar.disable();
}
});
});
Ext.onReady(function(){
var toolbar=new Ext.Toolbar({
renderTo:'toolbar',
width:300
});
var fileMenu=new Ext.menu.Menu({
shadow:'frame',
allowOtherMenus:true,
items:[
new Ext.menu.Item({
text:'新建',
handler:onMenuItem
}),
{
text:'打开',
handler:onMenuItem
},
{
text:'关闭',
handler:onMenuItem
}
]
});
var editMenu=new Ext.menu.Menu({
shadow:'drop',
allowOtherMenus:true,
items:[{
text:'复制',
handler:onMenuItem
},{
text:'粘贴',
handler:onMenuItem
},{
text:'剪切',
handler:onMenuItem
}
]
});
toolbar.add({text:'文件',menu:fileMenu},
{text:'编辑',menu:editMenu});
function onMenuItem(item){
Ext.MessageBox.alert('结果','您选择了'+item.text);
};
});
Ext.onReady(function(){
var Toolbar=new Ext.Toolbar({
renderTo:'toolbar',
width:300
});
var infoMenu=new Ext.menu.Menu({ //一级菜单
ignoreParentClicks:true, //忽略父菜单的单击事件
plain:true,
items:[{
text:'个人信息',
menu:new Ext.menu.Menu({ //二级菜单
ignoreParentClicks:true, //忽略父菜单的单击事件
items:[{
text:'基本信息',
menu:new Ext.menu.Menu({ //三级菜单
items:[{
text:'身高',
handler:onMenuItem
},{
text:'体重',
handler:onMenuItem
}
]
})
}]
})
},{
text:'公司信息'
}]
});
Toolbar.add({
text:'设置',
menu:infoMenu
});
function onMenuItem(item){
Ext.MessageBox.alert('结果','您选择了:'+item.text);
}
});
Ext.onReady(function(){
var Toolbar=new Ext.Toolbar({ //创建工具栏
renderTo:'toolbar',
width:300
});
var fileMenu=new Ext.menu.Menu({ //创建文件菜单
items:[{
xtype:'textfield', //创建表单字段
hideLabel:true,
width:100
},{
text:'颜色选择',
menu:new Ext.menu.ColorPicker()
},{
xtype:'datepicker' //添加日期选择器组件
},{
xtype:'buttongroup', //添加按钮
columns:3,
title:'按钮组',
items:[{
text:'用户管理',
scale:'large',
colspan:3,
width:170,
iconAlign:'top'
},{
text:'新建',
},{
text:'打开'
},{
text:'保存'
}]
}]
});
var themeMenu=new Ext.menu.Menu({ //创建主题菜单
items:[{
text:'主题颜色',
menu:new Ext.menu.Menu({
items:[{
text:'红色主题',
checked:true, //初始为选中状态
group:'theme', //为单选想进行分组
checkHandler:onItemCheck
},{
text:'蓝色主题',
checked:false,
group:'theme',
checkHandler:onItemCheck
},{
text:'黑色主题',
checked:false,
group:'theme',
checkHandler:onItemCheck
}]
})
},{
text:'是否启用',
checked:false
}]
});
Toolbar.add( //将菜单加入工具栏
{
text:'文件',menu:fileMenu
},{
text:'风格选择',menu:themeMenu
}
);
function onItemCheck(item){ //菜单项的回调方法
Ext.MessageBox.alert('结果',item.text); //取得菜单项的text属性
}
});
分享到:
相关推荐
ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(三)---VBox的使 ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid...
个人《Extjs4学习指南》电子文档过程中整理的Myeclipse工程,有以下修改:1、数据库改为Mysql;2、前四章后台改为servlet;3、最后一章后台改为SSH架构。 使用说明:1、BeginExtjs4目录为前四章的例子代码;2、SSH_...
21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) ...
ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---...
Extjs4可用的学习资料少之又少,本文内容大部分为网络整理、 方便学习者使用,如有出入以extjs4api文档为准。 1、1Extjs初步 2、Extjs4布局详解 3、Extjs4文档阅读 4、示例 5、员工管理系统
ExtJS4 2学习 21 动态菜单与表格数据展示操作总结
2. ExtJs2.0学习系列(2)--Ext.Panel 3. ExtJs2.0学习系列(3)--Ext.Window 4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之...
Extjs4学习指南21集无代码 extjs网上商城项目 ExtJs视频教程 google调试extjs视频 从基础到实战ExtJs全程精通 传智蔡世友ExtJs视频教程 浪曦ExtJs,永久有效,所有视频解压密码相同,在文档中有写,如有问题请及时...
21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) ...
ExtJs 各种学习资料 [深入浅出Ext.JS].徐会生等.扫描版.pdf EXT 中文手册.pdf Ext.JS.4.First.Look.pdf ext4笔记.doc extjs4.0.doc Extjs4.0学习指南(中文).docx ExtJsBook.chm extjs核心api详解.doc ExtJS实用开发...
ExtJS Web应用程序开发指南(第2版)(针对Ext JS 4.0更新)
通过学习本书,读者将感受到ExtJS的无穷魅力和Ajax技术带来的完美体验。 本书适合有一定CSS和HTML基础的开发者阅读。 目录: 第1章 EXT概述 第2章 EXT框架基础 第3章 表格控件 第4章 表单与输入控件 第5章 树形结构 ...
不多说,如果你需要学习Extjs或者是不懂Extjs,这门视频能对你有很大的帮助,文件过大,上传乃是下载链接,下面上目录: 1、ExtJs初识及其环境搭建 2、开始ExtJs梦想之旅# n8 }: ~+ d4 X+ V1 c 3、ExtJS工具栏、菜单...
1.ExtJS是一个用javascript、CSS和HTML等技术实现的主要用于创建RIA即富客户端,且与后台技术无关的前端Ajax框架。 2.提供了非常多的丰富、功能强大的组件 3.跨浏览器支持:IE、Chrome...4.ExtJS是一个MVC模式的框架
第1章 ExtJS入门指南 第2章 核心概念 第3章 基础组件 第4章 数据包 第5章 表格组件 第6章 高级组件 第7章 图表 第8章 主题和响应式设计
Extjs4开发笔记(二)——框架的搭建 http://www.mhzg.net/a/20116/201162913210280.html 目前仅实现这两步,我在参照原作者的代码,照着在我的机器上敲了一边,并调试成功 解压至web发布的根目录即可 本代码适用于...
通过学习本书,读者将感受到ExtJS的无穷魅力和Ajax技术带来的完美体验。 本书适合有一定CSS和HTML基础的开发者阅读。 目录: 第1章 EXT概述 第2章 EXT框架基础 第3章 表格控件 第4章 表单与输入控件 第5章 树形结构 ...
该源码 图书管理系统功能实现不是重点,重点是演示对Extjs二次封装使用,进行深入学习。 比较适合对Extjs的学习和进阶以及商业应用,有需要的朋友们不要错过啊。模式:WebForm (B/S,需要IIS支持)框架:FrameWork ...
一本学习extjs4功能的好书,内容详细,案例丰富,值得一看