PDA

View Full Version : ContentPanel config



Animal
4 Nov 2006, 5:19 AM
You can't set the URL in the config:



this.formPanel = new YAHOO.ext.ContentPanel("formPanel",
{
title:"The Form",
fitToFrame:true,
url:"CountrySubEntity.jsp",
});
this.formPanel.setActiveState(true);


You have to set it seperately:



this.formPanel.setUrl("CountrySubEntity.jsp");
this.formPanel.setActiveState(true);


I thought that's what Config objects did? Set properties in their owner objects?

jack.slocum
4 Nov 2006, 2:02 PM
Take a look at the setUrl method, it's not a property. It's a convenience method that sets up the UpdateManager for you.

BTW setActiveState is considered protected (only to be used by related classes) is there any reason you are calling it directly? It is called by the region when that panel becomes active. I'm not sure what the results are when it is called directly.

I suppose it's possible to add a config option to call setUrl but you'd lose the other parameter options.

Animal
4 Nov 2006, 11:20 PM
OK, I'll just keep the setUrl call, no problem.

But if I dont manually set the active state, how do I get it to pull its content down?

jack.slocum
5 Nov 2006, 4:03 AM
You want it to load immediately instead of on activation?

Animal
5 Nov 2006, 9:58 AM
You want it to load immediately instead of on activation?

Well yes.

But how do you activate it is the setActiveState method is private?

BTW, the new idea using a BorderLayout to view a Grid in North, and details of the selected row in Centre is going well.

The ListManager object must be able to use an ordinary DIV as a container, or a BasicDialog.

The thing is, when the document in Centre overflows it starts off looking fine - the Centre panel has a scroll bar.

If I collapse North, then expand North, the Dialog's whole body area gets a scrollbar. This is fixed just by clicking and holding the split bar, or by resizing the Dialog by 1px.

Here's my code now:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="js/yahoo.js"></script>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/dom.js"></script>
<script type="text/javascript" src="js/logger.js"></script>
<script type="text/javascript" src="js/connection.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
<script type="text/javascript" src="js/dragdrop.js"></script>
<script type="text/javascript" src="js/container.js"></script>
<script type="text/javascript" src="js/yui-ext.js"></script>
<style type="text/css">
@import "css/basic-dialog.css";
@import "css/container.css";
@import "css/grid.css";
@import "css/layout.css";
@import "css/reset-min.css";
@import "css/resizable.css";
@import "css/tabs.css";
@import "css/toolbar.css";
</style>
<script type="text/javascript">
YAHOO.widget.Logger.enableBrowserConsole();

// Simplified way of creating a BasicDialog from scratch
function createDialog(title, content, footer)
{
return new YAHOO.ext.BasicDialog(
YAHOO.ext.DomHelper.append(document.body,
{
tag:"div",
id:YAHOO.util.Dom.generateId(false, title ? title.replace(/\s/, "") : ""),
style:{visibility:"hidden"},
cls:"ydlg",
children: [
{
tag:"div",
cls:"ydlg-hd",
html:title || "&#0160"
},
{
tag:"div",
cls:"ydlg-bd",
html:content || "&#0160"
},
{
tag:"div",
cls:"ydlg-ft",
html:footer || "&#0160"
}]
}),
{
height:400,
width:640
});
}

// Simplified way of getting a halfway decent Dialog control out of a YUI Panel
function createPanel(title, content, footer)
{
var result = new YAHOO.widget.Panel(
YAHOO.ext.DomHelper.append(document.body,
{
tag:"div",
id:YAHOO.util.Dom.generateId(false, title ? title.replace(/\s/, "") : ""),
style:{visibility:"hidden"},
children: [
{
tag:"div",
cls:"hd",
html:title || "&#0160" // no-break space.
},
{
tag:"div",
cls:"bd",
html:content || "&#0160"
},
{
tag:"div",
cls:"ft",
html:footer || "&#0160"
}]
}),
{
height:"400px",
width:"640px",
draggable:true,
fixedcenter:true,
constraintoviewport:true,
visible:false,
close:true
});
result.render(document.body);

// The "element" property is the shadow, the real container is its 1st child
result.panelEl = YAHOO.ext.Element.get(result.element.firstChild, true);
result.headerEl = YAHOO.ext.Element.get(result.header, true);
result.bodyEl = YAHOO.ext.Element.get(result.body, true);
result.footerEl = YAHOO.ext.Element.get(result.footer, true);

// Function to adjust the body element to be exactly the right depth and width
result.handleResize = function()
{
result.bodyEl.setHeight(result.panelEl.getHeight() -
(result.headerEl.getHeight() + result.footerEl.getHeight()));
result.bodyEl.setWidth(result.panelEl.getWidth());
}.createDelegate(result);

result.panelEl.beginMeasure();
result.handleResize();
result.panelEl.endMeasure();

result.resizer = new YAHOO.ext.Resizable(result.panelEl);
result.resizer.on("resize", result.handleResize);
result.beforeResize = result.resizer.beforeResize;
result.resize = result.resizer.resize;
return result;
}

YAHOO.util.Event.addListener(window, "load", function()
{
YAHOO.ext.UpdateManager.defaults.loadScripts = true;
new ListManager(
{
container:"content",
detailUrl:"CV.htm" // or whatever larg document you have handy...
});

var foo = createDialog("FooBar Dialog");
foo.show();
new ListManager(
{
container:foo,
detailUrl:"CV.htm" // or whatever larg document you have handy...
});

});

function ListManager(config)
{
var c = config.container;
if (c instanceof YAHOO.ext.BasicDialog)
{
this.container = c.body;
c.on("resize", this.doLayout, this, true);
}
else if (c instanceof YAHOO.widget.Panel) // TODO: Phase out YUI Panels
{
this.container = YAHOO.ext.Element.get(c.body);
if (c.resizer)
c.resizer.on("resize", this.doLayout, this, true);
}
else // In a DIV. Expand the height to fill the viewport
{
this.sizeToWindow = true;
this.container = YAHOO.ext.Element.get(c);
YAHOO.util.Event.addListener(window, "resize", this.doLayout, this, true);
}
this.detailUrl = config.url;

this.container.setStyle({"position": "relative"});
YAHOO.ext.DomHelper.append(this.container.dom,
{
tag:"div",
cls:"ylayout-inactive-content",
id:"listPanel"
});
YAHOO.ext.DomHelper.append(this.container.dom,
{
tag:"div",
cls:"ylayout-inactive-content",
id:"detailPanel"
});

this.listHeight = Math.max(this.container.getHeight() * 0.25, 100);
this.layout = new YAHOO.ext.BorderLayout(this.container,
{
north: {
split:true,
initialSize: this.listHeight,
titlebar: true,
collapsible: true,
minSize: 100,
resizeTabs: true,
autoScroll: false
},
center: {
titlebar:true,
resizeTabs: true,
autoScroll: true
}
});
this.layout.beginUpdate();
this.listPanel = new YAHOO.ext.ContentPanel("listPanel",
{
title:"The List",
fitToFrame:true
});
this.detailPanel = new YAHOO.ext.ContentPanel("detailPanel",
{
title:"The Form",
fitToFrame:true,
});
this.layout.add("north", this.listPanel);
this.layout.add("center", this.detailPanel);
this.listRegion = this.layout.getRegion("north");
this.detailRegion = this.layout.getRegion("center");
this.listRegion.on("collapsed", this.doLayout, this, true);
this.listRegion.on("expanded", this.doLayout, this, true);
this.detailRegion.on("resized", this.doLayout, this, true);

this.detailPanel.setUrl(config.detailUrl);
this.detailPanel.setActiveState(true);
this.doLayout();
this.layout.endUpdate();
}

ListManager.prototype =
{
/**
To allow for multiple events firing to redo the layout of the ListManager,
delay a layout operation for 50 milliseconds to allow other requests to
cancel a pending request.
*/
doLayout: function()
{
YAHOO.widget.Logger.log("Relaying ListManager " + this.container.id);
if (!this.layoutTask)
{
this.layoutTask = new YAHOO.ext.util.DelayedTask(function()
{
this.layout.beginUpdate();

// If ListManager container in a DIV, ensure it uses all available depth
if (this.sizeToWindow)
this.container.setHeight(YAHOO.util.Dom.getViewportHeight() - this.container.getY());

// this.detailPanel.getEl().setHeight(this.layout.getEl().getHeight() - this.listPanel.getEl().getHeight());

this.layout.layout();
this.layout.endUpdate();
}, this);
}
this.layoutTask.delay(50);
}
};
</script>
<title>Test</title>
</head>
<body>
<div id="header" style="background-color:blue;color:white;font-size:200%;text-align:center">
The Title!
</div>
<div id="content">
</div>
</body>
</html>

jack.slocum
5 Nov 2006, 1:38 PM
That's a lot of code to digest. The first thing I would make certain of is the Panel body is NOT overflow:auto. It must be overflow hidden for the Layout to work properly.

You may also want to listen for the "regioncollapsed"/"regionexpanded" events and execute your result.onResized code to update the dialogs body.