Is there any way to get an ExtJS GridPanel to automatically resize its width, but still be contained inside some non-ExtJS-generated HTML?_问答_开发者

Is there any way to get an ExtJS GridPanel to automatically resize its width, but still be contained inside some non-ExtJS-generated HTML?

开发者 https://www.devze.com 2022-12-22 03:55 出处：网络

I want to include an ExtJS GridPanel inside a larger layout, which in turn must be rendered inside a particular div in some pre-existing HTML that I don\'t control.

I want to include an ExtJS GridPanel inside a larger layout, which in turn must be rendered inside a particular div in some pre-existing HTML that I don't control.

From my experiments, it appears that the GridPanel only resizes itself correctly if it's within a Viewport. For instance, with this code the GridPanel automatically resizes:

new Ext.Viewport(
    {
        layout: 'anchor',
        items: [
   开发者_JAVA技巧         {
                xtype: 'panel',
                title: 'foo',
                layout: 'fit', items: [
                    {
                        xtype: 'grid',
                        // define the grid here...

but if I replace the first three lines with the lines below, it doesn't:

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

The trouble is, Viewport always renders directly to the body of the HTML document, and I need to render within a particular div.

If there is a way to get the GridPanel to resize itself correctly, despite not being contained in a ViewPort, that would be ideal. If not, if I could get the Viewport to render the elements within the div, I'd be fine with that. All of my ExtJS objects can be contained within the same div.

Does anybody know of a way to get a GridPanel to resize itself correctly, but still be contained inside some non-ExtJS-generated HTML?

To resize Ext JS components when they are not in a Viewport, you need to pass along browser window resize events.

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

In your example, store the Panel into var panel, and then set up the event handler after the var declaration but still inside of Ext.onReady.

Here is a full single page solution:

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

Note that I've removed the redundant panel (a GridPanel is a Panel, so no need to wrap it), and used layout fit instead of anchor. Layout fit is actually the key to a fluid layout. Make the browser smaller, then bigger. You'll see the grid always fills the entire width, with the exception of the padding.

I don't have enough reputation to "comment anywhere" yet, but I do have a fix to the "not working when window is resized smaller" problem described by HOCA. I was having the same problem too, using the solution outlined by this answer. After Googling around for a while, I found this thread on the sencha.com website. Using a similar technique to the one described there seems to work better cross-browser (using the exact solution offered there seems to work somewhat differently between 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
});

In IE6 and Chrome your solution doesn't seem to work when the browser window is resized/made smaller that the original size. It does, however, resize properly when the browser window is resized larger. Does the Ext.EventManager.onWindowResize(panel.doLayout, panel) not fire when the browser window is made smaller?

I solved it by setting the layout: 'fit' to the panel that contains the grid

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