extjs4 导航菜单实例

阅读更多

今天要写extjs导航菜单，查了些资料基本没有满意的，实在是感觉太缺少这方面的资料了，夜里加班偷闲自己动手写了，好了不废话了，看代码。

/*by heartneo*/
Ext.onReady(function(){
	createPanel();
});

function createPanel(){
	filterPanel = Ext.create('Ext.panel.Panel', {//定义panel
	    width: 300,
	    title: 'menu',
	    renderTo: 'menu',
	    tbar: Ext.create('Ext.toolbar.Toolbar', {//定义toolbar
            items: [
            	{	
            		id: 'options',
	                xtype:'splitbutton',//定义splitbutton，可以显示下拉菜单	                
	                text: 'Options',
	                menu: {
	                	 items: [//定义2个menu
	                		{text: 'Item 1', handler: function(){  window.location = "http://heartneo.iteye.com" }},
	            			{text: 'Item 2', handler: function(){ Ext.MessageBox.alert('heartneo',' -- by heartneo -- '); }}
	                	 ]
	                },
	                listeners : {//监听事件
						'mouseover' : function() {//鼠标经过按钮时，显示菜单
							Ext.getCmp('options').showMenu(); 
						},
						'mouseout' : function() {//鼠标移出时，延迟隐藏菜单
							var task = new Ext.util.DelayedTask(function(){//定义延迟任务
   								 Ext.getCmp('options').hideMenu();//
							});
							task.delay(1500); //1.5秒后隐藏菜单
						}
					}
            	}
            ]
        })
	});
}

结果视图如下：



附上源代码。

• 
• 大小: 10 KB

• menu.rar (1 KB)
• 下载次数: 66

• 查看图片附件