1. #1
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    25
    Vote Rating
    0
    JExtJS is on a distinguished road

      0  

    Default Toolbar menu hidden behind panel html

    Toolbar menu hidden behind panel html


    It works fine with normal html but has problem with the following html fragment:
    <object id="ADRViewer" classid="clsid:A662DA7E-CCB7-4743-B71A-D817F6D575DF" border="0" hspace="0" width="100%" height="100%">
    <param name='RibbonDisplayMode' value='RibbonNotShown'>
    <param name='CanvasToolbarEnabled' value='0'>
    <param name="src" value="DWM_DRAWING_SOURCE" />
    </object>

    which is used to embed Autodesk Design Review to display autocad drawing. Please see the attached file for a screenshot. There are two panels. The same menu works fine with the bottom panel which contains a simple html text while the top panel which use the html fragment above (contained in 'dwgObj.html' shown below) has problem displaying the menu. Here is the code:

    var adrViewPanel = Ext.create('AAA.view.drawing.AdrViewPanel', {
    itemId: 'adrViewPanel-' + dwgId,
    tbar: [{
    xtype: 'splitbutton',
    text: 'Test Menu',
    menu: Ext.create('Ext.menu.Menu', {
    items: [{
    text: 'Item One'
    }]
    })
    }],
    html: dwgObj.html
    });
    var formViewPanel = Ext.create('AAA.view.drawing.FormViewPanel', {
    html: "Form info for drawing, " + dwgObj.dwgDispName + ", will be displayed here!",
    tbar: [{
    xtype: 'splitbutton',
    text: 'Test Menu',
    menu: Ext.create('Ext.menu.Menu', {
    items: [{
    text: 'Item One'
    }]
    })
    }]
    });
    var dwgShowPanel = Ext.create('AAA.view.drawing.DrawingShowPanel', {
    title: dwgTitle,
    itemId: 'dwgShowPanel-' + dwgId,
    m_dwgTreeNode: dwgTreeNode,
    items: [adrViewPanel, formViewPanel]
    })

    menuHidden.png

  2. #2
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    25
    Vote Rating
    0
    JExtJS is on a distinguished road

      0  

    Default


    I just tried to bring the menu to front using zIndexManager in the 'expand' event listener. It turns out Ext.menu.Menu does not fire the event 'expand'. Is this a bug?

  3. #3
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    25
    Vote Rating
    0
    JExtJS is on a distinguished road

      0  

    Default


    Can anyone help me how I can force the menu to show? I tried zIndexManager, WindowManager and setting z-index directly but could not make it work. I also tried to have the toolbar separate from the panel that host the drawing image and have the toolbar added after the drawing is loaded. Nothing works.

    Not sure if this is a bug with the new Ext JS. We don't have this issue with the old Ext JS (2.x). Please! Can anyone offer any hint on what can be done? Thanks.

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    25
    Vote Rating
    0
    JExtJS is on a distinguished road

      0  

    Default


    It's actually blocking everything including pop-up windows. Again, it is not a problem with old Ext JS (before 3.0). Below, I re-posted all codes wrapped in CODE brackets.


    It works fine with normal html but has problem with the following html fragment:
    Code:
    <object id="ADRViewer"  classid="clsid:A662DA7E-CCB7-4743-B71A-D817F6D575DF" border="0"  hspace="0" width="100%" height="100%">
                    <param name='RibbonDisplayMode' value='RibbonNotShown'>
                    <param name='CanvasToolbarEnabled' value='0'>
                    <param name="src" value="DWM_DRAWING_SOURCE" />
                </object>
    which is used to embed Autodesk Design Review to display autocad drawing. Please see the attached file for a screenshot. There are two panels. The same menu works fine with the bottom panel which contains a simple html text while the top panel which use the html fragment above (contained in 'dwgObj.html' shown below) has problem displaying the menu. Here is the code:

    Code:
    var adrViewPanel = Ext.create('AAA.view.drawing.AdrViewPanel', {
                        itemId: 'adrViewPanel-' + dwgId,
                        tbar: [{
                            xtype: 'splitbutton',
                            text: 'Test Menu',
                            menu: Ext.create('Ext.menu.Menu', {
                                items: [{
                                    text: 'Item One'
                                }]
                            })
                        }],
                        html: dwgObj.html
                    });
                    var formViewPanel = Ext.create('AAA.view.drawing.FormViewPanel', {
                        html: "Form info for drawing, " + dwgObj.dwgDispName + ", will be displayed here!",
                        tbar: [{
                            xtype: 'splitbutton',
                            text: 'Test Menu',
                            menu: Ext.create('Ext.menu.Menu', {
                                items: [{
                                    text: 'Item One'
                                }]
                            })
                        }]
                    });
                    var dwgShowPanel = Ext.create('AAA.view.drawing.DrawingShowPanel', {
                        title: dwgTitle,
                        itemId: 'dwgShowPanel-' + dwgId,
                        m_dwgTreeNode: dwgTreeNode,
                        items: [adrViewPanel, formViewPanel]
                    })