Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.04.2012, 09:49
wUI wUI вне форума
Аспирант
Отправить личное сообщение для wUI Посмотреть профиль Найти все сообщения от wUI
 
Регистрация: 19.04.2012
Сообщений: 78

Позиционирование элементов?
Всем доброго времени суток!

Делаю графический компонент на 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.
Прошу помочь с проблемкой
Ответить с цитированием
  #2 (permalink)  
Старый 27.04.2012, 10:16
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

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

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

Последний раз редактировалось DjDiablo, 27.04.2012 в 11:06.
Ответить с цитированием
  #3 (permalink)  
Старый 27.04.2012, 10:45
С++/C# modest developer
Отправить личное сообщение для nekto_O Посмотреть профиль Найти все сообщения от nekto_O
 
Регистрация: 07.11.2011
Сообщений: 244

в Вашем случае лучше юзать 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
Ответить с цитированием
  #4 (permalink)  
Старый 27.04.2012, 11:55
wUI wUI вне форума
Аспирант
Отправить личное сообщение для wUI Посмотреть профиль Найти все сообщения от wUI
 
Регистрация: 19.04.2012
Сообщений: 78

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
Сгенерировать 2 последовательности и узнать сколько в них одинаковых элементов Ирина Владимировна Общие вопросы Javascript 10 24.03.2012 18:18
Удаление элементов через splice. возможно ли оптимизировать? Storan Общие вопросы Javascript 0 01.10.2011 21:16
SVG позиционирование элементов zaytsewa Общие вопросы Javascript 1 23.06.2011 12:23
Изменение множества элементов Input по определённом призна Лавсановые Волокна Элементы интерфейса 1 24.12.2010 10:37