How to pop to the parent window in a tab? - titanium

I am trying to replace the default Back button to a custom image button in a Titanium iOS project.
I am opening several windows in a tab with the following code:
currentTab.open(childWindow);
How do I "pop" back to the previous (parent) window?
I tried the following:
childWindow.close();
and:
currentTab.close(childWindow);
But both don't work. What am I doing wrong?

They added a method named popToRootWindow in Ti SDK 6.2
Reference : http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Tab-method-popToRootWindow

It's hard to say what is wrong on your side without checking the actual code. However here is the snippet of code which does exactly what you are looking for. It allows to open two windows in one tab. The onclick listener on the second window simple closes this window. It in turn triggers the first window to come up. Maybe it can be helpful to spot a problem in your code.
Here is the contents of index.js:
$.index.open();
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({title: 'Window 1'});
win1.add(Titanium.UI.createLabel({text: 'Window 1'}));
var button1 = Titanium.UI.createButton({bottom: 0, title: 'Next'});
win1.add(button1);
button1.addEventListener('click', function (e) {
var win2 = Titanium.UI.createWindow({title: 'Window 2'});
win2.add(Titanium.UI.createLabel({text: 'Window 2'}));
var button2 = Titanium.UI.createButton({bottom: 0, title: 'Back to Window 1'});
win2.add(button2);
button2.addEventListener('click', function (e) {
win2.close();
});
tab.open(win2);
});
var tab = Titanium.UI.createTab({title: 'Tab 1', window: win1});
tabGroup.addTab(tab);
tabGroup.open();
Note: index.xml file for this example can be very simple: with only one empty element Window class="container"

Andrew's answer helped and I solved the problem with win.close() function call.
The reason it was giving the following error:
Undefined is not a variable.
was because I was trying to access the window variable with a wrong reference.
this.backButton.addEventListener("click", function() {
this.win.close();
});
this.win was the variable for the child window, and stupidly I used the same inside the backButton event listener, where this was recognized as the callback function and it gave me the above error.
Just changing it to the following helped.
_this = this;
this.backButton.addEventListener("click", function() {
_this.win.close();
});

Related

Change ICN contentViewer's tab title in split pane mode?

I need to change the "title" for each document shown in ICN Viewer, dynamically, at runtime. I'll read the new viewer tab title from the document properties
ENVIRONMENT: ICN 2.0.3 CM8.5 WAS 8.5.5
CODE SO FAR:
I found a PARTIAL solution by hooking "ecm.model.desktop, onChange":
aspect.after(ecm.model.desktop, 'onChange', function() {
var contentViewer = dijit.byId('contentViewer');
if (contentViewer) {
var viewerTabTitleDef = new ViewerTabTitleDef ();
contentViewer.mainTabContainer.getChildren().forEach(function(child) {
viewerTabTitleDef.changeTitle(viewerTabTitleDef.self,
child.controlButton, child.contentViewerPane.viewerItem.item);
});
...
I was able to extend this for subsequent documents opened in the same viewer, and optimized by "removing()" the handler after this initial call. Here is the complete code:
var kill = aspect.after(ecm.model.desktop, 'onChange', function() {
var contentViewer = dijit.byId('contentViewer');
// "contentViewer" will be "unknown" unless viewer invoked
console.log('onChange: contentViewer', contentViewer);
if (contentViewer) {
console.log("new ViewerTabTitleDef()...");
kill.remove();
var viewerTabTitleDef = new ViewerTabTitleDef ();
contentViewer.mainTabContainer.getChildren().forEach(function(child) {
// For initially opened tabs
console.log('initially opened: child', child);
viewerTabTitleDef.changeTitle(viewerTabTitleDef.self, child.controlButton, child.contentViewerPane.viewerItem.item);
});
aspect.after(contentViewer.mainTabContainer, 'addChild', function(child) {
// For tabs added after the viewer was opened
console.log('subsequently opened: child', child);
viewerTabTitleDef.changeTitle(viewerTabTitleDef, child.controlButton, child.contentViewerPane.viewerItem.item);
}, true);
} // end if contentViewer
}); // end aspect.after(onChange desktop)
CURRENT PROBLEM:
Q: How can I change the label for a split tab (either vertical or horizontal)?
So far, I have NOT been able to find any event for any ICN/ECM widget or object variable that I can trigger on.
Thank you in advance!
===============================================
ADDENDUM:
Many thanks to Ivo Jonker, for his suggestion to modify the widget prototype's
"getHtmlName()" method. It worked!
Specifically:
I'm invoking this code from an ICN plugin. I set event handlers in my plugin's base .js file, but it actually gets invoked in the new, separate viewer window.
The original prototype looked like this:
getHtmlName: function() {
var methodName = "getHtmlName";
this.logEntry(methodName);
var displayName = this.item.getDisplayValue("{NAME}");
if (displayName == "") {
displayName = this.item.name;
}
var htmlName = entities.encode(displayName);
this.logExit(methodName);
return htmlName;
},
Per Ivo's suggestion, I overrode the prototype method like this:
myPluginDojo.viewerTabTitleDef = viewerTabTitleDef;
...
ecm.widget.viewer.model.ViewerItem.prototype.getHtmlName = function () {
console.log("NEW getHtmlName()...");
var displayName = myPluginDojo.viewerTabTitleDef.getTitle(this.item);
return displayName;
};
If i understand you correctly, you want to show a different tab-title (instead of the document title) in the navigator viewer whenever a doc is opened?
How about this:
Every document you open in the viewer is wrapped in a ecm.widget.viewer.model.ViewerItem which exposes the getHtmlName that returns the name used in the tab.
Your solution would be to implement your own getHtmlName.
Unfortunately though, the ViewerItem is constructed in the ecm.widget.viewer.ContentViewer#_open and then passed to the ecm.widget.viewer.ContentViewer#_openTab. So you'll either violate best practice by mingling with IBM private method's, or you'll go for a generic approach and just replace the ecm.widget.viewer.model.ViewerItem.prototype.getHtmlName

Toggle icon in tabcontainer

As the title of this post already says: I'm trying to toggle an icon in my tabcontainer.
I got a TabContainer with some ContentPanes in it.
If I get some values from the database I show them in the ContentPane and set the IconClass so the user see that there is some data.
In the my ContentPane I also got a delete and a save button.
If there was some data and the delete button is pressed I'd like to remove or to hide the Icon in the Tab.
Of course I want to do the other way, too.
But how do I do it?
I tried it with registry.byId("myIdOfTheContentPaneWhereTheIconClasswasDefined").className="dijitNoIcon"
without an effect.
Any ideas?
Try setting iconClass instead of className.
Proof-of-concept:
require([
'dijit/layout/TabContainer',
'dijit/layout/ContentPane'
], function(TabContainer, ContentPane){
var container = new TabContainer({ id: 'container' }).placeAt(document.body);
var pane = new ContentPane({
iconClass: 'dijitIconSave',
title: 'Tab'
}).placeAt(container);
container.startup();
setTimeout(function () {
pane.set('iconClass', '');
}, 2000);
});
registry.byId returns you a widget, not a domNode.
This should work:
registry.byId("myIdOfTheContentPaneWhereTheIconClasswasDefined").domNode.className="dijitNoIcon
although it is not elegant at all...

callbacks not firing when opening a magnific popup from another one

I currently have a magnific popup and within that popup i have a link that opens another magnific popup. Something along the lines of:
$('.logbook-entry-details').magnificPopup({
type: 'ajax',
closeBtnInside:true,
closeOnBgClick:false,
closeOnContentClick:false,
callbacks: {
beforeOpen: function () {
$.magnificPopup.close();
},
open: function() {
console.log('Popup open has been initiated');
},
beforeClose: function() {
console.log('Popup before close has been initiated');
},
close: function() {
console.log('Popup close has been initiated');
},
afterClose :function() {
console.log('Popup after close has been initiated');
}
}
});
After reading i found that callbacks on the second popup will not be registered until i close the original popup as opening the new one just replaces the content and actually doesn't recreate a new instance.
I am trying to figure out how i could have my link within my popup close the current popup before calling the code to open the new one so it can register my callbacks.
By the way, the reason I am trying to do this is i want to reopen the original popup after closing my new popup. If you happen to have a better solution please let me know.
So just in case someone needs this answered, i had to add the following code to my new popup.
// a button that closes the popup
$('#cancel-logbook-entry-btn').click(function(){
$.magnificPopup.proto.close.call(this);
});
$.magnificPopup.instance.close = function () {
//code to show the original popup
};
And then in the original popup i had to add otherwise it will never close the popup
$.magnificPopup.instance.close = function () {
// "proto" variable holds MagnificPopup class prototype
// The above change that we did to instance is not applied to the prototype,
// which allows us to call parent method:
$.magnificPopup.proto.close.call(this);
};

How do I determine open/closed state of a dijit dropdownbutton?

I'm using a dijit DropDownButton with an application I'm developing. As you know, if you click on the button once, a menu appears. Click again and it disappears. I can't seem to find this in the API documentation but is there a property I can read to tell me whether or not my DropDownButton is currently open or closed?
I'm trying to use a dojo.connect listener on the DropDownButton's OnClick event in order to perform another task, but only if the DropDownButton is clicked "closed."
THANK YOU!
Steve
I had a similar problem. I couldn't find such a property either, so I ended up adding a custom property dropDownIsOpen and overriding openDropDown() and closeDropDown() to update its value, like this:
myButton.dropDownIsOpen = false;
myButton.openDropDown = function () {
this.dropDownIsOpen = true;
this.inherited("openDropDown", arguments);
};
myButton.closeDropDown = function () {
this.dropDownIsOpen = false;
this.inherited("closeDropDown", arguments);
};
You may track it through its CSS classes. When the DropDown is open, the underlying DOM node that gets the focus (property focusNode) receives an additional class, dijitHasDropDownOpen. So, for your situation:
// assuming "d" is a dijit.DropDownButton
dojo.connect(d, 'onClick', function() {
if (dojo.hasClass(d.focusNode, 'dijitHasDropDownOpen') === false) {
performAnotherTask(); // this fires only if the menu is closed.
}
});
This example is for dojo 1.6.2, since you didn't specify your version. It can, of course, be converted easily for other versions.

extjs How to get a grid

In Designer I set my grid name to equal MyGrid
On clicking the button addRecord is called, it fails where rows is attemting to get an undefined grid.
How do I define this MyGrid so that it references the grid within the panel?
Ext.define('MyApp.view.MyPanel', {
extend: 'MyApp.view.ui.MyPanel',
initComponent: function() {
var me = this;
me.callParent(arguments);
var button = me.down('button[text=Submit]');
button.on('click', me.onSubmitBtnClick, me);
},
addRecord: function(myRecordArray) {
var rows = grid.getStore().getRange(); // ERROR happens here
console.log(rows);
},
onSubmitBtnClick: function() {
this.addRecord(["ll", "kk", "mm"]);
}
});
Chrome Javascript Debugger Console ->
Uncaught ReferenceError: grid is not defined
Before you call grid.getStore() you need to define "grid". You can just do var grid = this; right before the call because you are defining the addRecord function from inside of the grid.
EDIT:
I just noticed that this wasn't being called from inside the grid panel with the store but some other panel. What you will have to do to is set an id config on your grid panel. E.g. id: MyGridPanel There may already be an id config set on it and you just have to find out what it is. If you are using the ExtJS designer it may actually already be set to "MyGridPanel". Then you would call it like so:
var grid = Ext.getCmp("MyGridPanel");
then you would do:
grid.getStore().getRange()
try changing button.on('click', me.onSubmitBtnClick, me) to button.on('click', Ext.bind(me.onSubmitBtnClick, me), me)
This looks like a scope issue, in your onSubmitBtn() method, this probably refering to the wrong object (e.g. window, or the button), and not the grid object, which is what you want.