ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
2013-10-11 16:05
393 查看
本篇讲解菜单、绘图、还有大小变更控件。菜单控件可以附加到各种其他控件中,比如按钮、工具栏等,甚至可以直接通过通过右键打开(模拟右键菜单);ext对绘图的支持可以让我们通过js来绘图;大小变更控件可以让各种html元素获取可变更大小的能力。下面我们一一详细介绍。
[Js]
[Js]
下面看看展示效果:
[Js]
单击右键,效果如下:
[Js]
在ListView中单击右键,效果如下:
通过上面的代码,我们可以展示出图片式文本,效果如下:
[Js]
效果如下:
[Js]
效果如下:
一、Ext.menu.Menu 菜单
1.菜单的定义
下面我们来定义一个菜单,它包括一个下拉列表,还有颜色选择器,日期选择器等菜单项。[Js]
2.把菜单附加到面板工具栏
我们定义一个面板,然后通过刚刚定义的菜单实现菜单栏。[Js]
2.实现右键菜单
还是用第一步定义的菜单,现在我们通过右键事件的方式实现右键菜单:[Js]
3.在ListView中定义右键菜单
这里我们借用第11篇的ListView,我们要实现当数据行右键单击时,弹出菜单的效果。[Js]
二、Ext.draw.Component 绘图
Ext支持通过js的方式绘图,可以绘制的包括基本图形圆形、矩形等,还可以描绘路径,因为它支持SVG路径语法。1.实现文本绘图
[Js]2.基本图形,路径绘图
我们先通过基本图形绘制一个圆形,一个长方形,最后通过路径语法绘制一个等腰三角形:[Js]
三、Ext.resizer.Resizer 大小变更
官方示例上作者说,他奶奶都会写这段代码,所以我也不想多讲了,应该很简单。控件的实现方式如下:[Js]
相关文章推荐
- ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
- [转]ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
- ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
- ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
- ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
- extjs 菜单Ext.menu.Menu
- Extjs-工具条和菜单 Ext.menu和Ext.Toolbar
- Ext学习笔记(5):DrawComponent使用 Demo
- Extjs-工具条和菜单 Ext.menu和Ext.Toolbar
- ExtJs--13-- Ext.apply(src,apply) 和 Ext.applyIf(src,apply) 两个方法的使用和区别比较
- ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
- cocos2dx打飞机项目笔记七:各种回调:定时器schedule、普通回调callFunc、菜单回调menu_selector、事件回调event_selector
- ExtJs4 笔记(7) Ext.tip.ToolTip 提示
- Ext.menu.Menu动态生成的菜单
- ExtJs4 笔记(5) Ext.Button 按钮
- extJs 2.1 学习笔记(Ext.data.HttpProxy篇)
- ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页
- [Ext.Net] 1.x GridPanel列数过多给Menu菜单加滚动条
- ExtJs--13-- Ext.apply(src,apply) 和 Ext.applyIf(src,apply) 两个方法的使用和差别比較
- 【转】extjs学习笔记三[Ext+json+jsp构建的动态树]