Ext 侧栏菜单

来源：互联网发布：来源名称我的淘宝编辑：程序博客网时间：2024/05/01 15:39

效果如图：

文件保存ext的examples目录中，如：

ext-2.2/examples/my/menu_block.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>my test</title>
    <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script>
    <script type="text/javascript" src="../../ext-all-debug.js"> </script>

   <script type="text/javascript">
        Ext.onReady(function(){

            var MenuBlock = function(config){
                config = config || {};
                var items = config.items;
                if(items)
                {
                    var root = new Ext.tree.TreeNode();
                    for(var i=0;i<items.length;i++)
                    {
                        root.appendChild(new Ext.tree.TreeNode(Ext. apply({
                            listeners: {
                                'click': function(target, evt){
                                    evt.stopEvent();
                                    console.info(target);
                                    console.log(this);
                                }
                            }
                        }, items[i])));
                    }

                    config.items = [new Ext.tree.TreePanel({
                            autoScroll : true,
                            animate : true,
                            border : false,
                            rootVisible : false,
                            root : root
                        })];
                }
                MenuBlock.superclass.constructor.call(this, config);
            }
            Ext.extend(MenuBlock, Ext.Panel);

            Ext.onReady(function(){
                Ext.QuickTips.init();

                var menu = new Ext.Panel({
                    id : 'menu',
                    region : 'west',
                    title : Ext.get('menu').dom.title,
                    split : true,
                    //collapseMode: 'mini',
                    width : 200,
                    minSize : 125,
                    maxSize : 300,
                    collapsible : true,
                    margins : '0 0 -1 1',
                    layout : "accordion",
                    defaults: {
                        autoScroll: true,
                        border: false
                    },
                        items:[
                            new MenuBlock({
                                title: 'test block 1'
                                ,items: [
                                    {text: 'node1', href: 'node1.html'}
                                    ,{text: 'node2', href: 'node2.html'}
                                ]
                            })
                            ,new MenuBlock({
                                title: 'test block 2'
                                ,items: [
                                    {text: 'node3', href: 'node3.html'}
                                    ,{text: 'node4', href: 'node4.html'}
                                ]
                            })
                            ,new MenuBlock({
                                title: 'test block 3'
                                ,items: [
                                    {text: 'node5', href: 'node5.html'}
                                    ,{text: 'node6', href: 'node6.html'}
                                ]
                            })
                        ]
                    });

                var viewport = new Ext.Viewport( {
                    layout : 'fit',
                    items : [{id:"desktop",layout:"border",items:[menu, {region:'center'}]}]
                });
            });

        });
   </script>

</head>
<body>
<div id="menu" title="系统菜单"></div>
</body>
</html>