Макет Ext JS 4 и структура панели - PullRequest
Новая
       20

Макет Ext JS 4 и структура панели

1 голос
/ 05 сентября 2011

Позвольте мне предсказать мой вопрос, признав, что я новичок в Ext JS, поэтому, пожалуйста, извините за мое невежество.Я знаком с HTML, CSS и JavaScript / JQuery, поэтому я получаю большую часть синтаксиса в отдельных частях, но у меня возникают проблемы с объединением этих частей.включите заголовок, который охватывает всю верхнюю строку, левый столбец, занимающий 50% оставшегося пространства ниже, и правый столбец с такими же размерами, как у левого.содержимого панелей, но сейчас мне нужно понять базовый синтаксис и структуру макетов Ext JS и окон просмотра.В нынешнем виде я в замешательстве.Ниже приведен пример моей первой попытки написания некоторого кода, но это явно не так: 

var panel = new Ext.Panel({
    fullscreen: true,
    layout: {
        type: "Panel",
        align: "fit",
    },
    items: [
        {
            xtype: "panel",
            id: "topHeader",
            title: "Header",
            style: "height:200px;"
        },
        {
            xtype: "panel",
            id: "left",
            title: "Left",
            style: "width:500px;z-index:2;background-color:#ccc;position:absolute;left:0px;"
        },
        {
            xtype: "panel",
            id: "right",
            title: "Right",
            style: "width:500px;z-index:2;background-color:#000;position:absolute;right:0px;"
        }
    ]
});

Ответы [ 2 ]

1 голос
/ 05 сентября 2011

Для этого вам нужно использовать макет 'border'. Компоновка границ позволяет добавлять компоненты в различных регионах, таких как Север, Центр, Левый, Правый, Южный.

Вы можете получить рабочий пример здесь - http://docs.sencha.com/ext-js/4-0/#!/example (Раздел макета - Макет границы)

Надеюсь, это поможет.

0 голосов
/ 07 сентября 2011

Я думаю, вы имеете в виду что-то вроде этого? 

Ext.create('Ext.Viewport', {
    layout: {
        type: 'border',
        padding: 5
    },
    defaults: {
        split: true
    },
    items: [
        {
            region: 'north',
            collapsible: false,
            border: false,
            split: true,
            height: 100,
            html: 'north'
        },
        {
            region: 'west',
            collapsible: false,
            border: false,
            split: true,
            width: '50%',
            html: 'west<br>I am floatable'
        },
        {
            region: 'center',
            border: false,
            html: ' I am center'
        }
    ]
});

Попробуйте и дайте мне знать.

...