EXTJS - всплыть 2 панели и отцентрировать их - PullRequest
Новая
       27

EXTJS - всплыть 2 панели и отцентрировать их

1 голос
/ 16 февраля 2012

Я застрял с чем-то, что я себе представлял, было бы довольно просто:)

Плавание двух панелей рядом друг с другом и удержание их по центру. Самое близкое, что я получил, - это центрировать панели, но друг над другом.

вроде так: 

         _
        |_|
         _
        |_|

Я пытаюсь получить 

         _   _
        |_| |_|

Пока это мой файл 

Ext.define("App.view.MyWindow", {
extend:'Ext.panel.Panel',
alias:'widget.mywindow',
requires:[
      //this is just a simply panel with html:'abcde"
         'App.view.Portal1'

      ],
items:[{
    xtype:'portal1',
    height:400,
    width:400,
    style:{
        margin: '0 auto',
    }
},{
    xtype:'portal1',
    height:400,
    width:400,
    style:{
        margin: '0 auto',
    }
}]
});

Есть идеи? Все добро пожаловать :) ... заранее спасибо

Обновление: Самое близкое к «решению», которое я нашел, это следующее: (однако для этого требуется заданная ширина) 

Ext.define("App.view.MyWindow", {
    extend:'Ext.panel.Panel',
    alias:'widget.mywindow',
    requires:[
             //this is just a simply panel with html:'abcde" with width & height 400
             'App.view.Portal1'

          ],
          layout:'fit',
    items:[{
        layout:{
            type:'vbox',
            align:'center'
        },
        items:[{
            layout:{
                type:'hbox',
            },
            //Set width :(
            width:800,
            items:[{
                xtype:'portal1',
            },{
                xtype:'portal1',
            }]
        }]

    }]
});

Решение

Спасибо тем, кто прокомментировал. Вот рабочее решение. Не используйте layout:fit на панели оболочки 

Ext.define("App.view.MyWindow", {
    extend:'Ext.panel.Panel',
    alias:'widget.mywindow',
    requires:[
             //this is just a simply panel with html:'abcde" with width & height 400
             'App.view.Portal1'

          ],
    style:{
        textAlign:'center'
    },
    items:[{
        xtype:'portal1',
        style:{
            display:'inline-block'
        }
    },{
        xtype:'portal1',
        style:{
            display:'inline-block'
        }
    }]
});

Ответы [ 2 ]

1 голос
/ 16 февраля 2012

Решение только для CSS, поскольку я не знаю extjs:

Дайте каждой панели соответствующие горизонтальные поля, чтобы они не работали вместе.Установите их ширину и высоту как обычно.Затем установите display: inline на панели также.Наконец, установите содержащий элемент для использования text-align: center.Для этого вам может потребоваться ввести новый элемент контейнера.

1 голос
/ 16 февраля 2012

Дайте 'myWindow' компоновку hbox.Элементы, содержащиеся внутри, будут расположены горизонтально.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.HBox

...