Автовысота элементов
возникла неясность с ExtJS 5.
Хочу создать страницу с несколькими вкладками и чтобы содержимое каждой вкладки заполняло все пространство страницы, если же данные не помещаются, то появлялся скролл, при явном указании высоты - все хорошо, но хотелось бы иметь гибкий механизм, скорее всего я неправильно использую xtype и layout. Научите: как это побеждать? вот, собственно, мой код:
Ext.QuickTips.init();
Ext.application({
name: 'MVVM',
views: [
'CarGrgid',
'RouteHeadGrid',
'CarForm',
],
controllers: [
'CarController',
'RouteHeadController'
],
stores: [
'CarStore',
'DriversStore',
'RouteHeadStore',
],
launch: function() {
Ext.tip.QuickTipManager.init();
Ext.create('Ext.panel.Panel', {
//Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(), //document.body,
items: [{
xtype: 'tabpanel',
layout: 'fit',
items: [{
title: 'Список автомобилей',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
height: 600,
xtype: 'panel',
layout: 'fit',
autoScroll: true,
//scroll: true,
flex: 1,
items: [{
xtype: 'mvvm-CarGrgidView',
}]
}, {
xtype: 'mvvm-CarFormView',
flex: 1
}]
}, {
title: 'Готовы к рейсу',
layout: 'fit',
items: [{
extend: 'Ext.panel.Panel',
requires: [
'Ext.layout.container.Table'
],
layout: {
type: 'table',
columns: 1,
tableAttrs: {
style: {
width: 600
}
},
},
items: [{
xtype: 'mvvm-RouteHeadFormView',
}, {
xtype: 'mvvm-RouteHeadGridView',
}]
}]
}, {
title: 'Список автомобилей',
//xtype: 'tabbar',
xtype: 'panel',
layout: 'fit',
height: 600,
//anchor: "100% 100%",
flex: 1,
items: [{
flex: 1,
//anchor:'100%',
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
//height: 100,
split: true, // enable resizing
flex: 1,
margin: '0 5 5 5',
layout: 'fit'
}, {
title: 'West Region is collapsible',
region: 'west',
xtype: 'panel',
margin: '5 0 0 5',
//width: 200,
flex: 1,
collapsible: true,
id: 'west-region-container',
layout: 'fit'
}, {
title: 'Center Region',
flex: 2,
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
margin: '5 5 5 5'
}, {
title: 'Center Region',
collapsible: true,
flex: 2,
region: 'east', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
}],
}]
}]
}]
});
}
});
|
Неужели у всех все прекрасно тянется, и я один такой горемыка?
|
Да, есть замечания к использованию xtype и layout.
Представьте, что у вас есть блоки, которые несут содержание и блоки, которые нужны для распределения содержания. Последние называются контейнерами. Нарисуйте своё приложение сначала из одних контейнеров. Для этого используйте xtype: viewport, panel, tabpanel, container. Вместо блоков с содержанием, ставьте обычные панели, потом замените их на гриды, графики и прочее. У каждого контейнера есть свойства layout и items. Если в материнском контейнере вы выбрали layout: hbox, то в дочерних контейнерах независимо от их собственного типа вы можете указать свойства flex, minWidth и прочие. Если вы выберите в материнском контейнере другой тип layout, то в дочерних контейнерах нужно указывать соответствующие ему настройки. Вот как свойство дочернего контейнера flex объяснено в документации материнского контейнера hbox: http://docs.sencha.com/extjs/5.1/5.1....HBox-cfg-flex Ваш случай в упрощённом виде
Ext.application({
name: 'MVVM',
launch: function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'tabpanel',
layout: 'fit',
items: [{
title: 'Список автомобилей',
xtype: 'panel',
autoScroll: true,
html: 'tttt<br>tttt<br>'
}, {
title: 'Готовы к рейсу',
xtype: 'panel'
}, {
title: 'Список автомобилей',
xtype: 'panel'
}]
}]
});
}
});
|
Спасибо за разъяснение. Постараюсь более осознанно применять свойства. А не подскажете, как определить какие свойства являются обязательными для того или иного элемента?
В частности если закомментировать указание высоты в контейнере bordera, то в консоли выскакивает такая ошибка: "Border layout does not currently support shrinkWrap height. Please specify a height on component: panel-1061, or use a container layout that sets the component's height. " Как следует поступать в подобной ситуации? Указывать высоту фиксированной, как я и сделал или есть более элегантные способы сделать высоту подогнанную под высоту экрана? |
Это всё из-за того, что Вы, скорее всего, не используете viewport. В body нужно вставлять его. Изменил пример:
https://fiddle.sencha.com/#fiddle/hio
Ext.application({
name: 'MVVM',
launch: function() {
Ext.widget({
xtype: 'viewport',
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'tabpanel',
activeTab: 2,
layout: 'fit',
items: [{
xtype: 'panel',
title: 'Список автомобилей',
autoScroll: true,
html: 'tttt<br>tttt<br>'
}, {
xtype: 'panel',
title: 'Готовы к рейсу'
}, {
xtype: 'panel',
title: 'Список автомобилей',
layout: 'border',
items: [{
xtype: 'panel',
title: 'South Region is resizable',
region: 'south', // position for region
split: true, // enable resizing
flex: 1,
margin: '0 5 5 5'
}, {
xtype: 'panel',
title: 'West Region is collapsible',
region: 'west',
margin: '5 0 0 5',
flex: 1,
collapsible: true
}, {
xtype: 'panel',
title: 'Center Region',
flex: 2,
region: 'center',
margin: '5 5 5 5'
}, {
xtype: 'panel',
title: 'Center Region',
collapsible: true,
flex: 2,
region: 'east'
}]
}]
}]
});
}
});
|
Спасибо Вам огромное, оказалось что я неправильно обернул элементы, из-за чего поплыла вся верстка, впредь буду узлы у которых большая вложенность реализовывать через отдельные объекты.
|
| Часовой пояс GMT +3, время: 10:13. |