1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    22
    Vote Rating
    0
    sdetweil is on a distinguished road

      0  

    Default Grid context menu, columns extended menu

    Grid context menu, columns extended menu


    when using the default grid context menu, and selecting the columns, link, then extended menu appears at the top of the screen not next to the source context menu.. of course this makes it impossible to get to cause once you mouse out, oops, its gone..

    this is under the CFGrid code, do we know if this is fixed in 2.0 and where is this context menu code? this is the one part of OO I hate, finding the parent/root behavior..

    also, on IE 6 & 7 , this menu text is misaligned, mouseover cleans it up, clipped on the right side, on FireFox and Safari it is ok..
    Oh, and on Firefox, when you click off the grid context menu the whole page is scrolled to the top.. and the grid is at the bottom, now offpage..

    thanks..

    Sam

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Post your code and a picture of the problem?

  3. #3
    Ext User
    Join Date
    Mar 2008
    Posts
    22
    Vote Rating
    0
    sdetweil is on a distinguished road

      0  

    Default


    attached, the grid menu and the sub menu are circled.

    here is the code
    Code:
    init(){
    grid.addListener("rowcontextmenu", menus);
    }
    	
    
    	function menus(grid, rowIndex, e) {
                              // create the menu container
        		var contextMenu = new Ext.menu.Menu();
                              // add two sub items
    		contextMenu.add({text:"Edit Record",handler:onClick});
    		contextMenu.add({text:"View Record",handler:onClick});
    
    		// Stops the browser context menu from showing. 
    		e.stopEvent();  // this stops the browser and allows the default grid  
                                                   // context menu
    		// show the row context menu here
    		contextMenu.showAt(e.xy);
    	}
    gridprob is the grid context/subcontext mis alignment
    contextalign and submenuclip are the two menus as popped up without mouse over
    the last two, are these two, after mousing over. note that the row context gets a shadow after the mouse over..
    Attached Images
    Last edited by mystix; 31 Mar 2008 at 5:41 PM. Reason: use [code][/code] tags

  4. #4
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Why did you post this in the bugs forum? I just realized that. This is not a bug, and even if it were you should get confirmation in help forum before posting bugs.

    I don't see where you get the coordinates xy before using them.

  5. #5
    Ext User
    Join Date
    Mar 2008
    Posts
    22
    Vote Rating
    0
    sdetweil is on a distinguished road

      0  

    Default


    Why the Bugs forum? Well the default grid context and its sub menu misalignment is all standard code, which doesn't appear to work, and nothing in my code controls it..

    the menu text clipping is also not in my code, but in the base menu handler/renderer..

    the rowcontext xy is provided in the rowcontext Event parameter.
    Code:
    contextMenu.showAt(e.xy);
    This wasn't a HOW do I do it, this was, its broke, how do I fix it..

    Sam
    Last edited by mystix; 31 Mar 2008 at 5:41 PM. Reason: use [code][/code] tags

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Ok, so you're saying you did something like the following and it did not work and you sought help / confirmation in the help forums before posting a bug?
    Code:
    contextMenu.showAt(e.get(XY));

  7. #7
    Ext User
    Join Date
    Mar 2008
    Posts
    22
    Vote Rating
    0
    sdetweil is on a distinguished road

      0  

    Default


    Well, the context menu appeared in the right spot, so it wasn't the
    contextMenu.showAt(e.xy);

    Sam

  8. #8
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    So is this a bug? If not, change your first post to [closed] or something.

  9. #9
    Ext User
    Join Date
    Mar 2008
    Posts
    22
    Vote Rating
    0
    sdetweil is on a distinguished road

      0  

    Default


    Ok, so it looks like a bug to me, calculating the new menu position incorrectly,

    I used meaningful names to make it more readable(bad for the min file, ). This will now correctly handle both horrizontal and vertical menus, and at the lower right edge when the menu would exceed the viewport in both directions.

    also, one change to the source/widgets/GridView.js matching the change already done in ExtJS 2.0 to make the horizontal menu stay in the viewport
    Code:
        handleHdCtx : function(g, index, e){
            e.stopEvent();
            var hd = this.getHeaderCell(index);
            this.hdCtxIndex = index;
            var ms = this.hmenu.items, cm = this.cm;
            ms.get("asc").setDisabled(!cm.isSortable(index));
            ms.get("desc").setDisabled(!cm.isSortable(index));
            if(this.grid.enableColLock !== false){
                ms.get("lock").setDisabled(cm.isLocked(index));
                ms.get("unlock").setDisabled(!cm.isLocked(index));
            }
            this.hmenu.show(hd, "tl-bl?");  //<---- add the '?', same as ExtJS 2.0
        },
    
    here is the corrected code in source/core/Element.js, (add 2 functions, rewrite 1)
    
    GetAbsWindowBottom: function()
       {
        // Compute the bottom of the popup window and the bottom of
        // the browser window, in absolute co-ordinates - different
        // on all browsers but the below should be accurate usually!
     
        var abswindowbottom = 0;
        if (typeof(window.innerHeight) == 'number')
            abswindowbottom = window.innerHeight;
        else if (document.documentElement && document.documentElement.clientHeight)
            abswindowbottom = document.documentElement.clientHeight;
        else if (document.body && document.body.clientHeight)
            abswindowbottom = document.body.clientHeight;
     
        if (typeof(window.pageYOffset) == 'number')
            abswindowbottom = abswindowbottom + window.pageYOffset;
        else if (document.body && document.body.scrollTop)
            abswindowbottom = abswindowbottom + document.body.scrollTop;
        else if (document.documentElement && document.documentElement.scrollTop)
            abswindowbottom = abswindowbottom + document.documentElement.scrollTop;
        return abswindowbottom;
       },
     GetAbsWindowRight: function()
       {
        // Compute the bottom of the popup window and the bottom of
        // the browser window, in absolute co-ordinates - different
        // on all browsers but the below should be accurate usually!
     
        var abswindowright = 0;
        if (typeof(window.innerWidth) == 'number')
            abswindowright = window.innerWidth;
        else if (document.documentElement && document.documentElement.clientWidth)
            abswindowright = document.documentElement.clientWidth;
        else if (document.body && document.body.clientWidth)
            abswindowright = document.body.clientWidth;
     
        if (typeof(window.pageXOffset) == 'number')
            abswindowright = abswindowright + window.pageXOffset;
        else if (document.body && document.body.scrollLeft)
            abswindowright = abswindowright + document.body.scrollLeft;
        else if (document.documentElement && document.documentElement.scrollLeft)
            abswindowright = abswindowright + document.documentElement.scrollLeft;
        return abswindowright;
       },
    
    
        /**
         * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
         * supported position values.
         * @param {String/HTMLElement/Ext.Element} element The element to align to.
         * @param {String} position The position to align to. 
         * @param {Array} offsets (optional) Offset the positioning by [x, y]
         * @return {Array} [x, y]
         */
        getAlignToXY : function(alignTo_element, position_rules, explicit_offset){
            alignTo_element = Ext.get(alignTo_element), d = this.dom;
            if(!alignTo_element.dom){
                throw "Element.alignTo with an element that doesn't exist";
            }
            var keep_within_viewport = false; //constrain to viewport
            var offset_delta = 5;
            var our_corner_rules = "", align_to_rules = "";
            var border_width=d.offsetWidth ? 18 : 0;
            explicit_offset = explicit_offset || [0,0];
    
            // if no rules specified, use (our) TopLeft to (their)BottomLeft
            // assumes our menu is UNDER the other one
            if(!position_rules){
                position_rules = "tl-bl";
            // if only "keep within the viewport"
            }else if(position_rules == "?"){
                // assume our menu is UNDER the other one and constrained in viewport
                position_rules = "tl-bl?"; 
            // if only one rule specified,
            // assume it is the target element alignment point,
            }else if(position_rules.indexOf("-") == -1){
                // ours will be top left (under or right)
                position_rules = "tl-" + p;
            }
            // all lower case for the rest of the code
            position_rules = position_rules.toLowerCase();
    
            // parse the position options string
            var m = position_rules.match(/^([a-z]+)-([a-z]+)(\?)?$/);
    
            // if nothing found, then we have a big problem
            if(!m){
               throw "Element.alignTo with an invalid alignment " + p;
            }
    
            // get the rules segments
            our_corner_rules = m[1], align_to_rules = m[2], keep_within_viewport = m[3] ? true : false;
    
            //Subtract the aligned el"s internal xy from the target"s offset xy
            //plus custom offset to get the aligned el's new offset xy
    
            // get our alignment point
            var a1 = this.getAnchorXY(our_corner_rules, true);
    
            // get the target element alignment point
            var a2 = alignTo_element.getAnchorXY(align_to_rules, false);
    
            // calculate the position deltas, left/right (x), top/bottom (y)
            var x = a2[0] - a1[0] + explicit_offset[0];
            var y = a2[1] - a1[1] + explicit_offset[1];
            
            if(keep_within_viewport==true){
                
               // our absolute bottom edge
               var abspopupbottom = y + this.getHeight() + offset_delta;
               // our absolute right edge
               var abspopupright = x + this.getWidth() + offset_delta;
               // bottom of window absolute position
               var abswindowbottom = this.GetAbsWindowBottom()-border_width;
               // right edge of window absolute position
               var windowWidth = this.GetAbsWindowRight()-border_width;
               
               // If menu goes outside the viewport, down or right, move it
               if (abspopupbottom > abswindowbottom || abspopupright>windowWidth ){
                  //
                  // If we exceed a viewport boundary and 
                  // the to be aligned el is anchored on the target el border that is perpendicular to the viewport border, 
                  // allow the aligned el to slide on that border,
                  // otherwise 
                  // swap the to be aligned el to the opposite border of the target el
                  // watch out for both viewport boundaries
                  //
                  var our_corner_rulesY = our_corner_rules.charAt(0), our_corner_rulesX = our_corner_rules.charAt(our_corner_rules.length-1);
                  var align_to_rulesY = align_to_rules.charAt(0), align_to_rulesX = align_to_rules.charAt(align_to_rules.length-1);
                  // if one is top and the other is bottom, we could swap
                  var swapY = ((our_corner_rulesY=="t" && align_to_rulesY=="b") || (our_corner_rulesY=="b" && align_to_rulesY=="t"));
                  // if one is left and one is right, we could sawp
                  var swapX = ((our_corner_rulesX=="r" && align_to_rulesX=="l") || (our_corner_rulesX=="l" && align_to_rulesX=="r"));
                  // work variable
                  var xy = "";
    
                  // if the menu will be off screen to the right
                  if (abspopupright>windowWidth) {
                     // and we support swapping it completely on the other side
                     if(swapX){
                        // then swap the alignment rules, and re-calculate
                        xy = this.getAlignToXY(alignTo_element,align_to_rules+"-"+our_corner_rules+keep_within_viewport, explicit_offset);
                        x=xy[0]; y=xy[1];
                        // watch out for the other dimension adjust, right AND bottom
                        if(abspopupbottom > abswindowbottom){
                           y = y - (abspopupbottom - abswindowbottom);
                        }
                        return [x,y];
                     }
                     // othewise we need to slide adjust the difference.
                     else
                       x = x - (abspopupright - windowWidth);
                  }
                  // if the menu would be off screen to the bottom
                  if(abspopupbottom > abswindowbottom){
                     // and we support swapping it completely on the other side
                     if(swapY){
                        // then swap the alignment rules, and re-calculate
                        xy = this.getAlignToXY(alignTo_element,align_to_rules+"-"+our_corner_rules+keep_within_viewport, explicit_offset);
                        x=xy[0]; y=xy[1];
                        // watch out for the other dimension adjust, bottom AND right
                        if (abspopupright>windowWidth){
                           x = x - (abspopupright - windowWidth);
                        }
                        return [x,y];
                     }
                     // otherwise we need to slide adjust the difference
                     else
                       y = y - (abspopupbottom - abswindowbottom);
                  }
               }
            }       
            return [x,y];
        },
    This has been tested in IE6 , 7, Firefox 2, Safari. In Opera 9.23 I am unable to get mouse clicks thru.

    Sam
    Last edited by mystix; 6 Apr 2008 at 6:09 PM. Reason: use [code][/code] tags, not <pre></pre> tags!

  10. #10
    Ext User
    Join Date
    Mar 2008
    Posts
    22
    Vote Rating
    0
    sdetweil is on a distinguished road

      0  

    Default


    I should note that the same bad code exists in EXT 2.0 as well.

    Sam

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar