Блог

Главная - Вопросы по программированию - Внешнее меню.Позиционирование меню

Внешнее меню.Позиционирование меню

#javascript #html #css #extjs

#javascript #HTML #css #extjs

Вопрос:

Я пытаюсь выровнять меню, которое я создал с помощью Ext.menu.Menu . Как вы можете видеть ниже, меню отображается на 1 пиксель справа от своего родительского элемента.

Меню не совсем правильное

Каков наилучший способ добиться идеального выравнивания?. Я кратко изучил getPostion() и setPosition() и я не уверен, что это правильный способ сделать это.

Мой код меню довольно простой:

 var userMenu = new Ext.menu.Menu({
    id: 'userMenu',
    width: 120,
    height: 70,
    items: [
        {
            text: 'My Settings',
            handler: settingsHandler                    
        },
        {
            text: 'Sign out',
            handler: signoutHandler         
        }   
        ]
    });     

       var menuHandler = function(e) { 
            userMenu.show('parent-menu');    
       }; 

       Ext.get('parent-menu').on('click',menuHandler);

Есть ли что-нибудь, что я могу сюда добавить? Заранее спасибо!

Комментарии:

1. Можете ли вы предоставить код, в котором вы используете userMenu объект?

2. Это странно. В каком браузере вы это видите? Если это IE, вы установили свой doctype?

3. Вижу то же самое в FF4, IE9, Chrome.

Ответ №1:

На данный момент удалось использовать jQuery после отображения меню, чтобы переместить его:

         var menuLeft = $('#userMenu').position().left;
        $('#userMenu').css('left',(menuLeft-1) "px");

Ответ №2:

Зачем вызывать show метод?
Вы могли бы просто сделать следующее, предполагая, что ваше меню находится на панели инструментов. 

 var userMenu = new Ext.menu.Menu({
  id: 'userMenu',
  width: 120,
  height: 70,
  items: [
    {
        text: 'My Settings',
        handler: settingsHandler                    
    },
    {
        text: 'Sign out',
        handler: signoutHandler         
    }   
  ]
});

    /*Define a toolbar */
    tbar: [{
        text: 'Menu',
        menu: userMenu /*no need to call userMenu.show()*/
    }]