Там какой-либо путь состоит в том, чтобы заставить ExtJS GridPanel автоматически изменять размеры своей ширины, но все еще содержаться в некотором non-ExtJS-generated HTML?
Я хочу включать ExtJS GridPanel в большем расположении, которое в свою очередь должно быть представлено в конкретном отделении в некотором существующем ранее HTML, которым я не управляю.
Из моих экспериментов кажется что GridPanel только изменяет размеры себя правильно, если это в a Viewport. Например, с этим кодом GridPanel автоматически изменяет размеры:
new Ext.Viewport(
{
layout: 'anchor',
items: [
{
xtype: 'panel',
title: 'foo',
layout: 'fit', items: [
{
xtype: 'grid',
// define the grid here...
но если я заменяю первые три строки строками ниже, это не делает:
new Ext.Panel(
{
layout: 'anchor',
renderTo: 'RenderUntoThisDiv',
Проблема, Viewport всегда рендеринг непосредственно к телу документа HTML, и я должен представить в конкретном отделении.
Если существует способ добраться GridPanel изменять размеры себя правильно, несмотря на то, чтобы не быть содержавшимся в a ViewPort, это было бы идеально. В противном случае, если я мог бы добраться Viewport для рендеринга элементов в отделении я согласился бы с этим. Все мои объекты ExtJS могут содержаться в том же отделении.
Кто-либо знает о способе заставить GridPanel изменять размеры себя правильно, но все еще содержаться в некотором non-ExtJS-generated HTML?
2 ответа
Чтобы изменить размер компонентов Ext JS, когда они не находятся в области просмотра , вам необходимо передать события изменения размера окна браузера.
Ext.EventManager.onWindowResize(panel.doLayout, panel);
В вашем примере сохраните Panel в var panel , а затем настройте обработчик событий после объявления var, но все еще внутри Ext.onReady .
Вот полное одностраничное решение:
<html>
<head>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
<script src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script src="ext-3.1.1/ext-all-debug.js"></script>
<script>
Ext.BLANK_IMAGE_URL = 'ext-3.1.1/resources/images/default/s.gif';
Ext.onReady(function(){
var panel = new Ext.Panel({
renderTo: 'areaDiv',
layout: 'fit',
items: [{
height: 200,
title: 'foo',
xtype: 'grid',
cm: new Ext.grid.ColumnModel([
{header: "id", width: 400},
{header: "name", width: 400}
]),
store: new Ext.data.ArrayStore({
fields: ['id','name'],
data: [[1,'Alice'],[2,'Bill'],[3,'Carly']]
})
}]
});
//pass along browser window resize events to the panel
Ext.EventManager.onWindowResize(panel.doLayout, panel);
});
</script>
</head>
<body>
header
<div id="areaDiv" style="padding:30px;"></div>
footer
</body>
</html>
Обратите внимание, что я удалил избыточную панель ( GridPanel это a Panel , поэтому нет необходимости переносить it), и использованный макет подгонка вместо анкера . Макет подгонка на самом деле является ключом к гибкому макету. Сделайте браузер меньше, потом больше. Вы увидите, что сетка всегда заполняет всю ширину, за исключением отступов.
В IE6 и Chrome ваше решение, похоже, не работает, когда размер окна браузера изменяется / становится меньше исходного. Однако он правильно меняет размер при увеличении размера окна браузера. Не срабатывает ли Ext.EventManager.onWindowResize (panel.doLayout, panel) , когда окно браузера становится меньше?