¿Hay alguna manera de obtener un ExtJS GridPanel para redimensionar automáticamente su ancho, pero aún estar dentro de un HTML no generado por ExtJS?

Quiero incluir un ExtJS GridPanel dentro de un diseño más grande, que a su vez debe representarse dentro de un div en particular en un código HTML preexistente que no controlo.¿Hay alguna manera de obtener un ExtJS GridPanel para redimensionar automáticamente su ancho, pero aún estar dentro de un HTML no generado por ExtJS?

De mis experimentos, parece que el GridPanel solo se redimensiona correctamente si está dentro de un Viewport. Por ejemplo, con este código, el GridPanel cambia automáticamente el tamaño:

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

pero si puedo reemplazar las tres primeras líneas con las líneas de abajo, no es así:

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

El problema es que siempre Viewport renders directamente al cuerpo del documento HTML, y necesito renderizar dentro de un div en particular.

Si hay una manera de hacer que el GridPanel cambie de tamaño correctamente, a pesar de no estar contenido en un ViewPort, sería ideal. Si no, si pudiera obtener el Viewport para representar los elementos dentro del div, estaría bien con eso. Todos mis objetos ExtJS pueden estar contenidos en el mismo div.

¿Alguien sabe de una forma de hacer que un GridPanel se redimensione correctamente, pero que aún esté contenido dentro de un HTML no generado por ExtJS?

Fuente

2010-03-02 Micah

Siento su dolor. Tuve que usar ExtJs durante todo un año y me pareció que era, por decirlo suavemente, menos que flexible. Lo que hizo fue maravilloso, pero si alguna vez tuvo que cambiar un comportamiento predeterminado, fue mucho trabajo. Buena suerte. – Robusto

¿El div tiene un ancho fijo (por ejemplo, 600 px)? ¿O el diseño del sitio es líquido (elástico)? – zihotki

El div no tiene un ancho fijo. El div se supone que es el ancho de toda la ventana. (El otro HTML coloca las cosas arriba y abajo). Si el div fuera ancho fijo, ni siquiera me habría dado cuenta de este problema. Noto que otros componentes de ExtJS se redimensionan bien, incluido el panel que contiene la cuadrícula. – Micah

Para cambiar el tamaño de los componentes Ext JS cuando no están en un Viewport, debe pasar los eventos de cambio de tamaño de la ventana del navegador.

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

En su ejemplo, almacenar el Panel en var panel, y luego configurar el controlador de eventos después de la declaración var, pero aún dentro de Ext.onReady.

Aquí es una solución única página completa:

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

Tenga en cuenta que me he quitado el panel redundante (un GridPanel es un Panel, así que no hay necesidad de envolverlo), y usa el aspecto fit vez de anchor. El diseño fit es la clave para una distribución fluida. Haga que el navegador sea más pequeño, luego más grande. Verá que la cuadrícula siempre llena todo el ancho, con la excepción del relleno.

Fuente

2010-03-02 21:49:31

¡Gracias! Una cosa que notaré, en caso de que alguien que lea esto se encuentre con lo mismo: en mi aplicación real, necesitaba el " redundante "contenedor alrededor de la red para que funcione. El panel que representa al div (análogo al panel" foo "en mi ejemplo) tenía más de un elemento en él, pero la cuadrícula no cambiaba de tamaño a menos que estuviera en un diseño de "ajuste", que solo puede tener un elemento. – Micah

En IE6 y Chrome su solución no parece funcionar cuando la ventana del navegador se redimensiona/se hace más pequeña que el tamaño original. Sin embargo, cambia el tamaño correctamente cuando la ventana del navegador se redimensiona más. ¿El Ext.EventManager.onWindowResize(panel.doLayout, panel) no se activa cuando la ventana del navegador se hace más pequeña?

Fuente

2010-03-31 01:22:29 HOCA

No tengo suficiente reputación para "comentar en cualquier lugar" todavía, pero tengo una solución para el problema "no funciona cuando la ventana se redimensiona más pequeño" descrito por HOCA. También estaba teniendo el mismo problema, usando la solución descrita por esta respuesta. Después de buscar en Google por un tiempo, encontré this thread en el sitio web sencha.com. Usando una técnica similar a la descrita parece que funciona mejor el navegador cruzado (usando la solución exacta que se ofrece parece funcionar de forma algo diferente entre 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 
});

Fuente

2010-11-18 14:42:27

Lo resuelto mediante el establecimiento de la disposición: 'ajuste' al panel que contiene la cuadrícula

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

Fuente

2012-05-18 02:20:52 kathy

Sea más descriptivo acerca de su solución. Consulte: [Cómo responder] (http://stackoverflow.com/questions/how-to-answer) – askmish

¿Hay alguna manera de obtener un ExtJS GridPanel para redimensionar automáticamente su ancho, pero aún estar dentro de un HTML no generado por ExtJS?

Respuesta

Cuestiones relacionadas