PDA

View Full Version : calling doLayout() on Grid not working



isamudaison
28 Nov 2007, 11:37 AM
I have a GridPanel inside of a Viewport. I dynamically add a tbar to the GridPanel, and the GridPanel gets shifted downward in the Viewport. I've tried calling a doLayout() and even a syncSize() on the grid component after the tbar has been added, but it does nothing. I've even tried calling them on the grid's container (a panel in the viewport, and on the viewport itself). The kicker is, when I re-size the viewport (via a slider) the grid re-sizes itself appropriately. what does that resizer call to make that happen?

tdondich
28 Nov 2007, 12:11 PM
It's probably doing a doLayout on the container of the grid component. Is the Grid inside a Panel with a layout? What's the layout setup? Code would help.

isamudaison
28 Nov 2007, 12:55 PM
Yes, I've tried calling a doLayout on: the containing panel, and the containing viewport, but nothing helps. Here's the setup:


var centerPanel = {
region:'center',
layout:'fit',
frame : true,
monitorResize: true,
items: detailPane
};

var westPanel = {
region: 'west',
layout: 'fit',
collapsible: true,
split:true,
width: 500,
monitorResize: true,
frame : true,
items: grid
}

//The actual viewport -> only render the things requested
var viewPort = new Ext.Viewport({
layout:'border',
style:'background-color:transparent;',
items: [westPanel, centerPanel]
});

And here's the Grid definition:


var grid= new Ext.grid.GridPanel(
{
id: GRID_ID,
store: ds,
cm: colModel,
trackMouseOver: true,
tbar: new Ext.Toolbar({
id: GRID_ID + "-Toolbar",
buttons: [{
disabled: true,
id:"buttonFix"
}]
}),
bbar: bottomToolbar,
loadMask: true,
stripeRows: true
}
);

I've tried teh following after adding my dynamic tbar:

grid.ownerCt.ownerCt.doLayout(); // doLayout on the viewport
grid.ownerCt.ownerCt.syncSize(); // syncSize on the viewport
grid.ownerCt.syncSize(); //.. on the container panel
grid.ownerCt.doLayout();
grid.syncSize();
grid.doLayout();

None of these (any combination or all together) does what it should (?) be doing.

isamudaison
29 Nov 2007, 2:10 PM
No one?

tryanDLS
29 Nov 2007, 2:42 PM
You would likely get an answer quicker if you posted a full example of what you were trying to do instead of chunks with missing pieces. I don't see anything in your that indicates a dynamic toolbar. The layout which it looks like you're trying to show does not require calls to doLayout() or any of the other functions. See this example


Ext.onReady(function() {
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
..data from array grid example...
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
trackMouseOver: true,
loadMask: true,
stripeRows: true,
tbar:['Testing', '-', 'One', '-','Two', '-','Three'],
bbar: new Ext.Toolbar({
id:'bbar1',
buttons:[{
text:'Add',
id:'btnAdd'
}, '-', {
text:'Delete',
id:'btnDelete'
}]
})
});

var centerPanel = {
region:'center',
layout:'fit',
frame : true,
items: {html:'some content'}
};

var westPanel = {
region: 'west',
layout: 'fit',
collapsible: true,
split:true,
width: 500,
frame : true,
items: grid
};

var viewPort = new Ext.Viewport({
layout:'border',
items: [westPanel, centerPanel]
});
});

isamudaison
29 Nov 2007, 3:26 PM
Well if I posted all of the code no one would likely understand it, as it is spread across multiple .gsp pages. Is there something special that the split border does when re-sizing? If I could just call whatever it calls I'll be golden.

isamudaison
29 Nov 2007, 6:14 PM
Wow! I had to do this, in this order specifically:

grid.syncSize();
grid.ownerCt.syncSize();
grid.ownerCt.ownerCt.syncSize();

That is, sync the grid's size
sync the grid's container panel size
then sync the viewport size.

It seems kind of silly that the syncSize doesn't propagate all the way to the root parent container, in what case(s) would you want to sync the size of something and NOT have its parents sync?

agrath
16 Nov 2008, 5:44 PM
I had the same problem with trying to get (3) toolbars to show up on a grid fitting inside a tabpanel.
The 3 sync size commands worked, after I had tried a pile of different combinations.


Wow! I had to do this, in this order specifically:

grid.syncSize();
grid.ownerCt.syncSize();
grid.ownerCt.ownerCt.syncSize();

That is, sync the grid's size
sync the grid's container panel size
then sync the viewport size.

It seems kind of silly that the syncSize doesn't propagate all the way to the root parent container, in what case(s) would you want to sync the size of something and NOT have its parents sync?

aktolman
2 Dec 2008, 8:52 AM
Im having the same problem, i have a viewport with some tabs in the centre. Within one of the tabs i have a panel with a number of items within it, i can not seem to get the grids to render correctly on initial load. The only render correctly after i have sorted a column.

Its making me crazy. Tried all the sync size stuff and it just doesnt work for me. What am i doing wrong?

Help me obiwan.



// example grid, the vacancySendAgentsGrid is the same as this and the sendPanelPanel is just plain text
var vacancySendJobboardGrid = new Ext.grid.EditorGridPanel({
renderTo: 'vacancySendJobboard',
id: 'vacancySendJobboardGrid',
region: 'north',
bodyStyle: 'height: 90%;width:100%;',
style: 'height: 40%;',
plugins: [vacancySendJobboardFilters,sendcheckBox],
store: vacancySendJobboardStore,
cm: vacancySendJobboardColModel,
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
viewConfig:
{
forceFit: true,
enableRowBody: true,
showPreview: true

},
loadMask: false,
stripeRows: true,
border: false,
title: 'Job Board',
monitorResize: true,
enableColumnMove: true,
autoExpandColumn: true,
autoFitColumns: true,
autoHeight: false,
autoWidth: false,
frame: false,
clicksToEdit: 1,
split: true
});

var vacancySendAgentsGrid = new Ext.grid.EditorGridPanel({
renderTo: 'vacancySendAgents',
id: 'vacancySendAgentsGrid',
region: 'center',
bodyStyle: 'height: 90%;width:100%;',
style: 'height: 40%;border-top: 1px solid #99BBE8;',
plugins: [vacancySendAgentsFilters,sendcheckBox],
store: vacancySendAgentsStore,
cm: vacancySendAgentsColModel,
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
viewConfig:
{
forceFit: true,
enableRowBody: true,
showPreview: true
},
loadMask: false,
stripeRows: true,
border: false,
title: 'Agency',
monitorResize: true,
enableColumnMove: true,
autoExpandColumn: true,
autoFitColumns: true,
autoHeight: false,
autoWidth: false,
frame: false,
clicksToEdit: 1,
split: true
});

// problem panel
var vacancySendTab = new Ext.Panel({
title: 'Send Vacancy',
bodyBorder: false,
border: false,
margins: '0 0 0 0',
autoScroll: false,
split: true,
items: [
vacancySendJobboardGrid
,vacancySendAgentsGrid
,sendPanelPanel
]
});
// tab panel with in a view port
tabPanel = new Ext.TabPanel({
region: 'center',
deferredRender: false,
bodyBorder: false,
border: false,
activeTab: 0,
margins: '0 0 0 0',
layoutOnTabChange: true,
items:[
{contentEl:'vacancyDetails',
title: 'Vacancy',
autoScroll:true}
,vacancyJournalGrid
,vacancySendTab
]
});

aktolman
3 Dec 2008, 1:11 AM
Anyone?

aktolman
4 Dec 2008, 2:00 AM
or if anyone knows how to fire the event that gets fired when you click on a column to reorder that would be great!

Animal
4 Dec 2008, 2:37 AM
Will this work for you?

http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel&member=headerclick

aktolman
4 Dec 2008, 2:50 AM
Excrement! I should be able to find it now! Ta man!

aktolman
4 Dec 2008, 4:40 AM
Hmmm, having some trouble finding out whats doing the resizing here, I can get the stack up until the point of calling onheaderclick, but cant seem to find the resizing part.

Its killing me.

Animal
4 Dec 2008, 4:43 AM
You want to know about column width changes? Though you said click?

http://extjs.com/deploy/dev/docs/?class=Ext.grid.ColumnModel&member=widthchange

aktolman
4 Dec 2008, 4:49 AM
Yeah, basically, when it renders, the columns are all massively wide! The only way i can get it to look correct is by clicking on the order of a column. After a resize the window i have to do the same to get it to render correctly.

I have 2 grids within a single panel both with width and height set with a % in the css.

Animal
4 Dec 2008, 4:57 AM
Columns should be the width you specify.

Unless you use autoFill or forceFit

You cannot use %age widths. Use layouts which explicitly size their child Components.

aktolman
4 Dec 2008, 5:09 AM
[COLOR=black][FONT=Verdana]I

Animal
4 Dec 2008, 5:24 AM
I was forced in to doing it like this because when I initially used a layout style it did not render correctly with multiple grids inside a single panel.

Then you had a bug.

Probably you did not inform the Container you put the Grids in how you were hoping to see them layed out.

aktolman
4 Dec 2008, 5:59 AM
Hmmm, yeah a bug in my code.

I think ive just got a little bogged down in it, need to clear out the crap and start again.

Animal
4 Dec 2008, 6:00 AM
That might be a good idea.

Start simple, and ensure you grasp each concept before building it into part of a larger, more complex whole.

aktolman
4 Dec 2008, 6:03 AM
Ha Ha! Yeah, we will see.

aktolman
4 Dec 2008, 6:21 AM
I think the real problem is the lack of % heights and widths, kind of expect it! Anyhow, ive sorted it now. Thanks for help!

Animal
4 Dec 2008, 6:25 AM
For border layouts: http://extjs.com/forum/showthread.php?t=48859

For anchor and form layouts you have the anchor config.

aktolman
4 Dec 2008, 6:44 AM
Yeah, im just looking at the anchor layout, because of the way the system im working on works, its pretty hard to use that.

Why not be able to just say % heights and %widths?

Animal
4 Dec 2008, 7:28 AM
% of what? In what layout?

As I linked to, you can with border layouts. anchor does this, and column layout uses decimal fractions rather than %. You can do anything.

aktolman
4 Dec 2008, 8:30 AM
Yeah, I just feel it can be a little bit convoluted at points.

Animal
4 Dec 2008, 10:25 AM
Where? It's quite simple.

A Container contains Components.

The Container's layout manager renders those Components according to what kind of manager it is and configs within those Components that inform it how they wish to be managed.

Very simple.

aktolman
4 Dec 2008, 10:40 AM
Maybe you think its simple and it works for you being a ext support user. But coming from the point of view of someone who is new to ext js and is trying to use it in an enterprise application, I think at points it is convoluted.

And hey, maybe it needs to be.

But why make the container control the components within it? why not make the properties of the components control themselves and leave that down to the choice of the programmer. Why does the height control the height for some, and anchor control the height for others?

Animal
4 Dec 2008, 10:45 AM
Because Components are reusable.

Take a GridPanel for instance.

You can add it to a TabPanel. And the TabPanel's card layout will manage it and shuffle it to the top position when required.

Yuo can add it to a Container which uses accordion layout and it will expand and contract on demand.

You can add it to a border layout, and the border layoutr manager manages it as you woudl expect.

You can add it to an anchor layout and it is sized proportionally to the size of the Container.

It's not convolution, it's flexibility.

Animal
4 Dec 2008, 10:47 AM
"Why does the height control the height for some, and anchor control the height for others?
Edit/Delete Message"

Because height != anchor.

In an anchor/form layout, you can have a Grid in there which is



{
...
height: 300,
anchor: -20
..
}


So that it is 300 pixels high, and always anchored so that its right margin is 20 pixels from the right of the Container, however the Container gets resized.

Flexibility to produce any fluid layout you can imagine.

aktolman
4 Dec 2008, 10:55 AM
Well I think it is flexibility in the example you gave. However I do not think it provides as much flexibility as if you left the layout down to the actual component (where possible).

In the work I have been doing I have not once had a grid control that has the exact same settings as an other grid control. And I have not had to use that grid control in a tab, a accordion container or a border layout.

But as I said I am new to this and I can see advantages to both ways. Im off out for dinner. Have fun.

Animal
4 Dec 2008, 10:58 AM
OK, many people go use a GridPanel in a border layout. I have used them in border layouts and in accordions.

A Component cannot dictate how it is to behave inside a Container. The Container's layout manager renders, and may perform sizing and positioning based on configs (like anchor, region, collapsible etc) in the child Component.

aktolman
5 Dec 2008, 1:00 AM
Ok, in response to your other point, why not have float, width and margin, like in html?

Animal
5 Dec 2008, 3:08 AM
Er, this is just HTML. Ext is a fancy way of creating HTML elements.

if you just want things rendered and left as is, use the default layout which just renders and leaves them.

Then you can have the child components styled to float, have margins, whatever.

People forget when they see an Ext app that it's just plain old HTML.

aktolman
5 Dec 2008, 3:12 AM
Yes!!! thats my point it is just HTML! So why do it different (apart from where it makes sense to (tabs etc))

Anyhow, this has had enough air time, enjoy your friday and weekend!

Animal
5 Dec 2008, 3:15 AM
Christ!

Ext adds value to HTML.

What, shall we just chuck out border layouts and anchor layouts and accordion layouts and form layouts and column layouts and table layouts?

And the user extended ones like RowFitLayout?

And just go back to hardcoding HTML?

Nobody is forcing you to use these nice layouts.

aktolman
5 Dec 2008, 3:23 AM
Christ!

Ext adds value to HTML.

What, shall we just chuck out border layouts and anchor layouts and accordion layouts and form layouts and column layouts and table layouts?

And the user extended ones like RowFitLayout?

And just go back to hardcoding HTML?

Nobody is forcing you to use these nice layouts.

Christ cannot help you!

Animal, I think you are taking this discussion to seriously. My point was at the start of this was that at points it can be convoluted from the point of view of someone who is new to Ext JS. I understand how it works etc, I just thought that perhaps there should be more control of behaviour of a component by changing the properties of that component, not by changing the properties of the components container.

And for the record I do like Ext js, there are other frames works but im using this one.