Page 5 of 5 FirstFirst ... 345
Results 41 to 49 of 49

Thread: BorderLayout + Menu

  1. #41

    Default

    An my answer is what i was hoping to read. It would have saved plenty of my time.

    And i didn't read anything about the IconMenuItem in your answer.

    Well, anyway, I also modified the yahoo ui code in "menu.js".

    Because i created a menu and on of my menu items opens a dialog box. It works, but the menu does not disappear after my click. To close all the opened menus, I added code in the menu.js code, starting with my menuitem, and going up each parent level, closing the elements of Menu type, and stopping when I reach the MenuBarItem element.

    If someone is interested, I'll post tomorrow (I left work now, and my code stayed there )

  2. #42

    Default

    Another thing, I had my menubar working along with the BorderLayout in Firefox, but it fails in IE7.
    The menu is actually working, but it's still hidden behind the border layout.

    Any info about how to fix it also for IE?

    (I'm developping a Java server side code, with Eclipse, which uses a IE engine for internal execution of web apps. So I see the error in Eclipse. And anyway, users may use IE, so it has to work).

    Jack? someone? any hint on the point to look at in the code?

  3. #43
    Ext User
    Join Date
    Mar 2007
    Posts
    1

    Default

    Jack:

    I have just started playing with Yahoo ext (and the core). I know you must be getting tired of hearing this, but well done once again. This has just shaved off atleast 3 months of development for a project I am working on. Cant believe I didnt find this sooner!!

    vk_phoenixfr:

    I tried what you had mentioned. In fact, here is the code that I am trying to execute (I am using the application menu bar example from the Yahoo UI site as a template):

    -----------SCRIPTING SIDE-------------

    <link rel="stylesheet" type="text/css" href="js/yui/build/reset/resets.css" />
    <link rel="stylesheet" type="text/css" href="js/yui/build/fonts/fonts.css" />
    <link rel="stylesheet" type="text/css" href="js/yui/build/container/assets/container.css" />
    <link rel="stylesheet" type="text/css" href="js/yui/build/assets/menu.css" />

    <script type="text/javascript" src="js/yui/build/utilities/utilities.js"></script>
    <script type="text/javascript" src="js/yui/build/yahoo/yahoo.js"></script>
    <script type="text/javascript" src="js/yui/build/event/event.js"></script>
    <script type="text/javascript" src="js/yui/build/dom/dom.js"></script>
    <script type="text/javascript" src="js/yui/build/container/container.js"></script>
    <script type="text/javascript" src="js/yui/build/menu/menu.js"></script>
    <script type="text/javascript" src="js/menu2.js"></script>


    <link rel="stylesheet" type="text/css" href="js/yui-ext/resources/css/reset-min.css" />
    <link rel="stylesheet" type="text/css" href="js/yui-ext/resources/css/tabs.css"/>
    <link rel="stylesheet" type="text/css" href="js/yui-ext/resources/css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="js/yui-ext/resources/css/grid.css"/>

    <script type="text/javascript" src="js/yui-ext/yui-ext.js"></script>
    <script language="javascript" src="js/yui-ext/examples/grid/PropsGrid.js"></script>



    <script type="text/javascript">

    /**
    * Constant representing the path to the image to be used for the
    * submenu arrow indicator.
    * @final
    * @type String
    */
    YAHOO.widget.MenuBarItem.prototype.SUBMENU_INDICATOR_IMAGE_PATH =
    "promo/m/irs/blank.gif";


    /**
    * Constant representing the path to the image to be used for the
    * submenu arrow indicator when a MenuBarItem instance is selected.
    * @final
    * @type String
    */
    YAHOO.widget.MenuBarItem.prototype.SELECTED_SUBMENU_INDICATOR_IMAGE_PATH =
    "promo/m/irs/blank.gif";


    /**
    * Constant representing the path to the image to be used for the
    * submenu arrow indicator when a MenuBarItem instance is disabled.
    * @final
    * @type String
    */
    YAHOO.widget.MenuBarItem.prototype.DISABLED_SUBMENU_INDICATOR_IMAGE_PATH =
    "promo/m/irs/blank.gif";

    Example = function()
    {
    var layout;
    var menuBar;

    var aItemData =
    [
    {
    text:"File",
    submenu:
    {
    id:"filemenu",
    itemdata:
    [
    { text:"New File", helptext:"Ctrl + N" },
    "New Folder",
    { text:"Open", helptext:"Ctrl + O" },
    {
    text:"Open With...",
    submenu:
    {
    id:"applications",
    itemdata:
    [
    "Application 1",
    "Application 2",
    "Application 3",
    "Application 4"
    ]
    }
    },
    { text:"Print", helptext: "Ctrl + P" }
    ]
    }
    },
    {
    text:"Edit",
    submenu:
    {
    id: "editmenu",
    itemdata:
    [
    [
    { text:"Undo", helptext: "Ctrl + Z" },
    { text:"Redo", helptext: "Ctrl + Y", disabled: true }
    ],
    [
    { text:"Cut", helptext: "Ctrl + X", disabled: true },
    { text:"Copy", helptext: "Ctrl + C", disabled: true },
    { text:"Paste", helptext: "Ctrl + V" },
    { text:"Delete", helptext: "Del", disabled: true }
    ],
    [ { text:"Select All", helptext: "Ctrl + A" } ],
    [
    { text:"Find", helptext: "Ctrl + F" },
    { text:"Find Again", helptext: "Ctrl + G" }
    ]
    ]
    }
    },

    "View",

    "Favorites",

    "Tools",

    "Help",

    { text:"Examples Home", url:"index.html" }

    ];

    return {
    init : function(){

    layout = new YAHOO.ext.BorderLayout('container', {
    hideOnLayout: true,
    north:
    {
    split:false,
    initialSize: 25,
    titlebar: false
    },
    west: {
    split:true,
    initialSize: 600,
    minSize: 175,
    maxSize: 800,
    titlebar: true,
    collapsible: true,
    animate: true
    },
    east: {
    split:true,
    collapsed: true,
    initialSize: 100,
    minSize: 175,
    maxSize: 400,
    titlebar: true,
    collapsible: true,
    animate: true
    },
    south: {
    split:true,
    initialSize: 100,
    minSize: 50,
    maxSize: 200,
    titlebar: true,
    collapsible: true,
    animate: true
    },
    center: {
    titlebar: true,
    autoScroll:true
    }
    });

    var propsGrid = new YAHOO.ext.grid.PropsGrid('props-panel');
    // bogus object as a data source
    propsGrid.setSource({
    "(name)": "Properties Grid",
    "grouping": false,
    "autoFitColumns": true,
    "productionQuality": false,
    "created": new Date(Date.parse('10/15/2006')),
    "tested": false,
    "version": .01,
    "borderWidth": 1
    });
    propsGrid.render();

    layout.beginUpdate();
    layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
    layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'South', closable: true}));
    layout.add('west', new YAHOO.ext.GridPanel(propsGrid, {title: 'West Panel', closable: false}));
    layout.add('east', new YAHOO.ext.ContentPanel('east', {title: 'East'}));
    layout.add('center', new YAHOO.ext.ContentPanel('center', {title: 'Center Panel', closable: false}));

    menuBar = new BorderLayoutMenuBar("MenuBar", { itemdata: aItemData } );
    menuBar.render();
    menuBar.show();
    // menuBar.render('north');

    layout.getRegion('center').showPanel('center');
    layout.endUpdate();
    },
    }
    }();

    YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);

    </script>


    ------------HTML SIDE------
    <body>
    <div id ="container">
    <div id="east" class="ylayout-inactive-content">
    Hi. I'm the east panel.
    </div>
    <div id="north" class="ylayout-inactive-content">
    <div id = MenuBar" class = yuimenubar> </div>
    </div>
    <div id="center" class="ylayout-inactive-content">
    <hr>
    <hr>
    <hr>
    </div>
    <div id="props-panel" class="ylayout-inactive-content" style="width:200px;height:200px;overflow:hidden;">
    </div>
    <div id="south" class="ylayout-inactive-content">
    Place informational stuff and/or status bar here.
    </div>
    </div>
    </body>


    -----------

    But the menu is totally out of whack. I am seeing each menu in the menubar on its own row instead them being laid out in columns (as in the example). How are you actually creating the (contents of) the menubar in the first place?

    Sorry for the long post. Would appreciate any help you can provide.

    Cheers
    Sri

  4. #44

    Default CSS Fix for YUI Menu Widget Clipping

    I encountered this problem several days ago, before finding this thread, so I figured I'd put up my solution to the problem.

    In my solution, I simply wrote the YUI Menu to a Content Panel in the North region like normal, and then I adjusted the North region's styles, removing the clipping effect.

    Code:
    div.x-layout-panel-north,
    div.x-layout-panel-north div.x-layout-panel-body  {
        overflow:visible !important;
    }
    #menu-panel {
        position:absolute;
    }
    div.yuimenu ul {
        display:inline;
    }

  5. #45

    Default

    I found that adding a z-index:9000; style to the .yuimenu class helped to pop the menus on top of the other parts of the BorderLayout. Otherwise, the edited version of paultyng's subclasses worked just fine. Still have to tweak the position of the sub-menus to eliminate a gap from their parents.

  6. #46
    Ext JS Premium Member jared's Avatar
    Join Date
    Mar 2007
    Posts
    14

    Default Safari

    Has anyone gotten this to work in Safari? It works great in Firefox, but safari still displays the menus behind the contentPanels in the BorderLayout. I've tried all of the fixes here, but nothing helps.

  7. #47
    Ext User
    Join Date
    Mar 2007
    Posts
    2

    Default

    Like everyone else, I have the problem of a menu in the north panel being behind all the others.

    So following all the examples I modified the _onMouseOver function in menu.js.

    What I see now is the menu appearing above the 'centre' panel of the border layout but behind the 'west' panel. The top of the menu is also behind the 'north' panel, as the menu bar is not right at the bottom of the 'north' panel. So a best I see all but the top menu item or when the west panel is used; nothing at all.

    I also implemented the BorderLayoutMenu class posted by 'paultyng' which does exactly the same of above. Also used the style sheet provided by jack which uses a high z-index value for .yuimenu like the other suggestions, all to no avail.

    Any suggestions please?

    If it makes any difference I am using YUI 2.2 and YUI ext 0.33

    Cheers

  8. #48
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    I suggest waiting until the MenuBar class makes it into a forthcoming rev of Ext 1.0.

    Then you can use the simpler, cleaner, smaller, easier and prettier Ext Menu system.

  9. #49
    Ext User
    Join Date
    Mar 2007
    Posts
    2

    Default

    After a bit of trial and error I finally got around to setting the right attribute to bring the menus to the top and is was the zIndex after all.
    So for example, using the topnavfromjs.html example from YUI

    Code:
    this.getItem(0).cfg.setProperty("submenu", { id:"communication", itemdata: oSubmenuData["communication"], zIndex: 10000 });
    Tried and failed to do it through the style sheet though.

    Hope this helps someone out there.

Page 5 of 5 FirstFirst ... 345

Similar Threads

  1. BorderLayout + ASPX + Telerik Menu
    By jgombala in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 27 Jun 2008, 1:42 PM
  2. Button with Menu (menu auto show/hide)
    By fafhrd in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 23 Mar 2007, 12:19 AM
  3. Ext.menu.Menu.items: How to add a handler to existing items?
    By oxi in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 15 Mar 2007, 10:49 PM
  4. modal dialog and borderlayout inside a borderlayout tab!!!
    By vtswingkid in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 22 Feb 2007, 4:40 PM

Posting Permissions

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