Есть ли способ получить ExtJS GridPanel для автоматического изменения размера его ширины, но все же содержаться внутри некоторого HTML-кода, не связанного с ExtJS?

Я хочу включить ExtJS GridPanel в более крупный макет, который, в свою очередь, должен быть визуализирован внутри определенного div в каком-то ранее существующем HTML, который я не контролирую.

Из моих экспериментов кажется, что GridPanel только правильно изменяет размеры, если он находится в пределах 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, и мне нужно отображать в пределах определенного div.

Если есть способ получить правильный размер GridPanel, несмотря на то, что он не содержится в Viewport, это было бы идеально. Если нет, если бы я мог получить Viewport, чтобы отображать элементы в div, мне было бы хорошо с этим. Все мои объекты ExtJS могут содержаться в одном и том же div.

Кто-нибудь знает, как получить GridPanel для правильного изменения размера, но все же содержаться внутри HTML-кода, не являющегося ExtJS?

Ответ 1

Чтобы изменить размер компонентов Ext JS, если они не находятся в Viewport, вам необходимо передать события изменения размера окна браузера.

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>

Обратите внимание, что я удалил избыточную панель (a GridPanel - это Panel, поэтому нет необходимости ее обертывать) и использовал макет fit вместо anchor. Макет fit на самом деле является ключом к компоновке жидкости. Сделайте браузер меньше, а затем больше. Вы увидите, что сетка всегда заполняет всю ширину, за исключением заполнения.

Ответ 2

У меня нет достаточной репутации для "комментариев в любом месте", но у меня есть исправление проблемы "не работает при уменьшении размера окна", описанной HOCA. У меня тоже была такая же проблема, используя решение, изложенное в этом ответе. Некоторое время после Googling я нашел этот поток на веб-сайте sencha.com. Использование подобной методики для описанной там, похоже, улучшает кросс-браузер (использование точного решения, предлагаемого там, похоже, несколько отличается между FF/IE).

Ext.EventManager.onWindowResize(function() {
    // pass "true" to get the contendWidth (excluding border/padding/etc.)
    mainPanel.setWidth(Ext.getBody().getWidth(true));
    // seems to be no need to call mainPanel.doLayout() here in my situation
});

Ответ 3

В IE6 и Chrome ваше решение, похоже, не работает, когда окно браузера изменено или уменьшено размером оригинала. Однако при правильном изменении размера окна браузера размер изображения изменяется. Не работает ли Ext.EventManager.onWindowResize(panel.doLayout, panel) при уменьшении окна браузера?

Ответ 4

Я решил это, установив макет: 'fit' на панель, содержащую сетку

var myGridTab = new Ext.Panel({
    layout: 'border',
    region: 'center',
    autoScroll: true,
    animCollapse: false,
    forceFit: true,
    title: ' My Grid Tab ',
    split: true,
    border: false,
    items: [
    {
        region: 'center',
        **layout: 'fit',**
        autoScroll: true,
        items: [myGrid],
        height: 150,
        forceFit: true
    }]
});