Extjs 4.2 перемещает кнопку в фиксированное место в приложении

Я использую ExtJs 4.2.

В моем приложении должна быть кнопка, которая будет вызывать панель, которая после нажатия отображает дерево навигации.

Эта кнопка должна быть видна все время и располагаться по центру по вертикали посередине и справа от экрана.

Как добиться такого поведения? Я не хочу вставлять кнопку в панель, она должна быть частью окна просмотра...

Вот что я пробовал:

Ext.define('NG.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    id: 'appviewport',
    items: [{
        itemId: 'app-header',
        xtype: 'appheader',
        region: 'north',
        weight: 10,
        border: false,
        height: 60
    }, {
        itemId: 'navigation',
        xtype: 'button',
        region: 'west',
        weight:15
    }, {
        xtype: 'carddeckmanager',
        region: 'center',
        weight:10,
        border: false,
        cls:'n-cardmanager-box',
        items: [{
            itemId: 'dashboard',
            xtype: 'dashboard'
        }]
    }]
});

но это заставляет кнопку расширяться по высоте окна просмотра.


html css extjs extjs4.2
person AMember    schedule 23.07.2013    source источник
comment
вы пробовали, пожалуйста, обновите jsfiddle?   -  person Falguni Panchal    schedule 23.07.2013
comment
Мы поняли ваше требование, но мы не можем предоставить код для вашего требования. Попробуйте и придумайте код, если у вас возникнут какие-либо проблемы.   -  person Hariharan    schedule 23.07.2013

Ответы (1)


arrow_upward
9
arrow_downward

Если вы действительно хотите плавать эту кнопку, нет смысла добавлять ее в контейнер или область просмотра. Визуализируйте его в тело документа, настройте его с помощью floating: true и присвойте ему z-индекс, который гарантирует, что он останется над любым окном (если вы этого хотите).

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

Все это дает нам:

var body = Ext.getBody();

// Create the button
var button = Ext.widget('button', {
    text: "Yo"
    ,floating: true
    ,renderTo: body
});

// z-index
// Ext4's windows default z-index starts from 29000
button.setZIndex(40000);

// Anchor the right of the button to the right of the document body
// with a 5px horizontal offset.
button.anchorTo(body, 'r-r', [-5, 0]);

Поместите этот код где-нибудь в процессе запуска вашего приложения. Кандидатами могут быть метод init вашего приложения, метод initComponent вашего окна просмотра или один прослушиватель afterrender в окне просмотра...

Теперь, если вы хотите, чтобы кнопка оставалась видимой на правой границе области просмотра, но не заполняла всю область, вам нужно поместить ее в контейнер с соответствующим макетом. Например, добавьте это в окно просмотра:

{    
    region: 'west',
    layout: {type: 'hbox', pack: 'center', align: 'middle'},
    items: [{
        xtype: 'button',
        text: "Viewport button"
    }]
}
person rixo    schedule 23.07.2013
comment
как я могу остановить перетаскивание панели во время прокрутки страницы, я попытался установить для плавающего значение false, и это не сработало? Мне не нужно, чтобы панель двигалась при прокрутке после того, как я ее выровнял. Спасибо - person Ali Kashanchi; 28.01.2017
comment
Эээ... Я могу только догадываться, что вы пытаетесь сделать... Вы пробовали alignTo вместо anchorTo? - person rixo; 29.01.2017
comment
Это прекрасно работает. Всего одно небольшое изменение. Вместо button.anchorTo(body, 'r-r', [-5, 0]); сделайте button.getEl().anchorTo(body, 'r-r', [-5, 0]); Observer getEl() после кнопки. - person Nitin Kamate; 06.02.2017