EXT核心API详解(十七)_Ext.menu.Menu/BaseItem/Item/CheckItem/Separator/TextItem

[size=small][color=red][b]Ext.menu.Menu[/b][/color]
菜单对象
config{
allowOtherMenus : Boolean //允许同时显示其它的菜单?
defaultAlign : String //默认对齐方式:tl-bl?
defaults : Object //默认的菜单项配置,将会应用到所有的items
items : Mixed //菜单项数组
minWidth : Number //最小宽度.默认120
shadow : Boolean/String //
subMenuAlign : String //子菜单对齐方式 tl-tr?
}
[b]Menu( Object config )[/b]
构造
[b]add( Mixed args ) : Ext.menu.Item[/b]
添加菜单项
可能的参数为
* 从Ext.menu.Item继承来的菜单项对象
* 可以被转换为menu item的HTMLElement对象
* 一个Ext.menu.Item的构造config对象
*一个字符串,-或separator将为分隔项,其它的做为TextItem对象的构造参数
[b]addElement( Mixed el ) : Ext.menu.Item[/b]
添加Element对象
[b]addItem( Ext.menu.Item item ) : Ext.menu.Item[/b]
添加Item 对象
[b]addMenuItem( Object config ) : Ext.menu.Item[/b]
添加Item对象,这回传入的参数是item构造的config参数
[b]addSeparator() : Ext.menu.Item[/b]
添加间隔项
[b]addText( String text ) : Ext.menu.Item[/b]
添加文本项
[b]getEl() : Ext.Element[/b]
得到当前element对象
[b]hide( [Boolean deep] ) : void[/b]
隐藏
[b]insert( Number index, Ext.menu.Item item ) : Ext.menu.Item[/b]
在index位置插入item
[b]isVisible() : void[/b]
可见?
[b]remove( Ext.menu.Item item ) : void[/b]
移除item
[b]removeAll() : void[/b]
移除所有
[b]show( Mixed element, [String position], [Ext.menu.Menu parentMenu] ) : void[/b]
相对于element显示当前菜单
[b]showAt( Array xyPosition, [Ext.menu.Menu parentMenu] ) : void[/b]
在绝对位置xyposition显示当前菜单

[color=red][b]Ext.menu.BaseItem[/b][/color]
所有菜单项的基类,继承自Component
config {
activeClass : String //活跃时的样式类,默认x-menu-item-active
canActivate : Boolean //能设置活跃?默认为false
handler : Function //事件处理句柄
hideDelay : Number //隔多长时间自动隐藏,默认100(毫秒)
hideOnClick : Boolean //点击后自动隐藏,默认为真
}
[b]BaseItem( Object config )[/b]
构造
[b]setHandler( Function handler, Object scope ) : void[/b]
设置处理句柄handler
[color=red]事件:[/color]
activate : ( Ext.menu.BaseItem this )
click : ( Ext.menu.BaseItem this, Ext.EventObject e )
deactivate : ( Ext.menu.BaseItem this )

[color=red][b]Ext.menu.Adapter[/b][/color]
这个类是为了支持将非BaseItem子类的容器转换为支持baseitem的适配器,除了构造,与BaseItem无异
Adapter( Ext.Component component, Object config ),可以自己再继承它做点实用的事, 他的两个子类更好用

[color=red][b]Ext.menu.ColorMenu[/b][/color]
提供颜色选择
[color=red][b]Ext.menu.DateItem[/b][/color]
提供日期选择

[color=red][b]Ext.menu.Item[/b][/color]
是BaseItem的另一个实用子类,提供一般的菜单项,支持菜单项之间的相互关系
config{
canActivate : Boolean
href : String
hrefTarget : String
icon : String //默认Ext.BLANK_IMAGE_URL,建议更改,extjs.com的确太慢了
iconCls : String
itemCls : String
showDelay : Number
text : String
}
[color=red]方法[/color]
[b]Item( Object config )[/b]
构造
[b]setIconClass( String cls ) : void
setText( String text ) : void[/b]

[color=red][b]Ext.menu.CheckItem[/b][/color]
继承自Item,前面带有选择框的菜单项
config{
checked : Boolean
group : String
groupClass : String //默认x-menu-group-item
itemCls : String
}
[color=red]方法[/color]
[b]CheckItem( Object config )[/b]
构造
[b]checkHandler( Ext.menu.CheckItem this, Boolean checked ) : void[/b]
选择处理方法
[b]setChecked( Boolean checked, [Boolean suppressEvent] ) : void[/b]
设置选择状态
[color=red]事件[/color]
beforecheckchange : ( Ext.menu.CheckItem this, Boolean checked )
checkchange : ( Ext.menu.CheckItem this, Boolean checked )

[color=red][b]Ext.menu.Separator[/b][/color]
继承自item,间隔项

[color=red][b]Ext.menu.TextItem[/b][/color]
继承自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));
}[/size]