UIOutline and UIView without DominoUI?

[dominodeviant]

I am working on a app with a specific gui that I have to stick to and therefore I cant use the standard one with DominoUI.

If you look at tab3.jpg I have used UIOutline and UIview separatly:

var appTab3 = function(){
var showBtn, dialog;

return {
init : function() {
var outline = new Ext.nd.ux.UIOutline({
outlineName : 'oMetodsamlingPubliceradeMetoderWeb',
container : 'containerOutline'
});
var view = new Ext.nd.ux.UIView({
viewName : 'vMetoderRollWeb',
container : 'containerView',
showSingleCategory : 'sv'
});
outline = null;
view = null;
}// end init
};// end 'return'
}();

and this is then presented in:


<TR>
<TD>
<div id='containerOutline' style="width:160px; height:400px;"></div>
</TD>
<TD>
<div id='containerView' style="width:800px; height:400px;">Loading view, please wait...</div>
</TD>
</TR>

The tab3.jps is how I want it to look but I cant get the uioutline and uiview to work/communicate (i.e. the outline doesnt open views where the containerView is stated). Instead I get a "this.layout is null or not an object when clicking in the outlinemenu.

If you look at tab2.jpg I have used DominoUI:


var appTab2 = function(){
var showBtn, dialog;

return {
init : function() {
var outline = new Ext.nd.ux.DominoUI({
uiView : {
viewName : 'vMetoderRollWeb',
container : 'center',
showSingleCategory : 'sv'
},
uiOutline : {
outlineName : 'oMetodsamlingPubliceradeMetoderWeb'
//container : 'containerOutline'
}
});
}// end init
};// end 'return'
}();

But then the GUI from the application is overwritten and cant be seen or used, so this I would rather not use because I want to use ext.nd functionality and gui but isolated within the marked area (see divcontent.jpg), which is within a <Div>.

Is it possible to use DominoUI isolated as i want OR cant I use UIView and UI outline separately and make them work together as I presented?
Any ideas or help appreciated so I cant stay and use Ext.nd, which I really want. If its not possible I will have to abbondon my plans :(

Kind regards,

Darko

[bhaidaya]

Darko/DominoDeviant..
In order to get the two communicating you'll need to override the extnd funtion that is used on your outline.

something like this...


//Change the click of the outline entries to use updatePanel
Ext.nd.UIOutline.prototype.openEntry = function(node, e) {
var attributes, extndType, extndHref, extndPosition, entryId, title;
attributes = node.attributes;
extndHref = attributes.extndHref;

var viewUrl = (extndHref.indexOf('?') > 0) ? extndHref.split('?')[0] : extndHref.split('!')[0];
updatePanel( viewUrl, 'center', 'center-content-panel');

// cleanup
attributes, extndHref, viewUrl = null;
};

Where updatePanel() is a custom function to either create a new panel or open a new one either in a panel or an iframe according to what it needs to be.
good luck

[RWaters]

you could override the open function, or you could pass in a container to the outline that tells it which div or content panel you want to open the result in. If you look at the DominoUI code you'l see that we create a new content panel and pass it into the outline. If you pass in a string instead of a content panel it assumes that you passed in the ID to an HTML element on the page.

DominoUI.js - line 106
this.viewPanel = this.layout.add('center', new Ext.ContentPanel('extnd-view', {
autoCreate : true,
title : 'View',
closable : false,
fitToFrame : true
}));

DominoUI.js - line 79
this.uiOutline = new Ext.nd.UIOutline(Ext.apply({
layout : this.layout,
container : this.outlinePanel,
viewPanel : this.viewPanel,
uiView : this.uiView
},this.uiOutline));

This then later gets passed back into the call to create a new UIView in that openEntry function.

UIOutline.js - line 204
this.uiView = new Ext.nd.UIView({
layout : this.layout,
viewUrl : viewUrl,
viewParams : "",
container : this.viewPanel,
statusPanel : this.statusPanel
});

[bhaidaya]

I tried this out and it bombed on this line in the Ext.nd.UIOutline.prototype.openEntry() function


this.viewPanel.setContent("");
i get "this.viewPanel.setContent is not a function"

Heres how i set it up in my $$DefaultViewTemplate

<script language="JavaScript" type="text/javascript">
var myApp = function(){
var showBtn, dialog;

return {
init : function() {
var view = new Ext.nd.UIView({
viewName : '<Computed Value>',
container : 'view-content',
showActionbar: true,
showSearch: true,
count: 31
, showSingleCategory: '<Computed Value>' //hidden if &restrictToCategory doesn't exist on the Searchstring
});
var outline = new Ext.nd.UIOutline({
outlineName : 'Default',
container: 'view-navigator',
viewPanel: 'view-content',
uiView: view
});

// avoid circular reference memory leaks
outline = null;
view = null;
} // end init
} // end 'return'
}();


if ( typeof Ext == "object" && typeof myApp == "object" ) Ext.onReady( myApp.init, myApp, true );
</script>

Am i doing something wrong?

[RWaters]

I don't think you were doing anything wrong, I think it just works differently than I thought it did. I will put in a fix so that openEntry can properly handle that.

[RWaters]

Alright, be warned I haven't had time to test this out, but I think these changes should fix the problem above and allow you to use the ID of a div like we talked about.


Index: UIOutline.js
===================================================================
--- UIOutline.js (revision 151)
+++ UIOutline.js (working copy)
@@ -193,7 +195,11 @@
if (extndType == "2" || extndType == "20") {
// delete the current grid
if (this.uiView.grid) {
- this.viewPanel.setContent("");
+ if (this.viewPanel.setContent) {
+ this.viewPanel.setContent("");
+ } else {
+ Ext.get(this.viewPanel).update("");
+ }
try {
this.uiView.grid.destroy();
} catch(e) {}
@@ -208,9 +214,11 @@
container : this.viewPanel,
statusPanel : this.statusPanel
});
-
- this.viewPanel.setTitle(title);
- this.layout.showPanel(this.viewPanel);
+
+ if (typeof this.viewPanel != "String") {
+ this.viewPanel.setTitle(title);
+ this.layout.showPanel(this.viewPanel);
+ }
} else if (extndHref != "") {
var entry = this.layout.getRegion('center').getPanel(entryId);
if(!entry){

[bhaidaya]

Thanks :)
I'll try this today....

[bhaidaya]

Worked Like a charm cept one minor typo..


+ if (typeof this.viewPanel != "String") {

should be lower case s in "string"


+ if (typeof this.viewPanel != "string") {

Thanks bud