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

来源:互联网 发布:风险指数矩阵举例 编辑:程序博客网 时间:2024/03/29 18:07

本篇讲解菜单、绘图、还有大小变更控件。菜单控件可以附加到各种其他控件中,比如按钮、工具栏等,甚至可以直接通过通过右键打开(模拟右键菜单);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
//下定义一个下拉列表
varcombo = 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
});
 
//这里是菜单的定义
varmenu = 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
//把菜单附加到工具栏上
varpanel = newExt.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
varstore = newExt.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();
 
varlistView = 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());
                returnfalse;
            }
        }
    }
});

在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
vardrawComponent = 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() {
 
    varbasic = 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          //是否彻底隐藏调节边框
    });
});

效果如下:


0 0