Позиционирование элементов?
 

Всем доброго времени суток! :victory:

Делаю графический компонент на ExtJs к существующей системе.

// Подключение всех библиотек Ext.
Ext.require(['Ext.*']);
// Вызов функции содержащей тело документа.
Ext.onReady(function() {
    // Инициализируем подсказки.
    Ext.QuickTips.init();
	// Получение данных из getData2.php в "store". Метод JSON.
    Ext.define('BlackFrog', {
    extend: 'Ext.data.Model',
    fields: ['name', 'data1']
    });
    var store = Ext.create('Ext.data.JsonStore', {
        model: 'BlackFrog',
        proxy: {
            type: 'ajax',
            url: './resources/getData2.php',
            reader: {
                type: 'json',
                root: 'contents'
            }
        }
    });
    store.load();
    
    var finalPanel = Ext.create('Ext.form.Panel', {
        width: '100%',
        height: '100%',
        frame: true,
        hidden: false,
        maximizable: true,
        title: 'Пробный график',
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [{
            // 1. Элемент с настройками запроса
            id: 'ParamSelect',
            xtype: 'fieldset', 
            title: 'Параметры запроса',
            height: 200,
            layout: 'absolute',
            collapsible: true,
            items: [{
                xtype: 'datefield',
                margin: '0 10 5 10',
                fieldLabel: 'Начальная дата',
                id: 'startDate',
                name: 'nameStartDate',
                format:'d-m-Y',
                maxValue: new Date()
            },{
                x: 270,
                y: 0,
                xtype: 'datefield',
                margin: '0 10 5 10',
                fieldLabel: 'Конечная дата',
                id: 'endDate',
                name: 'nameEndDate',
                format:'d-m-Y',
                maxValue: new Date()
            },{
                xtype: 'button',
                margin: '0 10 5 10',
                width: 150,
                x: 540,
                y: 0,
                text: 'Выполнить',
                handler: function() {
                var sendString = Ext.getCmp('endDate').getValue();
                Ext.Msg.alert('Действие', sendString);
            }                
            }]       
        }, {
            // 2. Построение графика
            id: 'CreateChart',
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            store: store,
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['data1'],
                title: 'Число 1',
                grid: true,
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0'),
                    font: '10px Arial'
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Число 2'
            }],
            series: [{
                type: 'line',
                axis: 'left',
                xField: 'name',
                yField: 'data1',
                style: {
                    fill: '#38B8BF',
                    stroke: '#38B8BF',
                    'stroke-width': 3
                },
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0,
                    fill: '#38B8BF',
                    stroke: '#38B8BF'
                }
            }]
        }]
    });    
});

И столкнулся с такой проблемой, при выполнении выше выложенного кода, в finalPanel отображается только элемент с настройками, а график вообще не видно. Если же закоментить блок элемента настроек, то график прекрасно отстраивается. Подозрение, что я путаюсь в Layout.
Прошу помочь с проблемкой:)

с layout fit (перевод - соответствовать/приспособится/уместится) добавляют только один вложенный компонент, а вы два

используйте другие Layout.
к примеру, vbox - для вертикального расположения, или hbox для горизонтального.
размер каждого вложенного элемента задаётся в этом случае через flex,
по умолчанию flex у всех элементов одинаковый, это значит что родительский контейнер будет поделён между компонентами, на равные части.

в Вашем случае лучше юзать layout либо 'vbox', либо 'border'.

несколько советов (сам когда-то наступал на эти грабли):
1. id нет необходимости юзать, это же ExtJS 4 (когда 2 и более элемента будут иметь одинаковый id будет нелегко отследить ошибку). Если все же задаете id, то старайтесь использовать преффикс.
2. как можно реже задавать высоту явно, чаще юзать autoHeight: true
3. width: '100%', height: '100%' - уберите, это не тру-способ, читайте документацию, там написано width : Number, (The width of this component in pixels.) тоесть задавать целым числом.
4. hidden: false, указывать не нужно, по дефолту и так false

DjDiablo и nekto_O, огромное спасибо за помощь и возможность поделиться опытом!;)
В моем случае действительно правильно использовать 'hbox'.