Gibt es eine Möglichkeit, ein ExtJS GridPanel automatisch die Größe seiner Breite zu ändern, aber immer noch in einigen Nicht-ExtJS-generierten HTML enthalten?

Ich möchte eine ExtJS GridPanel in ein größeres Layout, die wiederum innerhalb eines bestimmten Div in einem bereits vorhandenen HTML gerendert werden, die ich nicht kontrolliere.Gibt es eine Möglichkeit, ein ExtJS GridPanel automatisch die Größe seiner Breite zu ändern, aber immer noch in einigen Nicht-ExtJS-generierten HTML enthalten?

Aus meinen Experimenten scheint, dass die GridPanel nur die Größe selbst korrekt ändert, wenn es in einem Viewport ist. Zum Beispiel mit diesem Code der GridPanel automatisch der Größe:

new Ext.Viewport(
    { 
     layout: 'anchor', 
     items: [ 
      { 
       xtype: 'panel', 
       title: 'foo', 
       layout: 'fit', items: [ 
        { 
         xtype: 'grid', 
         // define the grid here...

aber wenn ich die ersten drei Zeilen mit den folgenden Zeilen ersetzen, nicht wahr:

new Ext.Panel(
    { 
     layout: 'anchor', 
     renderTo: 'RenderUntoThisDiv',

Das Problem ist, Viewport immer macht direkt an den Körper des HTML-Dokuments, und ich muss innerhalb eines bestimmten div rendern.

Wenn es eine Möglichkeit gibt, die GridPanel korrekt zu skalieren, obwohl nicht in einem ViewPort enthalten, wäre das ideal. Wenn nicht, wenn ich die Viewport bekommen könnte, um die Elemente innerhalb der div zu rendern, würde ich damit einverstanden sein. Alle meine ExtJS-Objekte können in demselben div enthalten sein.

Kennt jemand eine Möglichkeit, ein GridPanel korrekt zu skalieren, aber trotzdem in nicht von ExtJS generiertem HTML enthalten zu sein?

Quelle

2010-03-02 Micah

Ich fühle Ihren Schmerz enthält. Ich musste ExtJs für ein ganzes Jahr benutzen und fand es, um es schön zu sagen, weniger als flexibel. Was es getan hat, hat es wunderbar gemacht, aber wenn Sie jemals ein Standardverhalten ändern mussten, war das eine Menge Arbeit. Viel Glück. – Robusto

Hat das div eine feste Breite (z. B. 600px)? Oder das Layout der Website ist flüssig (elastisch)? – zihotki

Das div hat keine feste Breite. Das div soll die Breite des ganzen Fensters sein. (Der andere HTML-Code legt die Daten darüber und darunter.) Wenn der div-Wert fest war, hätte ich dieses Problem nicht bemerkt. Ich bemerke, dass andere ExtJS-Komponenten sich selbst gut anpassen, einschließlich des Panels, das das Gitter enthält. – Micah

Um Ext JS-Komponenten zu skalieren, wenn sie nicht in einem Viewport sind, müssen Sie Browserfenster-Größenänderungsereignisse weitergeben.

Ext.EventManager.onWindowResize(panel.doLayout, panel);

In Ihrem Beispiel speichert die Panel in var panel, und dann die Event-Handler nach der var Erklärung eingerichtet, aber immer noch Ext.onReady innen.

Hier eine vollständige einzelne Seite Lösung:

<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>

Bitte beachte, dass ich die redundante Platte entfernt haben (a GridPanelist ein Panel, so dass keine Notwendigkeit, es zu wickeln), und verwendet das Layout fit statt von anchor. Layout fit ist eigentlich der Schlüssel zu einem Fluid-Layout. Machen Sie den Browser kleiner und größer. Sie werden feststellen, dass das Raster immer die gesamte Breite ausfüllt, mit Ausnahme der Auffüllung.

Quelle

2010-03-02 21:49:31

Danke! Eine Sache, die ich notieren werde, falls jemand dies liest, läuft in die gleiche Sache: in meiner tatsächlichen Anwendung brauchte ich die " redundante "Container um das Gitter, damit es funktioniert. Das Panel, das auf dem Div (analog zu der" foo "-Panel in meinem Beispiel) gerendert hat mehr als ein Element in ihm, aber das Gitter hat immer noch nicht die Größe geändert, es sei denn es war ein "Fit" -Layout, in dem nur ein Element enthalten sein kann – Micah

In IE6 und Chrome scheint Ihre Lösung nicht zu funktionieren, wenn die Größe des Browserfensters verkleinert/verkleinert wird. Wenn das Browserfenster größer wird, wird die Größe jedoch richtig angepasst. Wird die Ext.EventManager.onWindowResize(panel.doLayout, panel) nicht ausgelöst, wenn das Browserfenster verkleinert wird?

Quelle

2010-03-31 01:22:29 HOCA

Ich habe nicht genug Reputation, um irgendwo "zu kommentieren", aber ich habe eine Lösung für das Problem "funktioniert nicht, wenn das Fenster verkleinert wird kleiner" von HOCA beschrieben. Ich hatte das gleiche Problem und benutzte die Lösung, die in dieser Antwort beschrieben wurde. Nachdem ich einige Zeit gegoogelt hatte, fand ich this thread auf der sencha.com Webseite. Die Verwendung einer ähnlichen Technik zu der dort beschriebenen scheint besser browserübergreifend zu funktionieren (die Verwendung der dort angebotenen exakten Lösung scheint zwischen FF/IE etwas anders zu funktionieren).

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 
});

Quelle

2010-11-18 14:42:27

Ich löste es durch das Layout einstellen: ‚passen‘ an der Platte, die das Gitter

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 
    }] 
});

Quelle

2012-05-18 02:20:52 kathy

Bitte beschreiben Sie Ihre Lösung besser. Siehe: [Beantworten] (http://stackoverflow.com/questions/how-to-answer) – askmish

Gibt es eine Möglichkeit, ein ExtJS GridPanel automatisch die Größe seiner Breite zu ändern, aber immer noch in einigen Nicht-ExtJS-generierten HTML enthalten?

Antwort

Verwandte Themen