Ext.menu.Menu 属性及基础应用

老子叫甜甜 提交于 2020-03-26 10:58:16
Ext.menu.Menu
菜单对象

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));
    }
 

 

posted on 2008-01-08 23:49 真的很菜 阅读(34) 评论(0)  编辑  

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!