PDA

View Full Version : How can I load Grid to Viewport region?



Snowcore
30 Oct 2009, 8:56 AM
Hi all!
I've just started to learn Ext JS, please help!

I am creating Viewport and Grid separately.
I need to load Grid to Viewport's region ("center"), using Grid's constructor property.

I've tried this:


renderTo: Ext.getCmp('center')

but I'm getting error "ct is null"

How can I do this?

Jaitsu
30 Oct 2009, 9:34 AM
you're trying to render to an Ext Component rather than a HTML element...
the best thing to do is bind the GridPanel to a variable and then include that variable in your center region's items array

something like:



var grid = new Ext.grid.GridPanel({ ... });

var panel = new Ext.Panel({
...
region: 'center',
items:[
grid
]
});

Snowcore
30 Oct 2009, 9:40 AM
Thanks, but I need to add Grid after creating Panel, it is possible?

Jaitsu
30 Oct 2009, 9:42 AM
http://www.extjs.com/deploy/dev/docs/?class=Ext.Panel

have a look at the add method

Snowcore
2 Nov 2009, 2:05 AM
Yes, I know avout this method.
But I want to add new elements to viewport independently (not using viewport directly).

Animal
2 Nov 2009, 3:00 AM
What's that mean?

there's no adding "dependently".

Snowcore
2 Nov 2009, 3:51 AM
I need to add Grid to the viewport using Grid's config option

Animal
2 Nov 2009, 4:00 AM
What do you mean?

What do you need

If you want a grid as the center region, use the grid as the center region

Snowcore
2 Nov 2009, 4:56 AM
I have Viewport with few regions ("north", "west", "center" with id = "content").
And I need to add Grid to the center region (using Grid's config)

Animal
2 Nov 2009, 4:57 AM
configure the grid region: 'center' use it as a Viewport item.

Snowcore
2 Nov 2009, 5:49 AM
This is doesn't work, I'm getting error:
this.el is null



var grid = new Ext.grid.GridPanel({
id: 'artGrid',
store: store,
region: 'center',

...

Animal
2 Nov 2009, 6:50 AM
You have an error somewhere in your code then and showing 4 lines will not help will it?

Snowcore
2 Nov 2009, 6:58 AM
My Viewport:



var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: "north",
height: 40,
xtype: 'toolbar',
items: [{
text: 'Articles',
menu: [{
text: 'New'
},{
text: 'View all',
handler: Menu.loadArticles
},{
text: 'close',
handler: function(){
Ext.getCmp('artGrid').hide();
}
}]
}
]
},{
region: 'west',
xtype: 'panel',
split: true,
collapsible: true,
collapseMode: 'mini',
title: 'Some Info',
bodyStyle:'padding:10px;',
width: 200,
minSize: 200,
html: 'West'

},{
region: 'center',
xtype: 'panel',
id: 'center'
},{
region: 'south',
xtype: 'panel',
html: 'South'
}]
});


In another script I'm trying to add Grid to the "center" region:



var grid = new Ext.grid.GridPanel({
id: 'artGrid',
store: store,
title: 'Articles',
region: 'center',

height: 280,
items: gridToolbar,
columns: [
{header: "Title", dataIndex: 'title', width: 220},
{header: "Content", dataIndex: 'content', width: 350},
{header: "Date", dataIndex: 'created_at', renderer: Ext.util.Format.dateRenderer('d.m.Y')},
],
sm: sm,
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store
})
});

Animal
2 Nov 2009, 7:13 AM
So change your Viewport to USE "grid" as the center.