의 ExtJS 4.2.1 - 모든 팝업 메뉴에 상단 화살표를 추가

Question

나는 다음과 같은 모양이있는 메뉴 만들 수있는 것 : 나는 CSS를 사용하여 배경 색상을 만들어 관리해야

과 모서리를 둥글게 게다가.

이제 상단 화살표를 추가하려고합니다.

메뉴 (화살표)에 요소를 추가하고 원래의 열린 위치를 이동하려면 어떻게해야합니까?

Answer 1

상단의 삼각형을 포함하도록 메뉴의 renderTpl을 수정할 수 있습니다. Ext.menu.Menu을 확장하는 클래스를 만드는 것이 좋습니다. this example을 참조하십시오.

Ext.define('Ext.menu.TriangleMenu', { 
    extend: 'Ext.menu.Menu', 

    initComponent: function() { 
     //get the original template 
     var originalTpl = Ext.XTemplate.getTpl(this, 'renderTpl'); 

     //add the triangle div (or img, span, etc.) 
     this.renderTpl = new Ext.XTemplate([ 
      '<div class="menu-triangle"></div>', 
      originalTpl.html,   //the html from the original tpl 
      originalTpl.initialConfig //the config options from the original tpl 
     ]); 

     this.callParent(); 
    }, 

    beforeSetPosition: function() { 
     //shift the menu down from its original position 
     var pos = this.callParent(arguments); 

     if (pos) { 
      pos.y += 5; //the offset (should be the height of your triangle) 
     } 

     return pos; 
    } 
}); 

어떻게 삼각형을 렌더링 하느냐는 전적으로 귀하에게 달려 있습니다. 이 깔끔한 작은 테두리 트릭을 사용하여 이미지를 사용하지 않고도 작업을 수행 할 수 있습니다.

.menu-triangle { 
    height: 0; 
    width: 0; 
    border-bottom: 5px solid black; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
}