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

本篇讲解菜单、绘图、还有大小变更控件。菜单控件可以附加到各种其他控件中，比如按钮、工具栏等，甚至可以直接通过通过右键打开（模拟右键菜单）；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          //是否彻底隐藏调节边框     }); });

效果如下：