Ext JS Grid не заполняет панель даже при «подходящей» компоновке - PullRequest
Новая
       37

Ext JS Grid не заполняет панель даже при «подходящей» компоновке

1 голос
/ 12 марта 2012

Я пытаюсь заставить сетку занимать все пространство внутри панели, и после поиска по этому форуму я прочитал, что подходящая раскладка должна помочь в таком случае. Тем не менее, у меня все еще есть проблемы с этим. 

         {
            xtype:'panel',
            layout:'fit',
            items: [{
                     xtype: 'grid',
                     store: 'DimensionStore',
                     id: 'dimension-grid',
                     padding: '0 5 0 5',
                     viewConfig: { emptyText: '<div style="padding:10px;">No dimensions found...</div>' },
                     columns: [{ 
                                header: 'Name', dataIndex: 'DimensionName', flex: 2 
                              }]
                     }
                  }]
         }

Единственный способ, которым это работает, - установить абсолютную высоту для сетки, но это не соответствует цели, так как панель + сетка находится в окне, которое можно развернуть и выглядит не очень хорошо, когда оно расширяется.

1 Ответ

3 голосов
/ 12 марта 2012

Судя по изображению, которое вы нам показали, проблема с макетом связана с верхней панелью «Размеры», содержащей ваше текстовое поле и сетку. Это на самом деле компонент, отвечающий за макет здесь, а не за сетку.

Есть несколько вещей, которые вы можете сделать, в зависимости от того, как вы собираетесь их использовать. Самым простым решением было бы использовать макет "vbox". Панель «Размеры» будет иметь два элемента: один для панели с фиксированной высотой, содержащей ваше текстовое поле, а другой - для вашей сетки с изгибом 1. Таким образом, сетка заполнит оставшуюся область.

Ext.layout.container.VBox документация

Вы также можете использовать макет границы с вашим текстовым полем в качестве «северной» области и сеткой в ​​качестве «центральной» области с «подходящей» компоновкой, что позволит выполнить то же самое.

Ext.layout.container. Документация для заказа

Все это основано на вашем ограниченном образце кода и связанном изображении. Вам может потребоваться предоставить более полный пример кода, чтобы облегчить дальнейшую помощь.

...