菜單對象
config{
allowOtherMenus : Boolean //允許同時顯示其它的菜單?
defaultAlign : String //默認對齊方式:tl-bl?
defaults : Object //默認的菜單項配置,將會應用到所有的items
items : Mixed //菜單項數組
minWidth : Number //最小寬度.默認120
shadow : Boolean/String //
subMenuAlign : String //子菜單對齊方式 tl-tr?
}
Menu( Object config )
構造
add( Mixed args ) : Ext.menu.Item
添加菜單項
可能的參數爲
* 從Ext.menu.Item繼承來的菜單項對象
* 可以被轉換爲menu item的HTMLElement對象
* 一個Ext.menu.Item的構造config對象
*一個字符串,-或separator將爲分隔項,其它的做爲TextItem對象的構造參數
addElement( Mixed el ) : Ext.menu.Item
添加Element對象
addItem( Ext.menu.Item item ) : Ext.menu.Item
添加Item 對象
addMenuItem( Object config ) : Ext.menu.Item
添加Item對象,這回傳入的參數是item構造的config參數
addSeparator() : Ext.menu.Item
添加間隔項
addText( String text ) : Ext.menu.Item
添加文本項
getEl() : Ext.Element
得到當前element對象
hide( [Boolean deep] ) : void
隱藏
insert( Number index, Ext.menu.Item item ) : Ext.menu.Item
在index位置插入item
isVisible() : void
可見?
remove( Ext.menu.Item item ) : void
移除item
removeAll() : void
移除所有
show( Mixed element, [String position], [Ext.menu.Menu parentMenu] ) : void
相對於element顯示當前菜單
showAt( Array xyPosition, [Ext.menu.Menu parentMenu] ) : void
在絕對位置xyposition顯示當前菜單
Ext.menu.BaseItem
所有菜單項的基類,繼承自Component
config {
activeClass : String //活躍時的樣式類,默認x-menu-item-active
canActivate : Boolean //能設置活躍?默認爲false
handler : Function //事件處理句柄
hideDelay : Number //隔多長時間自動隱藏,默認100(毫秒)
hideOnClick : Boolean //點擊後自動隱藏,默認爲真
}
BaseItem( Object config )
構造
setHandler( Function handler, Object scope ) : void
設置處理句柄handler
事件:
activate : ( Ext.menu.BaseItem this )
click : ( Ext.menu.BaseItem this, Ext.EventObject e )
deactivate : ( Ext.menu.BaseItem this )
Ext.menu.Adapter
這個類是爲了支持將非BaseItem子類的容器轉換爲支持baseitem的適配器,除了構造,與BaseItem無異
Adapter( Ext.Component component, Object config ),可以自己再繼承它做點實用的事, 他的兩個子類更好用
Ext.menu.ColorMenu
提供顏色選擇
Ext.menu.DateItem
提供日期選擇
Ext.menu.Item
是BaseItem的另一個實用子類,提供一般的菜單項,支持菜單項之間的相互關係
config{
canActivate : Boolean
href : String
hrefTarget : String
icon : String //默認Ext.BLANK_IMAGE_URL,建議更改,extjs.com的確太慢了
iconCls : String
itemCls : String
showDelay : Number
text : String
}
方法
Item( Object config )
構造
setIconClass( String cls ) : void
setText( String text ) : void
Ext.menu.CheckItem
繼承自Item,前面帶有選擇框的菜單項
config{
checked : Boolean
group : String
groupClass : String //默認x-menu-group-item
itemCls : String
}
方法
CheckItem( Object config )
構造
checkHandler( Ext.menu.CheckItem this, Boolean checked ) : void
選擇處理方法
setChecked( Boolean checked, [Boolean suppressEvent] ) : void
設置選擇狀態
事件
beforecheckchange : ( Ext.menu.CheckItem this, Boolean checked )
checkchange : ( Ext.menu.CheckItem this, Boolean checked )
Ext.menu.Separator
繼承自item,間隔項
Ext.menu.TextItem
繼承自item,文本項
config{
hideOnClick : Boolean
itemCls : String
text : String
}
下面的示例從ext官方而來,繼續簡單的修改,只有menu相關部分.同樣也都很簡單
Ext.QuickTips.init();
//日期選擇項點擊事件
var dateMenu = new Ext.menu.DateMenu({
handler : function(dp, date){
Ext.MessageBox.alert('Date Selected', String.format('You chose {0}.', date.format('M j, Y')));
}
});
var colorMenu = new Ext.menu.ColorMenu({
handler : function(cm,color){
Ext.MessageBox.alert('Color Selected', String.format('You chose #{0}.', cm.palette.value));
}
});
var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [
{
text: 'I like Ext',
checked: true,
checkHandler: onItemCheck
},
{
text: 'Ext for jQuery',
checked: true,
checkHandler: onItemCheck
},
{
text: 'I donated!',
checked:false,
checkHandler: onItemCheck
}, '-', {
text: 'Radio Options',
menu: {
items: [
'<b class="menu-title">Choose a Theme</b>',
{
text: 'Aero Glass',
checked: true,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Vista Black',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Gray Theme',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Default Theme',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}
]
}
},{
text: 'Choose a Date',
iconCls: 'calendar',
menu: dateMenu
},{
text: 'Choose a Color',
menu: colorMenu
}
]
});
var tb = new Ext.Toolbar();
tb.render(Ext.getBody());
tb.add({
text:'Button w/ Menu',
iconCls: 'bmenu', // <-- icon
menu: menu // assign menu by instance
}
);
menu.addSeparator();
// Menus have a rich api for
// adding and removing elements dynamically
var item = menu.add({
text: 'Dynamically added Item'
});
// items support full Observable API
item.on('click', onItemClick);
// items can easily be looked up
menu.add({
text: 'Disabled Item',
id: 'disableMe' // <-- Items can also have an id for easy lookup
// disabled: true <-- allowed but for sake of example we use long way below
});
// access items by id or index
menu.items.get('disableMe').disable();
//這個增加子菜單的方法照貓畫虎學的,至於add的到底是個什麼?getXType得不到,item有私有的屬性menu?
var ele=menu.add({
text:'submit',
menu:{
items:[
{text:'submenu1',handler:onItemClick},
{text:'submenu2',handler:onItemClick}
]
}
});
// functions to display feedback
function onButtonClick(btn){
Ext.MessageBox.alert('Button Click',String.format('You clicked the "{0}" button.', btn.text));
}
function onItemClick(item){
Ext.MessageBox.alert('Menu Click', String.format('You clicked the "{0}" menu item.', item.text));
}
function onItemCheck(item, checked){
Ext.MessageBox.alert('Item Check', String.format('You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked'));
}
function onItemToggle(item, pressed){
Ext.MessageBox.alert('Button Toggled', String.format('Button "{0}" was toggled to {1}.', item.text, pressed));
}