1. #1
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    9
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default ModuleMenu component. Need help

    ModuleMenu component. Need help


    Hey guys,

    Im trying to create a kind of customized menu for browsing different modules.
    Its going to look something like this


    The part with compose etc it it will be shown only if you hover your mouse over for example the mail "baseitem". The subitems at the bottom right will only show if you hover your mouse over one of the items in the bottomleft. Well, the picture says enough i guess.

    I want to be able to create a modulemenu something like this:
    Code:
                    var ModuleMenu = new Ext.modulemenu.ModuleMenu({
                        items: [
                            {
                                icon: 'mail2.png',
                                title: 'Mail',
                                subtitle: 'centre',
                                items: [
                                    {
                                        icon: 'mail_new.png',
                                        title: 'Compose',
                                        items: [
                                            {title: 'subitem 1'},
                                            {title: 'subitem 2'},
                                            {title: 'subitem 3'}
                                        ]
                                    }, {
                                        icon: 'users.png',
                                        title: 'Compose',
                                        items: [
                                            {title: 'subitem 1'},
                                            {title: 'subitem 2'},
                                            {title: 'subitem 3'}
                                        ]
                                    }
                                ]
                            }
                        ]
                    });
    
                    new Ext.modulemenu.ModuleMenuBlock('communication', {title: 'Communication'});
    I created ModuleMenuBlock wich looks like this:
    Code:
    Ext.modulemenu.ModuleMenuBlock = function(renderTo, config){
        config = config || {};
        if(typeof config == 'string'){
            this.title = config;
        }else{
            Ext.apply(this, config);
        }
    
        if(renderTo) {
            this.render(renderTo, config);
        }
    };
    
    
    Ext.extend(Ext.modulemenu.ModuleMenuBlock, Ext.util.Observable, {
        render : function(renderTo, config) {    
            this.el = Ext.get(renderTo, true);
            if(!this.el && config && config.autoCreate){
                if(typeof config.autoCreate == 'object'){
                    if(!config.autoCreate.id){
                        config.autoCreate.id = el;
                    }
                    this.el = Ext.DomHelper.append(document.body,
                                config.autoCreate, true);
                }else{
                    this.el = Ext.DomHelper.append(document.body,
                                {tag: 'div', cls: 'x-nav-menu', id: el}, true);
                }
            }
    
            var wrap = this.el.wrap({cls: 'x-nav-block'});
    
            if(this.title) {
                var tpl = new Ext.Template(
                    '<div class="x-nav-block-hd">',
                            '<p class="x-nav-block-hd-left"></p>{0:capitalize}<p class="x-nav-block-hd-right"></p>',
                    '</div>'
                );
                var hd = tpl.insertBefore(this.el.dom, [this.title], true);
                hd.unselectable();
                this.hdEl = hd;
            }
    
            this.menuEl = this.el;
            this.el = wrap;
    
            //this.menuEl.appendChild(this.menu.dom);
        }
    });
    You can check what i have already here
    http://85.146.0.228/components/modulemenu/

    My question is. What component from Ext do you think i should use to create the customized menu.
    I was thinking about the Menu component and change its behaviour for this particular situation but i dont really know where to start.

    Hope somebody knows a good way for me to start.

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    Personally I would use a toolbar and wired up mouseover/out events and then use menus. You can customize the look with css.

Similar Threads

  1. New DatePicker component
    By Animal in forum Community Discussion
    Replies: 12
    Last Post: 17 Oct 2009, 1:47 AM
  2. how to add tab component
    By eemerge in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 25 Mar 2007, 7:39 PM
  3. Can I do it with the new Tree component?
    By franklt69 in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 20 Jan 2007, 12:01 PM

Thread Participants: 1