ExtJs4 笔记（13） Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更

本篇讲解菜单、绘图、还有大小变更控件。菜单控件可以附加到各种其他控件中，比如按钮、工具栏等，甚至可以直接通过通过右键打开（模拟右键菜单）；ext对绘图的支持可以让我们通过js来绘图；大小变更控件可以让各种html元素获取可变更大小的能力。下面我们一一详细介绍。

一、Ext.menu.Menu 菜单

1.菜单的定义

下面我们来定义一个菜单，它包括一个下拉列表，还有颜色选择器，日期选择器等菜单项。

[Js]

?

2.把菜单附加到面板工具栏

我们定义一个面板，然后通过刚刚定义的菜单实现菜单栏。

[Js]

?
下面看看展示效果：

2.实现右键菜单

还是用第一步定义的菜单，现在我们通过右键事件的方式实现右键菜单：

[Js]

?
单击右键，效果如下：

3.在ListView中定义右键菜单

这里我们借用第11篇的ListView,我们要实现当数据行右键单击时，弹出菜单的效果。

[Js]

?
在ListView中单击右键，效果如下：

二、Ext.draw.Component 绘图

Ext支持通过js的方式绘图，可以绘制的包括基本图形圆形、矩形等，还可以描绘路径，因为它支持SVG路径语法。

1.实现文本绘图

[Js]

?
通过上面的代码，我们可以展示出图片式文本，效果如下：

2.基本图形，路径绘图

我们先通过基本图形绘制一个圆形，一个长方形，最后通过路径语法绘制一个等腰三角形：

[Js]

?
效果如下：

三、Ext.resizer.Resizer 大小变更

官方示例上作者说，他奶奶都会写这段代码，所以我也不想多讲了，应该很简单。控件的实现方式如下：

[Js]

?
效果如下：



作者：李盼（Lipan）

出处：[Lipan] （http://www.cnblogs.com/lipan/）

版权声明：本文的版权归作者与博客园共有