ojintoad
7 Nov 2006, 8:12 AM
Experimenting with the layout manager this week and tried to use your basic grid example to see how the grid would resize. I'm posting this in Help rather than Bugs since the layout manager is beta and I'm not exactly confident that I'm working with these new tools right. My goal is to have a grid completely fill a ContentPane at all times with scrollbars when necessary.
<html>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script>
Example = function(){
return {
init : function(){
var layout = new YAHOO.ext.BorderLayout(document.body, {
west: {
},
center: {
}
});
var innerLayout = new YAHOO.ext.BorderLayout('content', {
north: {
margins: {top: 10, bottom: 10, left: 10, right: 10},
split: true,
size: 33
},
center: {
}
});
var innerLayout2 = new YAHOO.ext.BorderLayout('innerContent', {
north: {
margins: {top: 10, bottom: 10, left: 10, right: 10},
autoScroll: true,
split: true,
minSize: 33,
size: 33
},
center: {
margins: {top: 10, bottom: 10, left: 10, right: 10},
autoScroll: true,
size: 33
}
});
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];
var myColumns = [
{header: "Company", width: 200},
{header: "Price", width: 75},
{header: "Change", width: 75},
{header: "% Change", width: 75},
{header: "Last Updated", width: 85 }
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);
var dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);
var grid = new YAHOO.ext.grid.Grid('grid', dataModel, colModel);
grid.render();
innerLayout2.add('north', new YAHOO.ext.ContentPanel('gridPanel', {resizeEl: document.getElementById('grid')}));
innerLayout2.add('center', new YAHOO.ext.ContentPanel('fields'));
innerLayout.add('north', new YAHOO.ext.ContentPanel('form'));
innerLayout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout2));
layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout));
layout.add('west', new YAHOO.ext.ContentPanel('nav', {fitToFrame: true}));
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
<style>
</style>
<link>
<link>
<body>
<div>
<div>
Nav
</div>
<div>
<div>
I'm a form!
</div>
<div>
<div>
<div>
Grid with 200px height
</div>
</div>
<div>
I'm a fields!
</div>
</div>
</div>
</div>
</body>
</html>
The idea is we have two layers of layout like {west, center: {north, center: {north: center}}}. The extra layout would hopefully be replaced by a 'block' layout that uses percentages to divide up space that I'd develop to your layout interface one documentation is revealed. Until then, I'm witnessing some strange resizing behavior.
Firstly, the style="height: 200px;" on the div id="grid" is necessary for IE to even show any of the example data. I'm not sure if that is intended behavior or an outstanding bug. Secondly, it seems the 'resizeEl' doesn't work. I have replaced the resizeEl with both just the div id ('grid') and taken it out completely and put fit to frame in the layout schema but neither will get the grid to resize, especially with the height: 200px there.
Secondly, when I take out the div id grid style=200px height, the strangest thing happens in firefox. As I resize the window, the grid div actually dwindles in size by a specific amount. It is the darndest thing how reliably it shrinks in a patterend way.
If there is some place I can look I'll be glad to run tests, I'll be trying to use your builder tool to construct an uncompressed version of complete source so I can run some debugging tools.
Edit: The formatter stripped my tags of attributes... so I put in clarifying marks.
Edit2: ARGHHHHHHHHH you can't put anything betweeen <atag> after the atag. I am defeated by security measures.
<html>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script>
Example = function(){
return {
init : function(){
var layout = new YAHOO.ext.BorderLayout(document.body, {
west: {
},
center: {
}
});
var innerLayout = new YAHOO.ext.BorderLayout('content', {
north: {
margins: {top: 10, bottom: 10, left: 10, right: 10},
split: true,
size: 33
},
center: {
}
});
var innerLayout2 = new YAHOO.ext.BorderLayout('innerContent', {
north: {
margins: {top: 10, bottom: 10, left: 10, right: 10},
autoScroll: true,
split: true,
minSize: 33,
size: 33
},
center: {
margins: {top: 10, bottom: 10, left: 10, right: 10},
autoScroll: true,
size: 33
}
});
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];
var myColumns = [
{header: "Company", width: 200},
{header: "Price", width: 75},
{header: "Change", width: 75},
{header: "% Change", width: 75},
{header: "Last Updated", width: 85 }
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);
var dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);
var grid = new YAHOO.ext.grid.Grid('grid', dataModel, colModel);
grid.render();
innerLayout2.add('north', new YAHOO.ext.ContentPanel('gridPanel', {resizeEl: document.getElementById('grid')}));
innerLayout2.add('center', new YAHOO.ext.ContentPanel('fields'));
innerLayout.add('north', new YAHOO.ext.ContentPanel('form'));
innerLayout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout2));
layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout));
layout.add('west', new YAHOO.ext.ContentPanel('nav', {fitToFrame: true}));
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
<style>
</style>
<link>
<link>
<body>
<div>
<div>
Nav
</div>
<div>
<div>
I'm a form!
</div>
<div>
<div>
<div>
Grid with 200px height
</div>
</div>
<div>
I'm a fields!
</div>
</div>
</div>
</div>
</body>
</html>
The idea is we have two layers of layout like {west, center: {north, center: {north: center}}}. The extra layout would hopefully be replaced by a 'block' layout that uses percentages to divide up space that I'd develop to your layout interface one documentation is revealed. Until then, I'm witnessing some strange resizing behavior.
Firstly, the style="height: 200px;" on the div id="grid" is necessary for IE to even show any of the example data. I'm not sure if that is intended behavior or an outstanding bug. Secondly, it seems the 'resizeEl' doesn't work. I have replaced the resizeEl with both just the div id ('grid') and taken it out completely and put fit to frame in the layout schema but neither will get the grid to resize, especially with the height: 200px there.
Secondly, when I take out the div id grid style=200px height, the strangest thing happens in firefox. As I resize the window, the grid div actually dwindles in size by a specific amount. It is the darndest thing how reliably it shrinks in a patterend way.
If there is some place I can look I'll be glad to run tests, I'll be trying to use your builder tool to construct an uncompressed version of complete source so I can run some debugging tools.
Edit: The formatter stripped my tags of attributes... so I put in clarifying marks.
Edit2: ARGHHHHHHHHH you can't put anything betweeen <atag> after the atag. I am defeated by security measures.