Existe-t-il un moyen d'obtenir un GridPanel ExtJS pour redimensionner automatiquement sa largeur, tout en restant contenu dans un code HTML non généré par ExtJS?

Je souhaite inclure un ExtJS GridPanel dans une mise en page plus grande, qui à son tour doit être rendue à l'intérieur d'une div particulière dans un code HTML préexistant que je ne contrôle pas. De mes expériences, il semble que le GridPanel ne se redimensionne correctement que si . Par exemple, avec ce code, le GridPanel redimensionne automatiquement:Existe-t-il un moyen d'obtenir un GridPanel ExtJS pour redimensionner automatiquement sa largeur, tout en restant contenu dans un code HTML non généré par ExtJS?

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

mais si je remplace les trois premières lignes avec les lignes ci-dessous, il ne compte pas:

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

Le problème est, toujours Viewport rend directement au corps du document HTML, et j'ai besoin de rendre dans un div particulier.

S'il existe un moyen d'obtenir le GridPanel pour se redimensionner correctement, bien qu'il ne soit pas contenu dans un ViewPort, ce serait idéal. Si ce n'est pas le cas, si je pouvais obtenir le Viewport pour rendre les éléments dans la div, ça me conviendrait. Tous mes objets ExtJS peuvent être contenus dans la même div.

Est-ce que quelqu'un sait comment obtenir un GridPanel pour le redimensionner correctement, tout en restant contenu dans un code HTML non-généré par ExtJS?

Source

2010-03-02 Micah

Je ressens votre douleur. J'ai dû utiliser ExtJs pendant une année entière et je l'ai trouvé, pour le dire gentiment, moins que flexible. Ce qu'il a fait a merveilleusement bien fonctionné, mais si vous deviez changer un comportement par défaut, c'était beaucoup de travail. Bonne chance. – Robusto

Est-ce que le div a une largeur fixe (par exemple 600px)? Ou la disposition du site est liquide (élastique)? – zihotki

Le div n'a pas de largeur fixe. Le div est censé être la largeur de toute la fenêtre. (L'autre HTML met les choses au-dessus et au-dessous.) Si la div était largeur fixe, je n'aurais même pas remarqué ce problème. Je note que d'autres composants ExtJS se redimensionnent très bien, y compris le panneau qui contient la grille. – Micah

Pour redimensionner les composants Ext JS lorsqu'ils ne se trouvent pas dans un Viewport, vous devez transmettre les événements de redimensionnement de la fenêtre du navigateur.

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

Dans votre exemple, stocker le Panel dans var panel, puis mettre en place le gestionnaire d'événements après la déclaration var, mais encore à l'intérieur de Ext.onReady.

Voici une solution d'une seule page complète:

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

Notez que j'ai enlevé le panneau redondant (un GridPanelest un Panel, donc pas besoin de l'envelopper), et la mise en page utilisé fit à la place de anchor. La disposition fit est en fait la clé d'une disposition fluide. Rendez le navigateur plus petit, puis plus grand. Vous verrez que la grille remplit toujours toute la largeur, à l'exception du rembourrage.

Source

2010-03-02 21:49:31

Merci! Une chose que je noterai, au cas où quelqu'un qui lit ceci se heurte à la même chose: dans mon application réelle, j'ai besoin de la " Le panneau qui rend le div (analogue au panneau "foo" dans mon exemple) avait plus d'un élément, mais la grille ne se redimensionnait pas à moins d'être dans une mise en page 'fit', qui ne peut contenir qu'un seul élément – Micah

Dans IE6 et Chrome, votre solution ne semble pas fonctionner lorsque la fenêtre du navigateur est redimensionnée/réduite au format d'origine. Il est cependant redimensionné correctement lorsque la fenêtre du navigateur est redimensionnée. Est-ce que le Ext.EventManager.onWindowResize(panel.doLayout, panel) ne se déclenche pas lorsque la fenêtre du navigateur est réduite?

Source

2010-03-31 01:22:29 HOCA

Je n'ai pas assez de réputation pour "commenter n'importe où", mais j'ai résolu le problème "ne pas travailler quand la fenêtre est redimensionnée plus petit" décrit par HOCA. J'ai eu le même problème aussi, en utilisant la solution décrite par cette réponse. Après avoir parcouru Google pendant un moment, j'ai trouvé this thread sur le site sencha.com. En utilisant une technique similaire à celle décrite il semble y avoir un meilleur cross-browser (en utilisant la solution exacte proposée, il semble fonctionner différemment 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 
});

Source

2010-11-18 14:42:27

Je l'ai résolu en réglant la mise en page: « adapter » au panneau qui contient la grille

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

Source

2012-05-18 02:20:52 kathy

Veuillez décrire votre solution de manière plus détaillée Référer: [Comment répondre] (http://stackoverflow.com/questions/how-to-answer) – askmish

Existe-t-il un moyen d'obtenir un GridPanel ExtJS pour redimensionner automatiquement sa largeur, tout en restant contenu dans un code HTML non généré par ExtJS?

Répondre

Questions connexes