extjs container hbox height 100%

Я новичок в extjs и просто зациклился на динамической (процентной) высоте в настройках hbox.extjs container hbox height 100%

вот мой 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»: «контейнер» устанавливает высота до 45% тоже, но элементы hbox не выбирают этот 45%, высота элементов hbox равна 0px

Я не могу использовать «xtype»: «window» или «xtype»: «viewport» должен быть внутри «xtype»: «ветер ow "

Любая помощь, как установить высоту элемента hbox контейнера в процентах в моем случае 45%.

Если я добавить стиль в пункте HBOX, он не работает слишком

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

Спасибо за помощь

источник

2014-02-11 user2894127

возможно дубликат [ExtJS 100% высоты в HBox] (http://stackoverflow.com/questions/21704630/extjs-100-height-in -hbox) – Akatum

Я видел это, ответ хорош тем, кто может использовать «xtype»: «viewport», к сожалению, я не могу использовать viewport, я использую «xtype»: «container» – user2894127

высота в процентах поддерживается касанием, но в Ext only pixel height is officially supported ...

Тогда , ваш родительский контейнер имеет 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(); 
    }); 
});

Update

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

<html> 
    <head> 
     <link rel="stylesheet" href="../../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>

источник

2014-02-11 23:13:15 rixo

спасибо rixo, но его все еще не работает с высотой: «100%» (в первом контейнере), если я изменяю его на px, когда вижу панель на экране. Является ли ваш элемент тела html высотой, указанной в пикселях или элементами стиля/css? – user2894127

Нет, ничего подобного ... Я добавил свою разметку HTML для вас. Я тестировал его в Chrome и Firefox с тем же результатом. В любом случае, если вы действительно хотите сделать тело с высотой и шириной 100%, вам действительно нужно использовать видовое окно, как предложил парень, который ответил на ваш предыдущий вопрос. – rixo

Только для теста я добавляю элемент body в этом примере, мне действительно нужно около 60% тела, представляйте его как один из элементов div в html, а другой контент страницы происходит из html не из extjs, поэтому я могу " t используйте окно просмотра. Я попытался даже скопировать вставку вашего примера, я получаю ошибки: Uncaught TypeError: Object prototype может быть только Object или null Uncaught TypeError: Object [object Object] не имеет никакого метода 'addCls' – user2894127

extjs container hbox height 100%

ответ

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