ExtJS学习之menu

Posted on 2008-11-18 16:50 Robert Su 阅读(2989) 评论(4)  编辑  收藏 所属分类: Ajax
Ext.onReady(function(){
    Ext.QuickTips.init();

  

    var dateMenu = new Ext.menu.DateMenu({
        handler : 
function(dp, date){
            Ext.example.msg('Date Selected', 'You chose {
0}.', date.format('M j, Y'));
        }
    });

    
var colorMenu = new Ext.menu.ColorMenu({
        handler : 
function(cm, color){
            Ext.example.msg('Color Selected', 'You chose {
0}.', color);
        }
    });

    
var menu = new Ext.menu.Menu({
        id: 'mainMenu', 
        items: [   
//定义菜单中的元素
            {
                text: 'I like Ext',
                checked: 
true,     
                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: 'color',
                            checkHandler: onItemCheck
                        }
                    ]
                }
            },
            {
                text: 'Choose a Date',
                iconCls: 'calendar',
                menu: dateMenu

            },
            {
                text: 'Choose a Color',
                menu: colorMenu    //这里前面定义了

            }
        ]
    });

    
var tb = new Ext.Toolbar();  
    tb.render('toolbar');

    tb.add({
            text:'Button Menu',
            iconCls: 'bmenu',  
//
            menu: menu  //分配menu到toolbar
        });

    
// functions to display feedback
    function onButtonClick(btn){
        Ext.example.msg('Button Click','You clicked the 
"{0}" button.', btn.text);
    }

    
function onItemClick(item){
        Ext.example.msg('Menu Click', 'You clicked the 
"{0}" menu item.', item.text);
    }

    
function onItemCheck(item, checked){
        Ext.example.msg('Item Check', 'You {
1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
    }

    
function onItemToggle(item, pressed){
        Ext.example.msg('Button Toggled', 'Button 
"{0}" was toggled to {1}.', item.text, pressed);
    }

});


在html中加入
    <div id="toolbar"></div>

Feedback

# re: ExtJS学习之menu  回复  更多评论   

2009-04-09 14:48 by 事实是否
我顶你个肺,都没有显示呢??

# re: ExtJS学习之menu  回复  更多评论   

2009-04-10 09:42 by Robert Su
@事实是否
?

# re: ExtJS学习之menu  回复  更多评论   

2010-06-14 19:16 by 路人甲
还真没显示,何解?

# re: ExtJS学习之menu[未登录]  回复  更多评论   

2010-07-16 15:30 by 阿宝
显示了 不错 不过那些方法没有掉到

只有注册用户登录后才能发表评论。


网站导航:
 

posts - 103, comments - 104, trackbacks - 0, articles - 5

Copyright © Robert Su