一、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 //是否彻底隐藏调节边框
});
}); |
效果如下:
相关推荐
Ext.js 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件和数据绑定功能,使得开发者可以构建出具有桌面应用级别的交互式网页应用。本教程和API文档聚焦于Ext.js 3.0版本...
EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档...
Ext.js 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件和数据绑定机制,使得开发者可以构建出具有桌面应用级别的交互式网页应用。本压缩包包含两个PDF文档,分别是“Ext...
在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...
打印功能 ext.js,打印功能 ext.js,打印功能 ext.js,打印功能 ext.js,打印功能 ext.js
`Ext.ux.SwfUploadPanel.js`是这样一个基于ExtJS和SwfUpload技术的插件,它实现了多文件上传的功能。这篇文章将深入探讨这个插件的工作原理、主要特点以及如何在实际项目中应用。 首先,`ExtJS`(全称为EXT ...
### Ext.JS 4.0 第一印象:新特性与迁移指南 #### 一、书籍简介 本书《Ext.JS 4.0 第一印象》由 Loiane Groner 撰写,是一本针对 Ext.JS 4.0 的实用指南。书中详细介绍了 Ext.JS 4.0 的新特性,并提供了从 Ext.JS ...
在Ext JS框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们主要用于操作DOM元素。理解这两个方法之间的区别以及如何使用它们对于开发高质量、高效率的应用程序至关重要。 #### 1. Ext.get **定义**:`Ext....
Ext JS 是一个强大的JavaScript应用程序框架,它提供了丰富的用户界面组件和功能,用于构建富客户端Web应用。在3.4版本中,它包含了对拖放功能的良好支持,这使得开发者能够轻松实现各种元素的动态交互,比如在布局...
ext封装的太死板,里面有常用到的15个ext.js触发事件和监听事件,对ext了解的不是特别深入,大部分都是经常碰到的
官方文件加示例,ext.js 4.2版本,后面就是凑字数了后面就是凑字数了
`ext-basex.js`是EXTJS的基础组件文件,其中包含了Ajax请求的相关实现。在旧版本中,可能需要对请求选项进行更详细的配置来适应不同的浏览器环境。 在EXTJS中,`Ext.Ajax`对象提供了丰富的配置项和方法,如`params`...
EXT.js4.2是EXT JS框架的第4.2版本,是一个完整的前端开源JavaScript框架,用于开发基于Web的交互式应用程序。该框架提供了丰富的组件库,允许开发者创建具有丰富界面的单页应用程序(SPA)。EXT.js4.2不仅包括UI...
```javascript Ext.Ajax.request({ url: 'http://other-origin.com/api', method: 'GET', withCredentials: true, headers: { 'Access-Control-Allow-Origin': '*' }, success: function(response) { // ...
### Ext.data.Store的基本用法详解 #### 一、Ext.data.Store简介 `Ext.data.Store`是ExtJS框架中用于管理数据的核心组件之一。它主要负责数据的存储、加载、更新等操作,并且提供了多种方法来方便地处理这些数据。...
《深入浅出Ext.JS》是由徐会生等人编著的一本关于Ext.JS的权威技术书籍,旨在帮助读者全面理解和掌握这一强大的JavaScript框架。Ext.JS是一个用于构建富客户端Web应用的开源库,它提供了丰富的组件库和强大的数据...
在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...
在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...
在EXTJS这个强大的JavaScript框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们都用于操作DOM元素,但它们之间存在着微妙的差异。了解这些差异对于优化代码性能和理解EXTJS的工作机制至关重要。 首先,`Ext....
Ext.JS是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和可扩展的架构,使得开发人员能够创建功能复杂的桌面级网页应用。"深入浅出Ext.JS.徐会生例子"可能是...