PDA

View Full Version : Container for a grid



whisher
12 Jan 2012, 7:34 AM
Hi,
be patience I'm new at ext.
I'm just playing around with MVC Application docs.
I need to change the container
from
Ext.container.Viewport
to
Ext.panel.Panel
or
Ext.container.Container
What's the different and what's the best way to save my current old layout ?
Is there a way to put the grid directly in launch ?

tobiu
12 Jan 2012, 7:45 AM
i definitely recommend to stick to the viewport. you can put panels, containers etc. inside of it (items) with any layout you like to.

friend
12 Jan 2012, 7:54 AM
An Ext.container.Container is a base class used by any Component which can contain child Components. A Panel inherits Container functionality (via AbstractPanel), so that the Panel can maintain a list of child Components and tacks on a bit more functionality.

In short, a Container is considered simpler/lighter-weight than a Panel and has fewer features.

Regardless, I'm with Tobiu. A Viewport is typically the best top-level container to use.

whisher
12 Jan 2012, 8:27 AM
Thanks for the replies.
I got the point but I need to save my current/old layout as well.
Is there a way to do so ?

friend
12 Jan 2012, 9:38 AM
I'm not sure we understand what you mean by 'save the old layout'. Can you please explain in more detail what you're trying to accomplish?

whisher
12 Jan 2012, 9:47 AM
I'm trying to put ext in a zend framework project
(admin side) to manege users, categories, news
and so on.
So my first thought is to manage the overall module (admin)
with zf (menu, breadcrumbs etc) and the single controller
with ext.

Header
Menu
Breadcrumbs
EXT
Footer

friend
13 Jan 2012, 11:20 AM
Add a <div id="extPanel"> right after the breadcrumbs section of your page. Then in a script block, in the <head> of your page, you can do something like this:


<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
title: 'Ext Content',
height: 400,
renderTo: Ext.get('extPanel'),
items: [{
<...> // whatever components you need here.
}]
});
});
</script>


Note that you at least must supply a height for the Panel. If no width is declared, the panel will most likely fit to 100% of the page (where your base CSS config may affect this behavior).

whisher
13 Jan 2012, 1:18 PM
Thanks for the tip I just made quite the same
in my app file


launch: function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.get('article'),
items: {
xtype: 'userlist'
}
});
}