[轉]ExtJs4 筆記（13） Ext.menu.Menu 菜單、Ext.draw.Component 繪圖、Ext.resizer.Resizer 大小變動
做者：李盼（Lipan）
出處：[Lipan] （http://www.cnblogs.com/lipan/）
版權聲明：本文的版權歸做者與博客園共有。轉載時須註明本文的詳細連接，不然做者將保留追究其法律責任。javascript
本篇講解菜單、繪圖、還有大小變動控件。菜單控件能夠附加到各類其餘控件中，好比按鈕、工具欄等，甚至能夠直接經過經過右鍵打開（模擬右鍵菜單）；ext對繪圖的支持可讓咱們經過js來繪圖；大小變動控件可讓各類html元素獲取可變動大小的能力。下面咱們一一詳細介紹。html
1、Ext.menu.Menu 菜單
1.菜單的定義
下面咱們來定義一個菜單，它包括一個下拉列表，還有顏色選擇器，日期選擇器等菜單項。java
[Js]node
|
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.把菜單附加到面板工具欄
咱們定義一個面板，而後經過剛剛定義的菜單實現菜單欄。ajax
[Js]json
|
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}]
});
|
下面看看展現效果：ide
2.實現右鍵菜單
仍是用第一步定義的菜單，如今咱們經過右鍵事件的方式實現右鍵菜單：工具
[Js]url
|
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()]);
});
|
單擊右鍵，效果以下：spa
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中單擊右鍵，效果以下：
2、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();
|
效果以下：
3、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
//是否完全隱藏調節邊框
});
});
|
效果以下：
相關文章
- 1. Ext菜單Ext.menu.Menu
- 2. EXT.JS.Menu(轉載)
- 3. ExtJS4筆記 Data
- 4. pymol繪圖筆記
- 5. 學習ExtJS4 常用控件 - 衝動
- 6. Graphics—菜單設置筆記
- 7. 繪圖筆記
- 8. Extjs4學習筆記-Ext.util.KeyNav
- 9. ExtJs4 筆記之 layout 佈局
- 10. ExtJs4 筆記（14） layout 佈局
- 更多相關文章...
- • R 繪圖 - 餅圖 - R 語言教程
- • Eclipse 菜單 - Eclipse 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章