Resize GridPanel when containing div is resized

[Asfand Yar Qazi]

Hi,

Basically, I want to do what this guy did with raw ExtJS, but with
Netzke:

Is there any way to get a GridPanel to automatically resize its width,
but still be contained inside some non-ExtJS-generated HTML? (http://
stackoverflow.com/questions/2366211/is-there-any-way-to-get-an-extjs-
gridpanel-to-automatically-resize-its-width-but)

When I add a GridPanel to my elastic width web-page, it does not
resize when the window resizes, along with everything else. I've
heard several ExtJS questions about this, and some say I should pass
along the window resize event to the panel, while others say I should
put it in another panel. I don't know how to get the panel object and
pass it to a javascript function in netzke, and putting it in the
centre of a GridLayoutPanel didn't work either.

Any ideas?

Thanks, regards,
Asfand

[NomadCoder]

If you manage to do it with any Ext panel, it should be possible with Netzke.

You can access the grid by Netzke.page.your_grid_name, where your_grid_name is what you provide as the first parameter to the "netzke" helper in your view. I'll add this bit to the documentation.

------------------
NomadCoder
Netzke Development Team
Follow me on Twitter: http://twitter.com/nomadcoder

[Asfand Yar Qazi]

On Mar 1, 4:46 pm, NomadCoder <nmco...@gmail.com> wrote:
> If you manage to do it with any Ext panel, it should be possible with Netzke.
>
> You can access the grid by Netzke.page.your_grid_name, where your_grid_name is what you provide as the first parameter to the "netzke" helper in your view. I'll add this bit to the documentation.
>

OK, I can see what you're doing..... however I can't access that
variable in a js_after_constructor (where is the only place I can
think of where to do this).

so following the link I posted ( http://
stackoverflow.com/questions/2366211/is-there-any-way-to-get-an-extjs-
gridpanel-to-automatically-resize-its-width-but ), I've done this:

def js_after_constructor
return <<-'E0L'
Ext.EventManager.onWindowResize(this.doLayout, this);
E0L
end


Can you see what I'm doing? It doesn't work, can you tell me what I
should be doing?

Thanks, regards,
Asfand

[NomadCoder]

I'd say you need to experiment with your own Ext.onReady on the page.

Btw, not sure if the old version of Netzke that you apparently are using will have Netzke.page - just check Netzke in Firebug to make sure.

------------------
NomadCoder
Netzke Development Team
Follow me on Twitter: http://twitter.com/nomadcoder

> --
> You received this message because you are subscribed to the Google Groups "netzke" group.
> To post to this group, send email to net...@googlegroups.com.
> To unsubscribe from this group, send email to netzke+un...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/netzke?hl=en.
>

[Asfand Yar Qazi]

I'm using netzke-core and netzke-basepack from github master - is that
an old one? I'd have thought that was the latest stable release.

OK, I've got it working. Here is what I basically have in a helper:

def helper_function
one = netzke(:grid_outer,
:class_name => "Netzke::Basepack::Panel",
:layout => :fit,
:items => [
{ :name => :grid,
:class_name => 'MyOwnGridPanelDerivedClass' }
]
)

two = javascript_tag(<<-'EOL')
Ext.onReady(function(){
var outerpanel = Netzke.page.gridOuter;
Ext.EventManager.onWindowResize(outerpanel.doLayout,
outerpanel);
});
EOL

return one + "\n" + two
end

Then in the view:

<%= helper_function %>


Can anyone think of a better way of doing this?

Thanks, regards,
Asfand

[NomadCoder]

Alright, I assumed that you're using the older version because you were using js_after_constructor, which has gone a while ago. You must have seen it in some outdated tutorials - sorry for that.

It seems that the wrapper, a Panel with layout 'fit', is needed only because the GridPanel itself doesn't handle resizing well - I see that the top toolbar does change on resizing, while the rest does not. It's a pity this wrapper is needed - maybe this will be solved in Ext JS 4?

It's possible to incorporate the behavior you created into the component itself. So, you may need to create a Netzke::Base-based component (the wrapper), nest your GridPanel inside of it, maybe pass all the config down to the GridPanel (so that you can use this component just as a GridPanel itself), and then override the onRender method:

js_method :on_render, <<-JS
function(ct){
Ext.EventManager.onWindowResize(this.doLayout, this);
#{js_full_class_name}.superclass.onRender.call(this, ct);
}
JS

This way you'll not need to create another view helper, the logic will be incapsulated in the component.

[Asfand Yar Qazi]

That seems a much more elegant solution, thanks.

[NomadCoder]

It seems that the wrapper, a Panel with layout 'fit', is needed only because the GridPanel itself doesn't handle resizing well - I see that the top toolbar does change on resizing, while the rest does not. It's a pity this wrapper is needed - maybe this will be solved in Ext JS 4?

Btw, I seem to have found a hint about that (from http://www.sencha.com/blog/ext-js-4-grid-components): 

Standardized Layout

Along with a smarter rendering pipeline, many parts of the new grid have been made into proper Components and integrated into the standard layout management system rather than relying on custom internal markup and CSS. This enables us to unify the grid's rendering process with the rest of the framework, while still retaining a pixel-perfect UI experience.