URL doclink >>> open within framework

[dawice]

I want to send an email to a user with a URL link to a document. I can do this easily enough, but then the document does not open within the Ext framework.

What do I need to add to the URL or to the document to make it open within the framework?

Thanks

(if this is already posted in the forum, I couldn't find it)

[jratcliff]

So something like with the api docs? Where you can have a direct link to a class?

Example:

http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel

We don't have this currently but we can add this.

Maybe something like this?

http://openntf.org/extnd/demo.nsf/main.html?Open&doc=someunid

What do you think? Not sure if I like the param name being "doc" since someone might want to open a page instead, or even another url. Any ideas of what we could call the param?

[jratcliff]

OK, I've whipped up a way to open a doc, page, or any url withing the framework by adding a 'link=something' parameter.

Here's some examples:

Open an existing document:
http://openntf.org/extnd/demo.nsf/main.html?Open&link=f1/006AB1F1C59B2B9885256C390075EF06%3FOpenDocument

http://openntf.org/extnd/demo.nsf/main.html?Open&link=f1/006AB1F1C59B2B9885256C390075EF06%3FOpenDocument

Open an existing page:
http://openntf.org/extnd/demo.nsf/main.html?Open&link=demos/multiple-views.html%3FOpenPage

http://openntf.org/extnd/demo.nsf/main.html?Open&link=demos/multiple-views.html%3FOpenPage

Open an url:
http://openntf.org/extnd/demo.nsf/main.html?Open&link=http://www.lotus.com

http://openntf.org/extnd/demo.nsf/main.html?Open&link=http://www.lotus.com

Let me know what you think,
Jack R.

[cujo13]

How do I implement it? Did you add handling for link param?

[jratcliff]

How do I implement it? Did you add handling for link param?

Well, I've added a new method called 'loadLink' to the Ext.nd.DominoUI class that will be in the next beta. However, I'm pretty sure you can take this code and get it to work by adding this method to the current beta like so:



Ext.nd.DominoUI.prototype = {
loadLink: function() {

// allow for link in
var href = window.location.href;

if (href.indexOf('?') > 0 || href.indexOf('!') > 0) {
var qs = (href.indexOf('?') > 0) ? href.split('?')[1] : href.split('!')[1];
var ps = Ext.urlDecode(qs);
var link = ps['link'];
var title = link;

if (link) {
var unid = (link.indexOf('?') > 0) ? href.split('?')[0] : link;
var panelId = 'pnl-' + unid;
var entry = this.tabPanel.getItem(panelId);

if(!entry){
var iframe = Ext.DomHelper.append(document.body, {
tag: 'iframe',
frameBorder: 0,
src: link,
id: unid,
style: {width: '100%', height: '100%'}
});
this.tabPanel.add({
id: panelId,
contentEl: iframe.id,
title: Ext.util.Format.ellipsis(title,16),
layout: 'fit',
closable: true
}).show();

var panel = Ext.getCmp(panelId);

var dom = Ext.get(unid).dom;
var event = Ext.isIE ? 'onreadystatechange' : 'onload';
dom[event] = (function() {
var cd = this.contentWindow || window.frames[this.name];
var title;
// try to get the title from within the iframe
try {
title = cd.document.title;
if (title != "") {
panel.setTitle(Ext.util.Format.ellipsis(title,16));
} else {
panel.setTitle("Untitled");
}
} catch(ignore){}

}).createDelegate(dom);

} else { // we've already opened this document
entry.show();
}
}
}
}
}


And then when you instantiate the Ext.nd.DominoUI class, call the loadLink() method.

Let me know if this works for you,
~Jack R.

[cujo13]

Worked! I just have two problems.

1. Because it reloads the entire page all of the previously opened links are closed. Any way around that?

2. We are using frameset to put a header on top of the Ext UI. Because of this, any way I try this is just taking me back to the main FS starting point (welcome page). Can I get around this?

[dawice]

Works perfect for what I wanted, thanks Jack!!

cujo13 - for the frame issue, I think you would need to call the url like this:

_http://domain/dbname.nsf/framename?OpenFrameSet&Frame=targetframename&Src=/dbname.nsf/main?open&link=etc

[dot.Scott]

I am using extnd_a2r1.nsf and trying to implement this feature.

I'm having trouble implementing the code. I believe it's in the placement of the prototype code or instantiation of it. I've added the code to my extnd-all-debug.js and here is what my prototype looks like now. I receive a 'this.tabPanel has no properties':

// init the DominoUI
this.init();
this.loadLink();

}; // end Ext.nd.DominoUI

Ext.nd.DominoUI.prototype = {
init: function() {
// create the UI
// creates outlinePanel, viewPanel, statusPanel
this.createDominoUI();

// if we have a viewName or a viewUrl we can create the view
if (this.uiView.viewName != '' || this.uiView.viewUrl != '') {
this.uiView = new Ext.nd.UIView(Ext.apply({
container : this.viewPanel,
layout : this.layout,
statusPanel : this.statusPanel
}, this.uiView));

// set the title of the view panel
this.viewTitle = (this.viewTitle) ? this.viewTitle : (this.uiView.viewName) ? this.uiView.viewName : this.uiView.viewUrl;
this.viewPanel.setTitle(this.viewTitle);
}

// if we have a outlineName or a outlineUrl we can create the outline
if (this.uiOutline.outlineName != '' || this.uiOutline.outlineUrl != '') {
this.uiOutline = new Ext.nd.UIOutline(Ext.apply({
layout : this.layout,
container : this.outlinePanel,
viewPanel : this.viewPanel,
uiView : this.uiView
},this.uiOutline));
}
},

// Private
createDominoUI: function() {
this.layout = new Ext.BorderLayout(document.body, {
hideOnLayout: true,
west: this.west,
center: this.center,
south: this.south
});

this.layout.beginUpdate();

//initialize the statusbar
this.statusPanel = this.layout.add('south', new Ext.ContentPanel('extnd-status', {
autoCreate : true
}));

// create outline panel
this.outlinePanel = this.layout.add('west', new Ext.ContentPanel('extnd-outline', {
autoCreate : true,
title : document.title,
fitToFrame : true
}));

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

// tell the layout we are done so it can draw itself on the screen
this.layout.endUpdate();
},

showError: function() {
alert("An error has occured");
},
loadLink: function() {

// allow for link in
var href = window.location.href;

if (href.indexOf('?') > 0 || href.indexOf('!') > 0) {
var qs = (href.indexOf('?') > 0) ? href.split('?')[1] : href.split('!')[1];
var ps = Ext.urlDecode(qs);
var link = ps['link'];
var title = link;

if (link) {
var unid = (link.indexOf('?') > 0) ? href.split('?')[0] : link;
var panelId = 'pnl-' + unid;
var entry = this.tabPanel.getItem(panelId);

if(!entry){
var iframe = Ext.DomHelper.append(document.body, {
tag: 'iframe',
frameBorder: 0,
src: link,
id: unid,
style: {width: '100%', height: '100%'}
});
this.tabPanel.add({
id: panelId,
contentEl: iframe.id,
title: Ext.util.Format.ellipsis(title,16),
layout: 'fit',
closable: true
}).show();

var panel = Ext.getCmp(panelId);

var dom = Ext.get(unid).dom;
var event = Ext.isIE ? 'onreadystatechange' : 'onload';
dom[event] = (function() {
var cd = this.contentWindow || window.frames[this.name];
var title;
// try to get the title from within the iframe
try {
title = cd.document.title;
if (title != "") {
panel.setTitle(Ext.util.Format.ellipsis(title,16));
} else {
panel.setTitle("Untitled");
}
} catch(ignore){}

}).createDelegate(dom);

} else { // we've already opened this document
entry.show();
}
}
}
}
};

Any help would be greatly appreciated.

[dawice]

I modified the extnd-all.js file to include the code Jack provided. I've attached a copy (renamed from .js to .txt) .....make sure you have a backup, I can't recall if I changed anything else.

[dot.Scott]

I modified the extnd-all.js file to include the code Jack provided. I've attached a copy (renamed from .js to .txt) .....make sure you have a backup, I can't recall if I changed anything else.
Thanks for the response. I'm afraid that the file you included is for a newer version of the extnd than I am using. I'm hoping to update soon but I just don't have the time right now. If anyone has an ideas, PLEASE let me know.

[jratcliff]

I am using extnd_a2r1.nsf and trying to implement this feature.

I'm having trouble implementing the code. I believe it's in the placement of the prototype code or instantiation of it. I've added the code to my extnd-all-debug.js and here is what my prototype looks like now. I receive a 'this.tabPanel has no properties':

Looks like you are using the Alpha version. You need to download the Beta version and use that.

[dot.Scott]

Thanks, I was afraid of that. I guess I'll just have to bite the bullet and do the upgrade.

[jratcliff]

Thanks, I was afraid of that. I guess I'll just have to bite the bullet and do the upgrade.

Well, looks like the download link for Ext.nd is broke. My guess is that the site upgrade has something to do with that. I'll see if I can get Rich to fix that.

[dot.Scott]

Thanks, I downloaded it a couple days ago so I do have the code. Now that I've converted over, I am having two issues that use to work with the alpha. When converting exiting fields I was using applyTo. I've tried transform and applyTo as properties but doesn't seem to work. Also, what is the proper procedure for embedding a single category view in a form?


var title = new Ext.form.TextArea({
transform: 'title',
disabled : false,
height: 23,
allowBlank : false,
width : '98%',
grow : true
});

I have a field called title and id property is title.

[jratcliff]

The alpha version of Ext.nd was based on Ext 1.x and the Beta version is based on Ext 2.x. There is a document in the Learning Center that describes how to migrate you Ext 1.x code over to Ext 2.x. Toward the bottom of this document is a section that covers the API Changes. From there you can see that the 'applyTo' method was changed to 'applyToMarkup'.


http://extjs.com/learn/Ext_1_to_2_Migration_Guide#API_Changes

So, you should be able to change your code from this:

title.applyTo(yourElement)

to this:

title.applyToMarkup(yourElement)

Alternatively, you could use the 'applyTo' config instead.

HTH,
Jack

[dot.Scott]

Thanks! That was easy. The last element I need to convert is a single category "embedded" uiview/grid. I have a div element id=reviews as the container and I am trying to place a UIView. This use to work but now I don't even get an error

div element


<div id='reviews' class='divReviews'>Loading view, please wait...</div>


UIView


var view1 = new Ext.nd.UIView({
viewName : 'SingleApproverDocs',
container : 'reviews',
width : '100%',
showActionbar : false,
showSearch : false,
showSingleCategory : docunid,
showCategoryComboBox : false
});
//Overide the openDocument

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'
showForm(link);
}
var showForm= function(url) {
var center = parent.ExtndApp.ui.layout.getRegion('center');
var iframe = parent.Ext.DomHelper.append(parent.document.body, {
tag: 'iframe',
frameBorder: 0,
src: url
});
var panel = new Ext.ContentPanel(iframe, {
title: 'Review',
closable: true,
fitToFrame : true
});
parent.ExtndApp.ui.layout.add('center',panel);
center.showPanel(panel)
};
};


Thanks again!

[jratcliff]

Besides the changes in Ext from 1.x to 2.x, there are also a few things that changed from Alpha to Beta of Ext.nd. For instance, you have one line of code calling this.getViewUrl() and getViewUrl is no longer a method in UIView in 2.x. Also, in your showForm method, you are calling Ext.ContentPanel which has been replaced with simply Ext.Panel in 2.x. Also, you only pass in a config object instead of your element and config object.

Let me know if this helps.

~Jack R.

[dot.Scott]

Aside from the override, does the UIView look OK? For some reason it still doesn't work. In Firebug I get this.container.add is not a function


createGrid()extnd-all.js (line 59)
init(Object tId=0 status=200 statusText=OK)extnd-all.js (line 58)
apply(function(), Object dbPath=/intentionallyRemoved/ count=40, [Object tId=0 status=200 statusText=OK, Object method=GET disableCaching=true scope=Object], undefined)ext-base.js (line 9)
Connection(Object tId=0 status=200 statusText=OK)ext-all.js (line 17)
getViewWidth(Object conn=XMLHttpRequest tId=0, Object scope=Object argument=Object timeout=30000, undefined)ext-base.js (line 10)
getViewWidth()ext-base.js (line 10)
[Break on this error] var panId="xnd-view-"+Ext.id();this.grid=new Ext.grid.GridPanel(Ext.apply({id:pa...

[jratcliff]

Aside from the override, does the UIView look OK? For some reason it still doesn't work. In Firebug I get this.container.add is not a function


container needs to be an Ext.Panel. You are assigning the 'container' property to a string value of 'reviews' which is the id of your div. If you are just wanting to render the UIView/grid into a div with this id, then pass in a gridConfig with a renderTo property:



var view1 = new Ext.nd.UIView({
viewName : 'SingleApproverDocs',
width : '100%',
showActionbar : false,
showSearch : false,
showSingleCategory : docunid,
showCategoryComboBox : false,
gridConfig : {
renderTo : 'reviews'
}
});



Since UIView is basically an Ext.GridPanel you can pass in any of the config options for Ext.GridPanel in the gridConfig property.

Let me know if this makes sense and if you get it working.