Мне нужна помощь в понимании раскладок. Я смотрел некоторые из скринкастов и примеров и т. Д. Но я не могу сделать то, что мне нужно, и я думаю, что я не правильно понимаю вещи.
Я хочу создать страницу с сеткой сверху со 100% шириной области просмотра. (На самом деле на моей реальной странице он находится в определенном div, но давайте просто предположим ...) Затем под этой сеткой мне нужна TreePanel слева для 1/3 ширины, а другая 2/3 для второй сетки.
Я пытаюсь использовать TableLayout, чтобы у меня была первая сетка, охватывающая два столбца в первой строке, а во второй строке будет дерево и 2-я сетка, одна из которых отличается от другой.
У меня есть моя верхняя сетка и мое дерево на странице, но высота верхней сетки не рассчитывается автоматически, она составляет всего несколько пикселей, независимо от того, сколько там строк, и если я изменяю размер окна браузера, я надеваю получить горизонтальные полосы прокрутки на сетке.
Итак, я предполагаю, что на самом деле TableLayout - это не то, что я должен использовать, но, возможно, я ошибаюсь. Как я могу добиться этого макета? Будет ли мне лучше использовать BorderLayout?
Вот код JS, который у меня есть (DistributePMPanel - это просто обычный div на странице, и у меня есть другой компонент JS, который загружается после этого, создающий дерево с renderTo 'mytree', поэтому дерево выводит в div второго элемента) :
_I.mainPanel = new Ext.Panel({
id:'main-panel',
renderTo: 'distributePMPanel',
baseCls: 'x-plain',
layout:'table',
layoutConfig: {columns:2},
items: [
new Ext.grid.GridPanel({
store: new Ext.data.JsonStore({
fields: Ext.decode(_I.options.pmStore),
root: 'pmData',
idProperty: 'id',
data: Ext.decode(_I.options.pmData)
}),
colModel: new Ext.grid.ColumnModel({
defaults: {
sortable : true
},
columns: Ext.decode(_I.options.pmColumns)
}),
colspan: 2
}),
{
id: 'mytree'
},
{
html: 'Grid 2'
}
]
});
};
Также у меня есть следующий CSS:
#distributePMPanel table.x-table-layout { width: 100%; }
#distributePMPanel .x-panel-body { border-width: 0; }