Solved!! Open a document from a view into a tab or layout dialog

[mth96a]

How would one go about opening a document from a view into a tab or layoutdialog?

I see this is hadeled with the opendocument function in the uiview.js, but i have no idea how to overide it.

Thanks for any help

[chiphi13]

You would override the openDoc method by creating your own in your js file and then attach the event to the view: So you would put something like this in your js file:

function openDoc(grid, rowIndex, e, bEditMode){
var row = grid.selModel.getSelected();
var node = row.node;
var unid = node.attributes.getNamedItem('unid');
// var tmp= row.get(grid.getColumnModel().getDataIndex(0));
var title='Opening';
// if a unid does not exist this row is a category so bail
if (!unid) {
return;
} else {
unid = unid.value;
}
//do whatever your wanted with the document..open new tab or dialog
}

and then create the grid:

var ndgrid= new Ext.nd.UIView({
viewName : 'xxxx',
container : 'xxxx',
showActionbar: false,
showSingleCategory : restrictToCategory,
showCategoryComboBox : false
});


then you would override the dbclick event:

ndgrid.gridHandleRowDblClick= openDoc;

[jratcliff]

Hi mth96a,

I'm doing the same thing in one of my apps as chiphi13 suggests. I have an app where the users were used to the opening of a document just replacing the current window contents. Rich and I are going to add more methods in the future to make this easier, but for now, here's my code that opens a document by replacing location.href with the link to the document.


var view = new Ext.nd.UIView({
viewName : _viewName,
container : 'view'
});

// redefine openDocument method
view.openDocument = function(grid, rowIndex, e) {
var ds = grid.getDataSource();
var row = grid.selModel.getSelected();
var node = row.node;
var unid = node.attributes.getNamedItem('unid');
unid = unid.value;
var viewUrl = this.getViewUrl(grid);
var link = viewUrl + '/' + unid + "?OpenDocument";
location.href = link;
}

[mth96a]

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

return {
init : function() {
var frm2= window.document.forms[0];
var view1 = new Ext.nd.UIView({
viewName : 'Week2',
container : 'view1',
showActionbar : false,
showSearch : false,
showSingleCategory : frm2.expnumber1.value,
showCategoryComboBox : false
});
var view2 = new Ext.nd.UIView({
viewName : 'perdiembyexp',
container : 'view2',
showActionbar : false,
showSearch : false,
showSingleCategory :frm2.expnumber1.value,
showCategoryComboBox : false
});
//Overide the openDocument

view1.openDocument = function(grid, rowIndex, e) {
var ds = grid.getDataSource();
var row = grid.selModel.getSelected();
var node = row.node;
var unid = node.attributes.getNamedItem('unid');
unid = unid.value;
var viewUrl = this.getViewUrl(grid);
var link = viewUrl + '/' + unid + "?OpenDocument";
showForm(link)};
view1.gridHandleRowDblClick= openDoc;

}// end init
};// end 'return'
}();

//Create the dialog box function

var showForm= function(url) {
dlgForm = new Ext.LayoutDialog("dlg-form", {
closable: false,
modal:true,
width:825,
height:700,
shim: true,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag:true,
title: 'Time Entry',
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
dlgForm.addKeyListener(27, dlgForm.hide, dlgForm);

var layout = dlgForm.getLayout();
dlgForm.beginUpdate();

var iframe = Ext.DomHelper.append(document.body,
{tag: 'iframe', frameBorder: 0, src: url});

feedPanel = new Ext.ContentPanel(iframe, {title: 'Time Entry', fitToFrame:true, autoScroll:true, closable:false});
layout.add('center', feedPanel);
dlgVideo.endUpdate();


dlgForm.show();}


I also put this in the HTML head

"<!-- dialog is created from existing markup -->" +@NewLine +
"<div id='dlg-Form' style='visibility:hidden;'>" +@NewLine +
"<div class='x-dlg-hd'>Layout Dialog</div>" + @NewLine +
"<div class='x-dlg-bd'>" + @NewLine +
" <div id='west' class='x-layout-inactive-content'>" + @NewLine +
"</div>"+ @NewLine +
"<div id='center' class='x-layout-inactive-content' style='padding:10px;' > </div>"+ @NewLine

[mth96a]

Nothing shows up in the new tab, does not look like iframe was created


view1.openDocument = function(grid, rowIndex, e) {
var ds = grid.getDataSource();
var row = grid.selModel.getSelected();
var node = row.node;
var unid = node.attributes.getNamedItem('unid');
unid = unid.value;
var viewUrl = this.getViewUrl(grid);
var link = 'all/' + unid + "?OpenDocument";
alert(link);

var iframe = Ext.DomHelper.append(document.body, {tag: 'iframe', frameBorder: 0, src: link});

panel= new Ext.ContentPanel(iframe, {title: '...Opening', fitToFrame:true, autoScroll:true, closable:true});

parent.DemoApp.ui.layout.add('center', panel);

[mth96a]

I havent made any progress any one have any ideas? IT is empty but the content is there and loaded i just cant see it!!! AHHHHHAAH!!!

this is what is created in html

<div id="ext-gen287" class="x-tabs-item-body" style="display: block; visibility: visible; position: relative;"/>

[mth96a]

Solved, when in an iframe and creating another iframe make sure you go to the parent as in the parent.Ext.DomHelper.append(parent.document.body


view1.openDocument = function(grid, rowIndex, e, bEditMode)
{var title = "Opening...";
var ds = grid.getDataSource();
var row = grid.selModel.getSelected();
var node = row.node;
var unid = node.attributes.getNamedItem('unid');
if (!unid) {
return;
} else {
unid = unid.value;
}

var viewUrl = this.getViewUrl(grid);
var link = viewUrl + '/' + unid + '?OpenDocument'

var center = parent.DemoApp.ui.layout.getRegion('center');
var iframe = parent.Ext.DomHelper.append(parent.document.body, {tag: 'iframe', frameBorder: 0, src: link});
var panel = new Ext.ContentPanel(iframe, {title: 'Document', closable: true, fitToFrame : true});
parent.DemoApp.ui.layout.add('center',panel);
center.showPanel(panel)

[Dominoble]

var center = parent.DemoApp.ui.layout.getRegion('center');

What is the "DemoApp" portion refering to? I want to create a new document in a new tab. I'm calling the code from a menu handler and the view or the current doc don't really matter. I'm using the built in features of Ext.ND and not hard coding any views. Any help would be greatly appreciated.


var link = fullpath+'/formname?CreateDocument';
var center = parent.????????.getRegion('center');
var iframe = parent.Ext.DomHelper.append(parent.document.body, {tag: 'iframe', frameBorder: 0, src: link});
var panel = new Ext.ContentPanel(iframe, {title: 'Document', closable: true, fitToFrame : true});
parent.?????????.add('center',panel);
center.showPanel(panel)

[mth96a]

That creates the ext framework in the beginning. A great way to look at this is to use firebug and then look at the dom tab look at the structure and find what you need. Look at the picture below

What i was doing was creating a form and using ext.nd to have an "embedded view" uiview, that way i could control(change the opening procedure) everything for that view the way i wanted, and open another view a different way.

Also something i picked up when you have a client version and a web version is you can have two forms and in the view use a form formula to open the one you want like

@If(@ClientType = "Notes";"Details Display"; @SetField("Form" ; "Details Web No Edit"))

hope that helps

[RWaters]

Yeah, DemoApp is just the sample function we provide in the SampleMain.html page with Ext.nd

It is defined in the JS Header, and like above is what creates the whole outline and view layout.

var DemoApp = function() {
return {
init : function(){
this.ui = new Ext.nd.DominoUI({
uiOutline : {outlineName: "mainOL"},
uiView : {viewName: "f1", viewTitle: "example 1"}
});
} // init
} // return
}();
Ext.onReady(DemoApp.init, DemoApp, true);

[Dominoble]

I'm using the standard Ext.nd.$$ViewTemplateDefault which has the following in the JS Header:
// ViewTemplateDefault is declared in HTML Head section
ViewTemplateDefault.init = function() {
//var ui = new Ext.nd.DominoUI({
var ui = new Ext.nd.DominoUI({
uiView : {viewName : this.viewName},
uiOutline : {outlineName : '($Ext.nd.ViewAndFolderList)'}
});
};

Ext.onReady(ViewTemplateDefault.init, ViewTemplateDefault , true);
Replacing "DemoApp" with "ViewTemplateDefault" doesn't help. What I'm trying to do at this point is just get a handle for the default TabPanel so I can add a tab to it. Since Ext.nd is generating the TabPanel instead of me, I don't know how to reference it.

[RWaters]

Ahh, looks like we missed the change in the $$ViewTemplate

Change this line:
var ui = new Ext.nd.DominoUI

to:
this.ui = new Ext.nd.DominoUI

[sandymonroe]

Hi mth96a,
Jack,

I'm doing the same thing in one of my apps as chiphi13 suggests. I have an app where the users were used to the opening of a document just replacing the current window contents. Rich and I are going to add more methods in the future to make this easier, but for now, here's my code that opens a document by replacing location.href with the link to the document.


var view = new Ext.nd.UIView({
viewName : _viewName,
container : 'view'
});

// redefine openDocument method
view.openDocument = function(grid, rowIndex, e) {
var ds = grid.getDataSource();
var row = grid.selModel.getSelected();
var node = row.node;
var unid = node.attributes.getNamedItem('unid');
unid = unid.value;
var viewUrl = this.getViewUrl(grid);
var link = viewUrl + '/' + unid + "?OpenDocument";
location.href = link;
}


I have been reading through this thread and it looks like what I need to move a document from opening within the main layout (uiOutline) to opening full screen.

Having trouble trying to figure out where you have actually put this code to override the default open document function.

I am using the default demo.html untouched (except for changing var view = new Ext.nd.DomionUI to this.view = new Ext.nd.DominoUI ) as suggested in the forum. I am using the Ext.nd.$$ViewTemplateDefault with no changes and my form started off with your sample form and followed that same pattern. I can give you more particulars - just wasn't sure they were necessary to answer this question.

Where should this code be placed to override the open document default function?

Thanks,
Sandy

[mth96a]

I make forms with embedded views, so that in view1 i can open into a new window, in view 2 i can open into a new panel, and in view3 i can open like a dilaogbox.

Basically i make a new form, and use the example of adding an "embeded view"(not in notes but with ext) from the database, and then in the outline i say to open the form, not the view the form has on it.

So to answer you question i put it in the form js header that has the embedded view, or you would have to use the same opening action with all of your panels and edit the source for the ext.nd.dominoui

[alfre32]

I'm using the next function in js library:

loadCenter (link,title){

// Set up Domino Web Foundation Classes namespace
var DAE = window.DAE || {};
var url;
var innerLayout;

if (DAE.LayoutEngine == undefined) {
innerLayout = parent.DAE.LayoutEngine.innerLayout;
} else {
innerLayout = DAE.LayoutEngine.innerLayout;
}

var linkPanelId = link;
var linkPanel = innerLayout.getRegion('center').getPanel(linkPanelId);
if (!linkPanel) {
var iframe = Ext.DomHelper.append(document.body, {tag: 'iframe', frameBorder: 0, src: url, id: linkPanelId });
var linkPanel = new Ext.ContentPanel(iframe,{title: url, fitToFrame:true, closable:true});
linkPanel.setTitle(title);
innerLayout.add('center', linkPanel);
} else {
innerLayout.showPanel(linkPanel);
}

} // end function