[转]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 //是否彻底隐藏调节边框
});
});
|
效果如下:
转载于:https://www.cnblogs.com/BTMaster/p/4082536.html
[转]ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更...相关推荐
- ExtJs4 笔记 Ext.tab.Panel 选项卡
本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他 ...
- ExtJs4 笔记(5) Ext.Button 按钮
id="li2"></li><li id="li3"></li></ul></div>< ...
- Ext.menu.Menu菜单栏
1.Ext.menu.Menu主要配置项 Ext.menu.Menu组件主要配置项 配置项 参数类型 说明 items Mixed 有效菜单项数组 ignoreParentClicks Boolean ...
- [转载]ExtJs4 笔记(10) Ext.tab.Panel 选项卡
作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/) 版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其 ...
- 【Qt】QtCreator中使用ActionManager类管理标题栏(MunuBar)、菜单(Menu)和菜单中的项目(Action)
1.简介 QtCreator中使用ActionManager类管理标题栏(MunuBar).菜单(Menu)和菜单中的项目(Action),下面以创建"New"动作为例,介绍Act ...
- android 弹出菜单 toast,Android学习第二天:Toast(提醒)、Menu(菜单)、Intent的显式和隐式(包括打开、适配网站,调用拨号界面等)...
1.Toast提醒 为昨天写的按钮程序添加一个提醒,在MainActivity中添加如下代码: Button bt1 = (Button) findViewById(R.id.button_1); b ...
- UI标签库专题八:JEECG智能开发平台 Menu(左侧菜单生成标签)
1. Menu(左侧菜单生成标签) 1.1. 参数 属性名 类型 描述 是否必须 默认值 style string 菜单样式 否 null parentFun string 一级菜单 是 nul ...
- Android开发:Menu选项菜单
创建选项菜单的步骤: 1.覆盖Activity的onCreateOptionsMenu(Menu menu)函数 2.调用menu的add()方法添加菜单项(MenuItem),调用MenuItem的 ...
- BootstrapBlazor实战 Menu 导航菜单使用(2)
接上篇: B08. BootstrapBlazor实战 Menu 导航菜单使用(1) 实战BootstrapBlazorMenu 导航菜单的使用, 以及整合Freesql orm快速制作菜单项数据库后 ...
最新文章
- Ubuntu系统安装stardict(星际译王)词典
- 需要单机还是集群部署_5000W如何玩转Filecoin市场 部署最符合企业的集群模式
- 人脸识别如何在大型银行中大规模商用?
- 我的自白——华夏藏珍第一周
- 【知识星球】超3万字的网络结构解读,学习必备
- python免费网络采集_python网络数据采集7 采集一个网站所有的外链
- “CSDN 2021年度IT技术影响力之星评选”正式开启报名!
- 埃里克贝里奇_9大热门技术的安全隐患
- Asp.net mvc中Controller的返回值
- 力扣-1877 数组中最大数对和的最小值
- 如何使用Mac预览程序将png转换为jpg格式的技巧分享
- BZOJ 2683: 简单题(CDQ 分治)
- 优酷路由宝刷梅林_【荒野无灯Padavan固件】优酷路由宝L1内存卡扩展SWAP缓存+v2瑞设置详解...
- linux系统声音管理,Mplayer 音量控制详解
- Ctrl+Shift+End
- [乡土民间故事_徐苟三传奇]第四一回_放牛娃巧娶富家女
- DOM及DOM二级事件
- 全国第17届计算机辅助设计与图形学(cad/cg)学术会议论文集,征稿资讯-CCF第24届全国计算机辅助设计与图形学学术会议 (CCF CAD/CG 2021)...
- 如何在金仓数据库KingbaseES中使用pg_get_function_arg_default函数
- Kotlin高仿微信-第20篇-个人信息