作者:李盼(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          //是否彻底隐藏调节边框
    });
});

效果如下:

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

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

    本篇讲解菜单.绘图.还有大小变更控件.菜单控件可以附加到各种其他控件中,比如按钮.工具栏等,甚至可以直接通过通过右键打开(模拟右键菜单):ext对绘图的支持可以让我们通过js来绘图:大小变更控件可以让 ...

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

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

  3. ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏

    本篇讲解三个工具栏控件.其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusba ...

  4. ExtJs4 笔记(4) Ext.XTemplate 模板

    ExtJs4 笔记(4) Ext.XTemplate 模板 摘自:http://www.cnblogs.com/lipan/ 本篇将涉及到ExtJs中一个重要的概念,模板.话说Razor很神奇,但是我 ...

  5. [转载]ExtJs4 笔记(10) Ext.tab.Panel 选项卡

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

  6. [转载]ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

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

  7. [转载]ExtJs4 笔记(5) Ext.Button 按钮

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

  8. Android应用开发基础篇(10)-----Menu(菜单)

    链接地址:http://www.cnblogs.com/lknlfy/archive/2012/02/28/2372101.html 一.概述 Menu,简单来理解就是当你按下手机的“menu”键时所 ...

  9. ExtJs4 笔记(10) Ext.tab.Panel 选项卡

    本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他 ...

随机推荐

  1. 站长必备:10个好用的 WordPress 备份插件

    网站备份对于站长来说极其重要的.任何的事情都可能发生,这可能会导致你失去所有的辛勤工作:您的网站可能被黑客攻破,你可以安装一个了插件导致冲突,你的服务器可能被攻击,你可能在编辑文件时犯了一个错误等等, ...

  2. 如何查找SAP的事务代码清单

    SAP系统中,为了省去输入程序名称等繁琐步骤,SAP提供一种命令,称作‘事务代码’,通过执行事务代码达到快速进入相应程序的目的.那么在系统中如何去查找事务代码,事务代码和程序的对应关系如何呢?我们可以 ...

  3. ArcGIS Server For Linux 10.2.2安装

    1.#  yum install Xvfb#  yum groupinstall "X Window System"# yum install gettext 2./usr/sbi ...

  4. 国内第一篇详细讲解hadoop2的automatic HA+Federation+Yarn配置的教程

    前言 hadoop是分布式系统,运行在linux之上,配置起来相对复杂.对于hadoop1,很多同学就因为不能搭建正确的运行环境,导致学习兴趣锐减.不过,我有免费的学习视频下载,请点击这里. hado ...

  5. '[<NSObject 0x8a4b500> setValue:forUndefinedKey:]

    Bug如下: Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[ setValue:forUnd ...

  6. Android中View的绘制过程 onMeasure方法简述 附有自定义View例子

    Android中View的绘制过程 onMeasure方法简述 附有自定义View例子 Android中View的绘制过程 当Activity获得焦点时,它将被要求绘制自己的布局,Android fr ...

  7. Android 抽屉效果的导航菜单实现

    Android 抽屉效果的导航菜单实现 抽屉效果的导航菜单 看了很多应用,觉得这种侧滑的抽屉效果的菜单很好. 不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面上一个按钮点击,菜单就滑出来,而 ...

  8. SQL for SQLite

    语法 verb + subject + predicate commannds(命令) SQL由命令组成,以分号为结束.命令有token组成,token由white space分隔,包括空格.tab. ...

  9. TextView显示颜色高亮的问题

    TextView textView = (TextView) findViewById( R.id.tv ); String text = "<font color=\"#d ...

  10. 【读书笔记】iOS-ARC-环境下如何查看引用计数的变化

    一,新建立一个工程,用于测试引用计数的变化. 二,找到如下路径Build Phases---->Compile Sources---->AppDelegate.m 三,选中AppDeleg ...