PDA

View Full Version : How To: Use a view without an outline?



ccoley3910
27 Feb 2008, 11:47 AM
Help! Would like to use Ext to serve up views with out a view outline..

ccoley3910
27 Feb 2008, 4:17 PM
For all the newbies.. Here is how it's done...

Create a domino form.
On the form load extnd using the HTML HEAD of the document.
In the JS Header or your extnd js script file for this form\application do this..


myView = new Ext.nd.UIView({
viewName: 'THE_VIEW_NAME_TO_LOAD_VIA_ALIAS',
gridConfig: {
renderTo: 'notesView'
}
});

Note: View alias are recommended to use because view name can contain characters that cause the parser problems.
Also, the variable myView contains the view so you can use javascript to manipulate it. The documentation states that there is a "refresh" method defined so you can call it to refresh the view. ex.. myView.refresh() :D

RWaters
28 Feb 2008, 2:22 PM
Glad you were able to figure it out. The demo database we now include provides some samples that you should be able to copy from and modify for your need.

khawkins
11 Mar 2008, 11:33 AM
I must be missing something, but my outline keeps loading with my view. Any help would by greatly appreciated.

Ken

My form name is: MyForm
My view name is: TestView
My outline name is: NavOutline

Here's the HMTL Head code . . .

thisWebDbName := @WebDbName;
extndDbWebPath := "/extnd/extnd2_b1.nsf/";
extUrl := extndDbWebPath + "ext/2.0.1/";
extndUrl := extndDbWebPath + "extnd/2.0.1/";
viewName := "TestView";
outlineName := "NavOutline";
mode := @If(@UrlQueryString("debug") = "true"; "-debug"; "");
unid := @If(@IsNewDoc;"";@Text(@DocumentUniqueID));
editMode := @If(@IsDocBeingEdited;"true";"false");

"<!-- Ext JS library -->" + @NewLine +
"<script type='text/javascript' src='" + extUrl + "adapter/ext/ext-base.js'></script>" + @NewLine +
"<script type='text/javascript' src='" + extUrl + "ext-all" + mode + ".js'></script>" + @NewLine +
"<!-- Ext.nd JS library -->" + @NewLine +
"<script type='text/javascript' src='" + extndUrl + "extnd-all" + mode + ".js'></script>" + @NewLine +
"<script type='text/javascript' src='" + extndUrl + "Session.js?OpenAgent&db=" + thisWebDbName + "'></script>" + @NewLine +
"<script type='text/javascript' src='" + extndUrl + "UIDocument.js?OpenAgent&db=" + thisWebDbName + "&unid=" + unid + "&editmode=" + editMode + "'></script>" + @NewLine +
"<script type='text/javascript'>" + @NewLine +
" Ext.nd.init({extndUrl : '" + extndUrl + "', extUrl : '" + extUrl + "'});" + @NewLine +
" var ExtndApp = function() {
return {
init : function(){
this.ui = new Ext.nd.DominoUI({
uiOutline : {outlineName: '" + outlineName + "'},
uiView : {viewName: '" + viewName + "'}
});
} // init
} // return
}();" + @NewLine +
" Ext.onReady(ExtndApp.init, ExtndApp, true); " + @NewLine +
"</script>" + @NewLine +
"<link rel='stylesheet' type='text/css' href='" + extUrl + "resources/css/ext-all.css' />" + @NewLine +

"<link rel='stylesheet' type='text/css' href='" + extndUrl + "resources/css/domino.css' />"

Here's my Javascript Header . . .

myView = new Ext.nd.UIView({
viewName: 'TestView',
gridConfig: {
renderTo: 'notesView'
}
});

jratcliff
11 Mar 2008, 5:31 PM
if you just want the view, then remove this bit of code from your HTML Head section



" var ExtndApp = function() {
return {
init : function(){
this.ui = new Ext.nd.DominoUI({
uiOutline : {outlineName: '" + outlineName + "'},
uiView : {viewName: '" + viewName + "'}
});
} // init
} // return
}();" + @NewLine +
" Ext.onReady(ExtndApp.init, ExtndApp, true); " + @NewLine +


What's happening here is that an Ext.nd.DominoUI class is being instantiated and it is loading your outline in the left panel and the view in the right panel. Remove this and your javascript code will be able to load just the view.

~Jack R.

khawkins
12 Mar 2008, 11:18 AM
It appears to load into the browser without error, but the display is blank. Here's what I get when viewing the source . . . :(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- Ext JS library -->
<script type='text/javascript' src='/extnd/extnd2_b1.nsf/ext/2.0.1/adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='/extnd/extnd2_b1.nsf/ext/2.0.1/ext-all.js'></script>
<!-- Ext.nd JS library -->
<script type='text/javascript' src='/extnd/extnd2_b1.nsf/extnd/2.0.1/extnd-all.js'></script>
<script type='text/javascript' src='/extnd/extnd2_b1.nsf/extnd/2.0.1/Session.js?OpenAgent&db=Ken/ReqAccessRequestTEST.nsf'></script>
<script type='text/javascript' src='/extnd/extnd2_b1.nsf/extnd/2.0.1/UIDocument.js?OpenAgent&db=Ken/ReqAccessRequestTEST.nsf&unid=&editmode=false'></script>
<script type='text/javascript'>
Ext.nd.init({extndUrl : '/extnd/extnd2_b1.nsf/extnd/2.0.1/', extUrl : '/extnd/extnd2_b1.nsf/ext/2.0.1/'});
</script>
<link rel='stylesheet' type='text/css' href='/extnd/extnd2_b1.nsf/ext/2.0.1/resources/css/ext-all.css' />
<link rel='stylesheet' type='text/css' href='/extnd/extnd2_b1.nsf/extnd/2.0.1/resources/css/domino.css' />
<script language="JavaScript" type="text/javascript">
<!--
myView = new Ext.nd.UIView({
viewName: 'TestView',
gridConfig: {
renderTo: 'notesView'
}
});
// -->
</script>

<script language="JavaScript" type="text/javascript">
<!--
document._domino_target = "_self";
function _doClick(v, o, t) {
var url="/Ken/ReqAccessRequestTEST.nsf/TestPage?OpenPage&Click=" + v;
if (o.href != null)
o.href = url;
else {
if (t == null)
t = document._domino_target;
window.open(url, t);
}

}
// -->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF">

<form action=""></form>
</body>
</html>

jratcliff
12 Mar 2008, 12:10 PM
You have renderTO: 'notesView' but I don't see a div with that id in your code. Can you add a div and give it an id to match your renderTo property and try again?

cujo13
1 Jul 2008, 8:39 AM
For all the newbies.. Here is how it's done...

Create a domino form.
On the form load extnd using the HTML HEAD of the document.
In the JS Header or your extnd js script file for this form\application do this..


myView = new Ext.nd.UIView({
viewName: 'THE_VIEW_NAME_TO_LOAD_VIA_ALIAS',
gridConfig: {
renderTo: 'notesView'
}
});

Note: View alias are recommended to use because view name can contain characters that cause the parser problems.
Also, the variable myView contains the view so you can use javascript to manipulate it. The documentation states that there is a "refresh" method defined so you can call it to refresh the view. ex.. myView.refresh() :D
Do you know of anyway to load the view via URL instead of alias? If I can do this and restrict to category that would be great.

jratcliff
1 Jul 2008, 12:43 PM
Have you tried a $$ViewTemplateDefault form?

In the HTML Head Content section, you can get the view name and the category with these formulas:



viewName := @Subset(@ViewTitle;-1);
category := @UrlQueryString("RestrictToCategory");


Then, you can build your Ext.nd.UIView code in the HTML Content Section (after you load the Ext and Ext.nd JS and CSS files of course)



"<script type='text/javascript'>" + @NewLine +
"myView = new Ext.nd.UIView({" + @NewLine +
" viewName: '" + viewName + "'," + @NewLine +
" showSingleCategory: '" + category + "'," + @NewLine +
" gridConfig: {" + @NewLine +
" renderTo: 'notesView'" + @NewLine +
" }" + @NewLine +
"});" + @NewLine +
"</script>"



You could probably do it all with JavaScript if you wanted and just parse out the view name and RestrictToCategory query string param.