Page 1 of 8 123 ... LastLast
Results 1 to 10 of 78

Thread: MenuPanel Extension (Ext Menu inside Panel)

  1. #1
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    2
      0  

    Default MenuPanel Extension (Ext Menu inside Panel)

    I keep updating this first post with the updated version of the extension and examples (see attachment)

    Extension goal:
    In my current working application, I'd like to use something similar to the Ext.Menu that look really good for the navigation of my website.

    Now, the tree works great in my opinion to use like a Menu, but I'd like to have MenuPanel like in my screenshot.


    After looking for some extensions, I haven't found anything, so I started thinking the best solution to achieve my goal, without reinvent the wheel.

    Now, the Menu in Ext is not a Component for now, I mean doesn' extend the Container Class or the Panel Class and the best solution could be to reimplement the Menu to work like a Panel.

    So I've created a MenuPanel extending the base class Panel and make it works with really a small amount of work.


    Development history:

    Version 1.0
    ****************
    ===== Added =====

    Ext.ux.MenuPanel
    -Added: initComponent override to include building the menu if it's bieng lazy rendered thanks to bhaidaya
    -Added: [fillHeight]: boolean new optional configuration parameter; If true, the Menu fills the Panel height

    ===== Added =====
    ****************

    Version 0.1
    ****************

    -Initial release

    ****************

    I hope this could be useful, I'm looking forward for feedbacks and suggestions for impoving this
    extension.

    Cheers
    Attached Images Attached Images
    Attached Files Attached Files
    Last edited by mabello; 2 Jun 2008 at 11:18 AM. Reason: Updating version (1.0)

  2. #2
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    2
      0  

    Default Lazy rendering

    I'v added this line of code to enable the lazy rendering of the component

    PHP Code:
     Ext.reg('menupanel',  Ext.ux.MenuPanel); 

  3. #3
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    2
      0  

    Default Example with complex l ayout and lazy rendering of MenuPanel

    MenuPanel inside accordion layout in complex layout example, using lazy rendering

    HTML Code:
    <html>
    <head>
      <title>Complex Layout</title>
    	<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        
        <!-- GC -->
     	<!-- LIBS -->
     	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
     	<!-- ENDLIBS -->
    
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
      
        <!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
    	<style type="text/css">
    	html, body {
            font:normal 12px verdana;
            margin:0;
            padding:0;
            border:0 none;
            overflow:hidden;
            height:100%;
        }
    	p {
    	    margin:5px;
    	}
        .settings {
            background-image:url(../shared/icons/fam/folder_wrench.png);
        }
        .nav {
            background-image:url(../shared/icons/fam/folder_go.png);
        }
        </style>
    	<script type="text/javascript">
    	Ext.ux.MenuPanel = function(config) {
            Ext.ux.MenuPanel.superclass.constructor.call(this, config);
    		if((typeof this.menu =='undefined') || this.menu == null)
    			throw 'you need to specify an instance of Menu in your cfg object';
    		this.menu.shadow = false;//We don't need shadow, do we?Besides, without this IE6 complain so...
     }
     
     Ext.extend(Ext.ux.MenuPanel, Ext.Panel, {
        
        afterRender: function(){
            Ext.ux.MenuPanel.superclass.afterRender.call(this);
            var el = this.menu.getEl();
            el.getShim();
            el.hideShim();
            this.body.appendChild(el);
            el.clearPositioning('auto');
            el.setWidth('100%');
            el.applyStyles({
                border: '0px'
            });
            el.show();
        },
    	
    	getMenu: function(){
    		return this.menu;
    	},
        
        //private
        beforeDestroy: function(){
            Ext.ux.MenuPanel.superclass.beforeDestroy.call(this);
            this.menu.destroy();
        }
     });
     
      Ext.reg('menupanel',  Ext.ux.MenuPanel);
      
        Ext.onReady(function(){
    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 menu1 = new Ext.menu.Menu({
            id: 'mainMenu1',
            items: [
                {
                    text: 'I like Ext',
                    checked: true
                },
                {
                    text: 'Ext for jQuery',
                    checked: true
                },
                {
                    text: 'I donated!',
                    checked:false
                }, '-', {
                    text: 'Radio Options',
                    menu: {        // <-- submenu by nested config object
                        items: [
                            // stick any markup in a menu
                            '<b class="menu-title">Choose a Theme</b>',
                            {
                                text: 'Aero Glass',
                                checked: true,
                                group: 'theme'
                            }, {
                                text: 'Vista Black',
                                checked: false,
                                group: 'theme'
                            }, {
                                text: 'Gray Theme',
                                checked: false,
                                group: 'theme'
                            }, {
                                text: 'Default Theme',
                                checked: false,
                                group: 'theme'
                            }
                        ]
                    }
                },{
                    text: 'Choose a Date',
                    iconCls: 'calendar'
                },{
                    text: 'Choose a Color'
                }
            ]
        });
    
    	var menu2 = new Ext.menu.Menu({
            id: 'mainMenu2',
            items: [
                {
                    text: 'I like Ext',
                    checked: true       // when checked has a boolean value, it is assumed to be a CheckItem
    
                },
                {
                    text: 'Ext for jQuery',
                    checked: true
                },
                {
                    text: 'I donated!',
                    checked:false
                }, '-', {
                    text: 'Radio Options',
                    menu: {        // <-- submenu by nested config object
                        items: [
                            // stick any markup in a menu
                            '<b class="menu-title">Choose a Theme</b>',
                            {
                                text: 'Aero Glass',
                                checked: true,
                                group: 'theme'
                            }, {
                                text: 'Vista Black',
                                checked: false,
                                group: 'theme'
                            }, {
                                text: 'Gray Theme',
                                checked: false,
                                group: 'theme'
                            }, {
                                text: 'Default Theme',
                                checked: false,
                                group: 'theme'
                            }
                        ]
                    }
                },{
                    text: 'Choose a Date',
                    iconCls: 'calendar'
                   
                },{
                    text: 'Choose a Color'
                }
            ]
        });
    	
    	var panelMenu1 = {
    		xtype: 'menupanel',
            title: 'My MenuPanel',
            collapsible:true,
            menu: menu1
        };
    	
    	var panelMenu2 = {
    		xtype: 'menupanel',
            title: 'My MenuPanel',
            collapsible:true,
            menu: menu2
        };
            Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
            
           var viewport = new Ext.Viewport({
                layout:'border',
                items:[
                    new Ext.BoxComponent({ // raw
                        region:'north',
                        el: 'north',
                        height:32
                    }),{
                        region:'south',
                        contentEl: 'south',
                        split:true,
                        height: 100,
                        minSize: 100,
                        maxSize: 200,
                        collapsible: true,
                        title:'South',
                        margins:'0 0 0 0'
                    }, {
                        region:'east',
                        title: 'East Side',
                        collapsible: true,
                        split:true,
                        width: 225,
                        minSize: 175,
                        maxSize: 400,
                        layout:'fit',
                        margins:'0 5 0 0',
                        items:
                            new Ext.TabPanel({
                                border:false,
                                activeTab:1,
                                tabPosition:'bottom',
                                items:[{
                                    html:'<p>A TabPanel component can be a region.</p>',
                                    title: 'A Tab',
                                    autoScroll:true
                                },
                                new Ext.grid.PropertyGrid({
                                    title: 'Property Grid',
                                    closable: true,
                                    source: {
                                        "(name)": "Properties Grid",
                                        "grouping": false,
                                        "autoFitColumns": true,
                                        "productionQuality": false,
                                        "created": new Date(Date.parse('10/15/2006')),
                                        "tested": false,
                                        "version": .01,
                                        "borderWidth": 1
                                    }
                                })]
                            })
                     },{
                        region:'west',
                        id:'west-panel',
                        title:'West',
                        split:true,
                        width: 200,
                        minSize: 175,
                        maxSize: 400,
                        collapsible: true,
                        margins:'0 0 0 5',
                        layout:'accordion',
                        layoutConfig:{
                            animate:true
                        },
                        items: [panelMenu1, panelMenu2]
                    },
                    new Ext.TabPanel({
                        region:'center',
                        deferredRender:false,
                        activeTab:0,
                        items:[{
                            contentEl:'center1',
                            title: 'Close Me',
                            closable:true,
                            autoScroll:true
                        },{
                            contentEl:'center2',
                            title: 'Center Panel',
                            autoScroll:true
                        }]
                    })
                 ]
            });
            Ext.get("hideit").on('click', function() {
               var w = Ext.getCmp('west-panel');
               w.collapsed ? w.expand() : w.collapse(); 
            });
        });
    	</script>
    </head>
    <body>
    <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
      <div id="west">
        <p>Hi. I'm the west panel.</p>
      </div>
      <div id="north">
        <p>north - generally for menus, toolbars and/or advertisements</p>
      </div>
      <div id="center2">
            <a id="hideit" href="#">Toggle the west region</a>
                <p>
                My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
            <p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
            <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
            <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
            <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
            <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
            <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
            <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
      </div>
      <div id="center1">
            <p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
            <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
            <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
            <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
            <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
      </div>
      <div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
      </div>
      <div id="south">
        <p>south - generally for informational stuff, also could be for status bar</p>
      </div>
    
     </body>
    </html>

  4. #4
    Ext User
    Join Date
    Oct 2007
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Amazing! I just happened to be looking for this same thing one day after you posted it. Thanks.

  5. #5
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    2
      0  

    Default you're welcome

    You are welcome aaronharder
    Just in time so .
    Thanks for your kind reply, I'm happy it is useful also for you!

  6. #6
    Sencha User Lobos's Avatar
    Join Date
    Oct 2007
    Location
    Sao Paulo, Brazil
    Posts
    461
    Vote Rating
    0
      0  

    Default

    Kudos Mabello, I really needed menus in panels as well - I knew it would look awesome like this, I really think this type of functionality should be introduced into the core, in fact I am going to suggest this in the Feature Requests forum.

    -Lobos

  7. #7
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    2
      0  

    Default Sounds good

    Thanks Lobos,
    I'm happy the extension is useful, and if you apply custom theme to the menu it looks really cool! [I've tried only the black theme (it's an extension theme) for the menu, and it looks great].

  8. #8
    Ext User precariouspanther's Avatar
    Join Date
    Feb 2008
    Location
    Sydney, Australia
    Posts
    37
    Vote Rating
    0
      0  

    Default

    Great work Mabello - I needed this kind of thing for an accordion menu in our application. Big thumbs up

  9. #9
    Ext JS Premium Member
    Join Date
    Feb 2008
    Location
    France, Paris
    Posts
    38
    Vote Rating
    0
      0  

    Thumbs up

    Big up too!!! Love this new Menu class!

  10. #10
    Sencha User Lobos's Avatar
    Join Date
    Oct 2007
    Location
    Sao Paulo, Brazil
    Posts
    461
    Vote Rating
    0
      0  

    Default

    There is also this integration as well which may be of interest, maybe these two solutions could be merged in one collaboration.

    Quote Originally Posted by Animal View Post
    I have posted some code which makes Menu extend Ext.Container.

    http://extjs.com/forum/showthread.php?t=26395

    It still creates a free-floating Layer, but I think that could be configurable.
    -Lobos

Page 1 of 8 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •