2012-11-20 2 views
0

간단히 말해, 테이블 위에 떠 다니는 드롭 다운 메뉴를 표시하고 표 셀 내부에서 렌더링하지 않는 방법은 무엇입니까?표 셀 위로 Dojo DropDownMenu를 플로트하는 방법

나는 테이블 셀 내부의 드롭 다운 메뉴를 표시하려면이 예제 코드를 사용하고 있습니다 : DropDownMenu"dijit/DropDownMenu"MenuItem입니다

window.someObj.showSocs = function(index){ 
    var pSubMenu = new DropDownMenu({}); 
    pSubMenu.addChild(new MenuItem({ 
    label: "Cut", 
    iconClass: "dijitEditorIcon dijitEditorIconCut" 
    })); 
    pSubMenu.addChild(new MenuItem({ 
    label: "Copy", 
    iconClass: "dijitEditorIcon dijitEditorIconCopy" 
    })); 
    pSubMenu.addChild(new MenuItem({ 
    label: "Paste", 
    iconClass: "dijitEditorIcon dijitEditorIconPaste" 
    })); 

    pSubMenu.placeAt("socs-" + index.toString()); 
    pSubMenu.startup(); 
} 

"dijit/MenuItem"입니다.

var link = document.createElement("a"); 
var linkText = "javascript:someObj.showSocs(" + index + ")"; 
link.setAttribute("href", linkText); 
link.innerHTML = "DropNew"; 
td.appendChild(link); 
td.setAttribute("id", "socs-" + index.toString()); 

지금은 클릭 할 때 : 다음

나는 (그것이 dgrid renderCell의 함수 내에서 실행 있어요하지만 내가이 문제와 관련이 없습니다 생각) 테이블 셀에 대한 링크를 추가하려면이 코드를 사용하고 링크는 드롭 다운이 렌더링되지만 테이블 셀 안쪽에는 렌더링되지 않습니다. 이로 인해 현재 테이블 행이 확장됩니다. 나는 그것이 이해할 수없는 몇 가지 CSS 속성에 있다고 생각한다. 나는 CSS 속성을 재정의하지 않으므로 드롭 다운이 셀 내부가 아닌 테이블 위에 자동으로 배치 될 것으로 예상됩니까?

답변

3

메뉴 노드를 셀에 배치하여 셀을 확장합니다. 메뉴를 <body>에 배치하고 필수 노드 주위에 dijit/place의 도움으로 절대적으로 배치 할 수 있습니다.

내가 컨텍스트 메뉴에 대한 내장 기능을 사용하는 것, 예컨대 :

// var Menu = require("dijit/Menu"); 
var menu = new Menu({ 
    leftClickToOpen: true, 
    targetNodeIds: ["table1"], 
    selector: "a.dropNew" 
}); 

것은 직접보기 : http://jsfiddle.net/phusick/TBWXL/

enter image description here

+0

와우, 훌륭한, 많은 감사를! – Amiramix