ExtJS - добавить плавающую панель поверх другой панели

Я использую ExtJS 5. Мне нужен контейнер, показанный поверх другого контейнера, и я не знаю, как обращаться с макетами для достижения этого. Желаемый эффект: ExtJS - добавить плавающую панель поверх другой панели

Прозрачность предназначена только для устранения неполадок.

Использование чистого HTML это может быть:

<!DOCTYPE html> 
<html style="height: 100%"> 
    <head> 
     <title>a title</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    </head> 
    <body style="height: 100%; padding: 0; margin: 0"> 
     <div style="height: 100%; background-color: #bbb"> 
      <div style="height: 50px; background-color: #888; padding: 15px; font-size: 20px; position: absolute; width: 100%; box-sizing: border-box"> 
       Header 
      </div> 
      <div style="background-color: yellow; height: 100%; padding-top: 50px; box-sizing: border-box"> 
       <div style="width: 100%; height: 100%; padding: 10px; box-sizing: border-box; position: relative"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus feugiat nunc mauris, et vestibulum purus luctus a. Nulla semper semper augue vitae varius. Integer sit amet lobortis leo. Ut lobortis volutpat molestie. Sed malesuada scelerisque cursus. Praesent ac placerat tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ac augue elementum, aliquet purus suscipit, venenatis tellus. Sed varius arcu semper, tristique dui nec, scelerisque nibh. 
        <div style="position: absolute; opacity: 0.8; z-index: 999; top: 0px; left: 0; height: 100%; width: 200px; box-sizing: border-box; background-color: green; padding: 15px; color: white;"> 
         Panel on top 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Без зеленого контейнера это может быть простой макет VBox. Я не знаю, как добавить эту зеленую панель, чтобы показать это.

редактировать

Я пробовал:

Ext.define('MyApp.view.MainView', { 
    extend: 'Ext.container.Viewport', 
    alias: 'widget.mainview', 

    requires: [ 
     'MyApp.view.MainViewViewModel', 
     'Ext.panel.Panel' 
    ], 

    viewModel: { 
     type: 'mainview' 
    }, 
    itemId: 'mainView', 
    layout: 'border', 

    items: [ 
     { 
      xtype: 'panel', 
      region: 'north', 
      height: 100, 
      itemId: 'headerPanel', 
      layout: 'fit', 
      title: 'Header' 
     }, 
     { 
      xtype: 'panel', 
      region: 'center', 
      html: '<h3>Lorem</h3>', 
      itemId: 'contentPanel', 
      title: 'Content' 
     } 
    ] 

});

Ext.define('MyApp.view.SideContainer', { 
    extend: 'Ext.container.Container', 
    alias: 'widget.sidecontainer', 
    requires: [ 
     'MyApp.view.SideContainerViewModel' 
    ], 
    viewModel: { 
     type: 'sidecontainer' 
    }, 
    floating: true, 
    html: '<p>panel</p>', 
    itemId: 'sideContainer', 
    maxWidth: 150, 
    minWidth: 150, 
    width: 150 
});

, и я не знаю, что делать дальше. В консоли я положил Ext.create('MyApp.view.SideContainer').toFront() и получил ошибку me.zIndexManager is undefined.

источник

2016-01-21 koral

Когда вы говорите, «панель сверху» вы имеете в виду ZIndex, верно? Не вертикальное выравнивание? –

Да - я имею в виду z-индекс. – koral

Я думаю, вам нужно создать плавающий (см. https://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.Component-cfg-floating) компонент в вашем контейнере. А затем управлять позиционированием с SetPosition или alignTo (ведьмой нужно управлять afterRender, потому что он нам эль) или CSS

источник

2016-01-21 15:51:21 Psycho

Я знаю это, но я не могу справиться :(Я поставил вопрос о своем пробном коде. – koral

Я создал быстрый скрипт (https://fiddle.sencha.com/#fiddle/14ls) с кодом . Работает :). Я комментирую viewModel, потому что у меня не было кода (но вы должны раскомментировать). И для этого я рекомендую создать панель и переопределить метод 'afterRender' вместо того, чтобы работать с' 'listeners'' (но я сделал это так, потому что это было быстрее). Надеюсь, это то, что вы хотели – Psycho

Небольшое редактирование в моей скрипке, я использовал ExtJs 6, поэтому я поставил две версии, вам нужно немного поработать над фиксацией позиционирования (в ExtJs 6 она работает как шарм ...) но я поставил явный комментарий (вам нужно работать с '' alignTo'' и '' offsets'') – Psycho

ExtJS - добавить плавающую панель поверх другой панели

ответ

Смежные вопросы