возникла неясность с 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',
}],
}]
}]
}]
});
}
});