《回到系列目錄
本篇講解菜單、繪圖、還有大小變更控件。菜單控件可以附加到各種其他控件中，比如按鈕、工具欄等，甚至可以直接通過通過右鍵打開（模拟右鍵菜單）；ext對繪圖的支援可以讓我們通過js來繪圖；大小變更控件可以讓各種html元素擷取可變更大小的能力。下面我們一一詳細介紹。
一、Ext.menu.Menu 菜單
1.菜單的定義
下面我們來定義一個菜單，它包括一個下拉清單，還有顔色選擇器，日期選擇器等菜單項。
[Js]
//下定義一個下拉清單
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]
//把菜單附加到工具欄上
var panel = new Ext.Panel({
renderTo: 'div1',
width: 600,
height: 250,
collapsible: true,
layout: 'fit',
title: '示範工具欄',
tbar: [{ text: "菜單", menu: menu}]
});
下面看看展示效果：
2.實作右鍵菜單
還是用第一步定義的菜單，現在我們通過右鍵事件的方式實作右鍵菜單：
[Js]
//定義右鍵菜單
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]
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]
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]
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]
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 //是否徹底隐藏調節邊框
});
});
效果如下：
作者：李盼（Lipan）
出處： [Lipan] （ http://www.cnblogs.com/lipan/）
版權聲明：本文的版權歸作者與部落格園共有。轉載時須注明本文的詳細連結，否則作者将保留追究其法律責任。
轉載于:https://www.cnblogs.com/lipan/archive/2011/12/26/2301426.html