extjs контейнер hbox височина 100%

Нов съм в extjs и просто останах на динамична (процентна) височина в настройката на hbox.

ето моя extjs код

"xtype": "container",
"layout": "fit",
"width": "100%",
"height": "100%",
"cls": "dashboard-layout dashboard-layout-1-2",
"items": [
  {
    "xtype": "dashboardpanelcontainer",
    "height": "45%"
  },
  {
    "xtype": "container",
    "layout": "fit",
    "width": "100%",
    "height": "45%",
    "layout":
      {
        "type": "hbox",
        "align": "stretch"
      },
    "items": [
      {
        "xtype": "dashboardpanelcontainer",
        "flex": 1
      },
      {
        "xtype": "ruban-dashboardpanelcontainer",
        "flex": 1
      }]
  }]

тази част от кода работи добре и задава височина на 45%

"xtype": "dashboardpanelcontainer",
"height": "45%"

втори елемент като контейнер "xtype": "container" също задава височина на 45%, но елементите на hbox не избират тези 45%, височината на елементите на hbox е 0px

Не мога да използвам "xtype": "window" или "xtype": "viewport" трябва да бъде вътре в "xtype": "window"

Всяка помощ как да задам височина на елемента на контейнера hbox като процент в моя случай 45%.

Ако добавя стил в hbox елемент, той също не работи

"xtype": "dashboardpanelcontainer",
"flex": 1,
"style":
  {
    "height": "100%"
  }

Благодаря за помощта


containers extjs hbox
person user2894127    schedule 11.02.2014    source източник
comment
възможен дубликат на extjs 100% височина в hbox   -  person Akatum    schedule 12.02.2014
comment
видях го, отговорът е добър за кой може да използва xtype: viewport, за съжаление не мога да използвам viewport, използвам xtype: контейнер   -  person user2894127    schedule 12.02.2014

Отговори (1)


arrow_upward
5
arrow_downward

Процентната височина се поддържа от Touch, но в Ext официално се поддържа само височина на пиксел...

След това вашият родителски контейнер има layout: 'fit', така че очаква само едно дете. Ако искате да подредите компоненти вертикално, използвайте оформлението vbox. Това е flex опцията ще ви позволи да оразмерите децата относително. Той не използва процент сам по себе си, но работи върху съотношения, така че е същият.

Ето един пример, който много прилича на вашия:

Ext.onReady(function() {

    var ct = Ext.widget({
        renderTo: Ext.getBody(),
        xtype: 'container',
        style: 'background-color: pink;',
        width: '100%',
        height: '100%',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'panel',
            bodyStyle: 'background-color: magenta;',
            flex: 45
        },{ // Filler for the remaining 15%
            xtype: 'component',
            flex: 15
        },{
            xtype: 'container',
            width: '100%',
            flex: 45,
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                bodyStyle: 'background-color: yellow;',
                flex: 1
            }, {
                xtype: 'panel',
                bodyStyle: 'background-color: cyan;',
                flex: 1
            }]
        }]
    });

    // Since I've rendered to the body without using a viewport, I have to
    // refresh the layout if the window is resized...
    Ext.EventManager.onWindowResize(function() {
        ct.doLayout();
    });
});

Актуализация

Ето HTML кода, който използвах. Както виждате, в него няма нищо особено...

<html>
    <head>
        <link rel="stylesheet" href="/bg../../ext-4.2.1/resources/css/ext-all-debug.css" />
        <script type="text/javascript" src="../../ext-4.2.1/ext-all-dev.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body>
    </body>
</html>
person rixo    schedule 11.02.2014
comment
благодаря rixo, но все още не работи с височина: '100%' (в първия контейнер), ако го променя на px, когато видя панел на екрана. Дали вашият body елемент е html с височина, посочена в пиксели или някои style/css елементи? - person user2894127; 12.02.2014
comment
Не, нищо подобно... Добавих моя HTML маркировка, за да видите. Тествах го в Chrome и Firefox със същия резултат. Както и да е, ако наистина искате да изобразите тялото с височина и ширина от 100%, наистина трябва да използвате прозорец за изглед, както е предложено от човека, който отговори на предишния ви въпрос. - person rixo; 12.02.2014
comment
Само за теста добавям body елемент в този пример, наистина имам нужда от около 60% от body, представете си го като един от div елементите в html, а другото съдържание на страницата идва от html, а не от extjs, така че не мога използвайте прозорец за изглед. Опитах се дори да копирам и поставя вашия пример, получавам грешка: Uncaught TypeError: Прототипът на обект може да бъде само Object или null Uncaught TypeError: Object [object Object] няма метод 'addCls' - person user2894127; 12.02.2014
comment
Е, ако успеете да дадете на контейнера div някакъв видим размер, тогава ще работи... Вижте: fiddle.sencha.com/#fiddle/3il. Там съм дал px височина на div, но това е заради iframe (предполагам, че тялото се свива до размера на съдържанието). - person rixo; 12.02.2014
comment
ето защо моята височина беше 0px, защото съдържанието беше празно и се използва за свиване, ако искате да видите празен контейнер, трябва да посочите shrinkWrap: false във вашето оформление и това работи. Ще приема отговора ви, защото това беше добро начало за мен да променя първоначалното си оформление, благодаря на rixo за помощта - person user2894127; 12.02.2014