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

作者：李盼（Lipan）
出处：[Lipan] （http://www.cnblogs.com/lipan/）
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。

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

一、Ext.menu.Menu 菜单

1.菜单的定义

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

[Js]


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

//下定义一个下拉列表

var combo = Ext.create(‘Ext.form.ComboBox‘, {

    store: new Ext.data.ArrayStore({

        fields: [‘id‘, ‘name‘],

        data: [[1, "张三"], [2, "李四"], [3, "王五"], [4, "赵六"]]

    }),

    displayField: ‘name‘,

    typeAhead: true,

    mode: ‘local‘,

    triggerAction: ‘all‘,

    emptyText: ‘请选择..‘,

    selectOnFocus: true,

    width: 135

});

//这里是菜单的定义

var menu = Ext.create(‘Ext.menu.Menu‘, {

    id: ‘mainMenu‘,

    style: {

        overflow: ‘visible‘

    },

    items: [

        combo,

        {

            text: ‘复选框‘,

            checked: true

        }, ‘-‘, {

            text: ‘单选子菜单‘,

            menu: {

                items: [

                    ‘<b>请选择一个人名</b>‘,

                    {

                        text: ‘张三‘,

                        checked: true,

                        group: ‘theme‘

                    }, {

                        text: ‘李四‘,

                        checked: false,

                        group: ‘theme‘,

                        checkHandler: function () {

                            Ext.MessageBox.alert("消息", "李四被选择！")

                        }

                    }, {

                        text: ‘王五‘,

                        checked: false,

                        group: ‘theme‘

                    }, {

                        text: ‘赵六‘,

                        checked: false,

                        group: ‘theme‘

                    }

                ]

            }

        }, {

            text: ‘请选择一个日期‘,

            menu: Ext.create(‘Ext.menu.DatePicker‘, {

                handler: function (dp, date) {

                    Ext.MessageBox.alert(‘消息‘, ‘你选择了:‘ + date.format(‘Y-m-d‘));

                }

            })

        }, {

            text: ‘选择一个颜色‘,

            menu: Ext.create(‘Ext.menu.ColorPicker‘, {

                handler: function (cm, color) {

                    Ext.MessageBox.alert(‘消息‘, ‘你选择了：‘ + color);

                }

            })

        }

    ]

});

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

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

[Js]


1

2

3

4

5

6

7

8

9

10

//把菜单附加到工具栏上

var panel = new Ext.Panel({

    renderTo: ‘div1‘,

    width: 600,

    height: 250,

    collapsible: true,

    layout: ‘fit‘,

    title: ‘演示工具栏‘,

    tbar: [{ text: "菜单", menu: menu}]

});

下面看看展示效果：

2.实现右键菜单

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

[Js]


1

2

3

4

5

6

7

8

9

//定义右键菜单

Ext.getDoc().on(‘contextmenu‘, function (e, o) {

    e.preventDefault();

    menu.showAt(e.getXY());

    //第二种写法：

    //e.stopEvent();

    //menu.showAt([e.getPageX(), e.getPageY()]);

});

单击右键，效果如下：

3.在ListView中定义右键菜单

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

[Js]


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

var store = new Ext.data.JsonStore({

    fields: [

    { name: ‘IntData‘, type: ‘int‘ },

    { name: ‘StringData‘, type: ‘string‘ },

    { name: ‘TimeData‘, type: ‘date‘ }

   ],

    proxy: {

        type: ‘ajax‘,

        url: ‘ListView1Json‘,

        reader: {

            type: ‘json‘,

            root: ‘rows‘

        }

    },

    sortInfo: { field: ‘IntData‘, direction: ‘DESC‘ }

});

store.load();

var listView = Ext.create(‘Ext.ListView‘, {

    renderTo: "div1",

    store: store,

    multiSelect: true,

    emptyText: ‘无数据‘,

    reserveScrollOffset: true,

    hideHeaders: false,

    columns: [{

        header: "IntData",

        dataIndex: ‘IntData‘

    }, {

        header: "StringData",

        dataIndex: ‘StringData‘

    }, {

        header: "TimeData",

        dataIndex: ‘TimeData‘,

        align: ‘right‘,

        xtype: ‘datecolumn‘,

        format: ‘m-d h:i a‘

    }],

    viewConfig: {

        stripeRows: true,

        listeners: {

            itemcontextmenu: function (view, rec, node, index, e) {

                e.stopEvent();

                menu.showAt(e.getXY());

                return false;

            }

        }

    }

});

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

二、Ext.draw.Component 绘图

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

1.实现文本绘图

[Js]


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

Ext.create(‘Ext.draw.Component‘, {

    renderTo: Ext.getBody(),

    viewBox: false,

    draggable: {

        constrain: true,                    //允许拖动

        constrainTo: Ext.getBody()

    },

    floating: true,

    autoSize: true,

    items: [{

        type: ‘text‘,

        text: ‘图形化的文本‘,

        fill: ‘green‘,

        font: ‘16px Arial‘,

        rotate: {

            degrees: 45

        }

    }]

});

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

2.基本图形，路径绘图

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

[Js]


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

var drawComponent = Ext.create(‘Ext.draw.Component‘, {

    viewBox: false,

    items: [{

        type: ‘circle‘,                     //园

        fill: ‘#79BB3F‘,

        radius: 100,

        x: 100,

        y: 100

    }, {

        type: ‘rect‘,                       //矩形

        width: 50,

        height: 30,

        fill: ‘#f00‘,

        x: 0,

        y: 0

    }, {

        type: "path",

        path: "M100 0 L150 50 L200 0 Z",    //路径

        "stroke-width": "1",

        stroke: "#000",

        fill: "blue"

    }]

});

Ext.create(‘Ext.Window‘, {

    width: 230,

    height: 250,

    layout: ‘fit‘,

    items: [drawComponent]

}).show();

效果如下：

三、Ext.resizer.Resizer 大小变更

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

[Js]


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

Ext.onReady(function () {

    var basic = Ext.create(‘Ext.resizer.Resizer‘, {

        target: ‘basic‘,

        pinned: true,               //是否显示调节边框

        width: 200,

        height: 100,

        minWidth: 100,

        minHeight: 50,

        dynamic: true,              //动态设置

        preserveRatio: true,        //当变更大小时，长宽比例是否固定

        heightIncrement: 20,        //单次变更，高度变更值

        widthIncrement: 20,

        transparent: false          //是否彻底隐藏调节边框

    });

});

效果如下：

时间： 2024-12-14 12:14:11

[转]ExtJs4 笔记（13） Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更的相关文章

Android学习笔记之Menu一级菜单、二级菜单的使用

(1)布局文件没有做更改 (2)在res--menu目录下的main.xml文件中代码如下: <menu xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 一级菜单 --> <item android:id="@+id/file" android:title="@string/file"> <!-- 二级菜单 -->

[转载]ExtJs4 笔记（12） Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏

作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律责任. 本篇讲解三个工具栏控件.其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusbar.StatusBar用来展示当前的状态信息. 一.Ext.toolbar.Toolbar

ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 （转 ）出处：[Lipan] （http://www.cnblogs.com/lipan/）

本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下面介绍几个基本配置项: 1.title:设置面板标题文本. 2.tbar,lbar,rbar,bbar:分别设置上.左.右.下四个部位的工具栏. 3.html,items:前者用来设置正文部分的html,后者设置正文部分的ext控件. 4.buttons:设置按钮区的按钮. 下面看看面板生成代码:

Menu创建菜单

菜单是用户界面中最常见的元素之一,使用非常频繁,在Android中,菜单被分为如下三种,选项菜单(OptionsMenu).上下文菜单(ContextMenu)和子菜单(SubMenu),今天这讲是OptionsMenu 一.概述:这里偷懒,从网上引用的,非原创.引用出处:ForrestWoo public boolean onCreateOptionsMenu(Menu menu):使用此方法调用OptionsMenu . public boolean onOptionsItemSelecte

[转载]ExtJs4 笔记（5） Ext.Button 按钮

作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律责任. 从本篇开始讲基础控件,ExtJs对所有的UI控件都有它自己的一套封装.本篇要讲到的是ExtJs的按钮.主要包括按钮事件.带分割线.带图标.带菜单的按钮,下拉选项式按钮和按钮组合等.我们先看看效果图: 预览 如下是用到的html: [html] <h1> 三种方式实现事件: </h1&

[转载]ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律责任. 本篇要登场的有三个控件,分别是滚轴控件.进度条控件和编辑控件. 一.滚轴控件 Ext.slider 1.滚轴控件的定义 下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向.纵向,以及单值.多值选择的特性: [html] <h1>滚轴控件</h1> <div class

ExtJs4 笔记之Ext.tab.Panel 选项卡

本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文. 3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据. 另外,每个tab都可以设置是否可关闭,进入tab时的事件,以及tab是否可用,具体情况请看代码:精心开发5年的UI前端框架! <h1>基本

ExtJs4 笔记（4） Ext.XTemplate 模板

ExtJs4 笔记(4) Ext.XTemplate 模板 摘自:http://www.cnblogs.com/lipan/ 本篇将涉及到ExtJs中一个重要的概念,模板.话说Razor很神奇,但是我个人不是很喜欢那种html混编C#的方式,仿佛又回到了asp的时 代.ExtJs的模板同样也可以组织生成灵活的html,而且代码和html有效的分离.本文将细细分析ExtJs模板的用法. 行文之前我先把公共的html和用到的js数据贴在前面,后面的代码都要引用到. [html] 1 2 3 4 5

Ext.Net学习笔记13：Ext.Net GridPanel Sorter用法

Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法 这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter. 默认情况下,Ext.Net GridPanel中的列都具有排序功能,效果如下: 如果要禁用列排序,需要在列模型中添加一个属性Sortable="false" 客户端排序 排序是对Store的操作.如果我们要在一个Store中加入排序,可以使用下面的配置: <Sorters> <ext:DataSorter P