Problème de rendu de grille de Safari Extjs

Question

Here est une illustration simple de ce que je veux dire. Cela fonctionne dans IE, et FF, mais pas dans Safari.

J'ai quatre panneaux qui sont ajoutés dynamiquement à un élément de tableau. Trois sont des panneaux de grille, et un est un panneau de formulaire. J'ai besoin de conserver les proportions ou les tailles des grilles. J'ai essayé plusieurs méthodes de mise en page (table, colonne, absolu etc), et rien ne semble fonctionner jusqu'à présent. Pour la disposition de table, toutes les tailles finissent par avoir la même largeur. Il semble que mon meilleur pari est la mise en page de colonne, et ils semblent rendre correctement dans FF, IE, mais pas dans Safari comme indiqué dans l'image. (Ici, il semble que la colonne va à la deuxième rangée, quand l'article ne rentre pas dans la rangée actuelle). Initialement, la barre de titre et plusieurs en-têtes de colonne ne s'affichent pas.

Toutes les suggestions.

Merci.

alt text http://pssnet.com/~devone/pssops3/testing/Screenshot.png

Answer 1

Votre meilleur pari est probablement un BorderLayout. Je ne sais pas comment vous voulez la page pour regarder je ne peux pas dire quelle configuration spécifique serait préférable

EDIT: Depuis que vous utilisez Ext 3.1, vous devriez vraiment vérifier la nouvelle HBox (sample) et VBox (sample) dispositions. Ils sont extrêmement puissants et feront exactement ce dont vous avez besoin.

Ext.onReady(function() { 
    var panel = new Ext.Panel({ 
     id:'main-panel', 
     baseCls:'x-plain', 
     renderTo: Ext.getBody(), 
     width: 600, 
     height: 400, 
     layout: { 
      type: 'vbox', 
      align:'stretch' 
     }, 
     defaults: { 
      xtype: 'panel', 
      baseCls:'x-plain', 
      flex: 1, 
      layout: { 
       type: 'hbox', 
       align: 'stretch' 
      } 
     }, 
     items: [{ 
      defaults: { 
       xtype: 'panel', 
       frame: true 
      }, 
      items: [{ 
       title: 'Item 1', 
       flex: 1 
      },{ 
       title: 'Item 2', 
       flex: 2 
      }] 
     },{ 
      defaults: { 
       xtype: 'panel', 
       frame: true 
      }, 
      items: [{ 
       title: 'Item 3', 
       html: 'sssssssssssss', 
       flex: 2 
      },{ 
       title: 'Item 4', 
       flex: 1 
      }] 
     }] 
    }); 
});