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

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

12 голосов
/ 02 марта 2010

Я хочу включить 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 правильно изменять свой размер, но при этом оставаться внутри некоторого не-ExtJS-сгенерированного HTML?

Ответы [ 4 ]

15 голосов
/ 03 марта 2010

Чтобы изменить размер компонентов 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 - это a Panel, поэтому не нужно ее оборачивать) и использовал макет fit вместо anchor. Макет fit на самом деле является ключом к изменяемой компоновке. Сделайте браузер меньше, потом больше. Вы увидите, что сетка всегда заполняет всю ширину, за исключением заполнения.

4 голосов
/ 18 ноября 2010

У меня пока недостаточно репутации, чтобы "комментировать где-либо", но у меня есть исправление проблемы "не работает, когда размер окна меньше", описанной HOCA У меня была та же проблема, я использовал решение, изложенное в этом ответе. Пройдя некоторое время по поиску, я нашел эту ветку на сайте 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
});
2 голосов
/ 31 марта 2010

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

0 голосов
/ 18 мая 2012

Я решил это, установив макет: «подгонка» к панели, содержащей сетку 

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
    }]
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...