I am developing app with sencha touch but facing a problem when activating a tab on a tapPanel
I'm making a tab active by next statement:
tabpanel.setActiveItem('#idLogin');
Everything works fine and the tab is actually activated, but later on (so not directly after this statement) an error appears in the console.log. When removing this piece of code the error doesn't appear so I am sure it is related to this statement.
The error:
Uncaught TypeError: Cannot read property 'detach' of null
Does anybody has faced this issue and were you able to solve?
First, define "later on." Run your app using sencha-touch-all-debug.js to locate the statement throwing the error.
Second, look at the source. You'll see that 'detach' is sencha-speak for 'remove an element from the DOM:"
detach: function() {
var dom = this.dom;
if (dom && dom.parentNode && dom.tagName !== 'BODY') {
dom.parentNode.removeChild(dom);
}
return this;
},
This is invoked in just a few places: when removing an element directly, or when updating an inner wrapper as a result of view navigation or other view swapping.
In most cases, the affected element has animation applied to it, which implies that the error is a side effect of an attempt to remove an element that has already been animated out of scope. The solution, as hacky as it seems, is to get the layout of the parent container, suppress its animation, remove your element, then reapply animation, like this:
container.getLayout().setAnimation(false);
// item removal or view change here;
container.getLayout().setAnimation(true);
I was getting the same error when using a form field with name="id"
Related
I'd like to call close on a mouseleave event on an md-menu component. I'm using version 0.7.4 of the vue-materiallibrary, and using this documentation it says that there is a close method.
How do I call this method? I've tried the following:
<md-menu md-size="1" ref="aRef" id="aRef">
<div #mouseleave="this.$refs['aRef'].close()">
...other stuff...
</md-menu>
When I run this I get an error saying:
Uncaught TypeError: Cannot read property 'aRef' of undefined
I'm guessing this is something to do with the component not being available at creation time. What's the correct way of doing this?
I should say that the md-menu is actually nested inside another md-menu (which seems to work ok from a functional perspective). Not sure if that screws up the event hierarchy.
I stumbled across the solution for this one while I was trying to solve a different problem (how to close any other menus before opening another).
Your problem is that you can't use this inline in the html template. You need to send the event to a method and then call it...
<md-menu
ref="aRef"
#mouseleave="closeMenu"
>
// menu contents
</md-menu>
Then in your script section:
methods: {
closeMenu() {
this.$refs['aRef'].close();
}
}
There's a single button element on the page and the following click stream:
let submitClick$ = sources.DOM.select(buttonSel)
.events("click")
.mapTo(true)
.debug(console.log)
Once I click on the button, true is logged, which is correct.
However, when I map the stream, the code inside runs twice:
let submitDeal$ = submitClick$.map(() => {
console.log("Clicked")
// ...
})
No other event handlers should be attached to the button, and the element itself sits inside a div:
button(".btn--add", "Submit")
The usual event.preventDefault() and event.stopPropagation() doesn't make a difference, and inspecting the event does show that it is fired from the same element button.btn--add.
Not really sure what's going on, any ideas are appreciated! Thanks!
Versions:
"#cycle/dom": "^12.2.5"
"#cycle/http": "^11.0.1"
"#cycle/xstream-run": "^3.1.0"
"xstream": "^6.4.0"
Update 1: I triple checked and no JS files are loaded twice. I'm using Webpack that bundles a single app.js file that's loaded on the page (Elixir/Phoenix app). Also when inspecting the button in the Event Listeners tab in Chrome's Developer Tools, it seems that only 1 event handled is attached.
Update 2: Gist with the code
Too little information is given to resolve this problem. However some things come to mind:
You shouldn't use .debug(console.log) but .debug(x => console.log(x)) instead. In fact .debug() is enough, it will use console.log internally.
Then, is the button inside a <form>? That may be affecting the events. In general this question needs more details.
Turns out this was due to a bug in xstream, which was fixed in xstream#7.0.0.
I'm trying to add a right nav button in iOS to a windows in Titanium.
The code is just the original "master/detail" starting template provided by Titanium and then in MasterView.js, I try to add a button to the navbar.
But it doesn't work like it was supposed to:
var addBtn = Ti.UI.createButton({
systemButton:Ti.UI.iPhone.SystemButton.ADD
});
//self.setRightNavButton(addBtn);
var win1 = Titanium.UI.currentWindow;
win1.setRightNavButton(addBtn);
This fails with the error:
[ERROR] : Script Error = 'undefined' is not an object (evaluating
'win1.setRightNavButton') at MasterView.js (line 14).
How can I add this button to the navbar then? I've seen some examples but they all rely in having the navbar declared in place. In this case that ain't possible since Titanium declared the navbar in the AplicationWindow.js specific to each platform and then calls the MasterView.js function and file where I'm supposed to define the navbar button.
Ti.UI.currentWindow only works if there is a window already open. The error you have is coming from the fact that when you create the MasterView, you have not yet opened up the window.
Look inside ApplicationWindow.js, you will see that you create the masterview before even opening the window.
If you want to set navbar items, either add them in the ApplicationWindow, app.js, or pass the window to the MasterView.
Ti.UI.currentWindow only works if a window is opened using the url parameter. In that case, the controller that is referenced by the url parameter will have the Ti.UI.currentWindow property set to the window.
Fairly new to developing for Windows 8, I'm working on an app that has a rather flat model. I have looked and looked, but can't seem to find a clear answer on how to set a WinJS page to prevent backward navigation. I have tried digging into the API, but it doesn't say anything on the matter.
The code I'm attempting to use is
WinJS.Navigation.canGoBack = false;
No luck, it keeps complaining about the property being read only, however, there are no setter methods to change it.
Thanks ahead of time,
~Sean
canGoBack does only have a getter (defined in base.js), and it reflects the absence or presence of the backstack; namely nav.history.backstack.
The appearance of the button itself is controlled by the disabled attribute on the associated button DOM object, which in turn is part of a CSS selector controlling visibility. So if you do tinker with the display of the Back button yourself be aware that the navigation plumbing is doing the same.
Setting the backstack explicitly is possible; there's a sample the Navigation and Navigation History Sample that includes restoring a history as well as preventing navigation using beforenavigate, with the following code:
// in ready
WinJS.Navigation.addEventListener("beforenavigate", this.beforenavigate);
//
beforenavigate: function (eventObject) {
// This function gives you a chance to veto navigation. This demonstrates that capability
if (this.shouldPreventNavigation) {
WinJS.log && WinJS.log("Navigation to " + eventObject.detail.location + " was prevented", "sample", "status");
eventObject.preventDefault();
}
},
You can't change canGoBack, but you can disable the button to hide it and free the history stack.
// disabling and hiding backbutton
document.querySelector(".win-backbutton").disabled = true;
// freeing navigation stack
WinJS.Navigation.history.backStack = [];
This will prevent going backward and still allow going forward.
So lots of searching and attempting different methods of disabling the Back Button, finally found a decent solution. It has been adapted from another stackoverflow question.
Original algorithm: How to Get Element By Class in JavaScript?
MY SOLUTION
At the beginning of a fragment page, right as the page definition starts declaring the ready: function, I used an adapted version of the above algorithm and used the resulting element selection to set the disabled attribute.
// Retrieve Generated Back Button
var elems = document.getElementsByTagName('*'), i;
for (i in elems)
{
if((" "+elems[i].className+" ").indexOf("win-backbutton") > -1)
{
var d = elems[i];
}
}
// Disable the back button
d.setAttribute("disabled", "disabled");
The code gets all elements from the page's DOM and filters it for the generated back button. When the proper element is found, it is assigned to a variable and from there we can set the disabled property.
I couldn't find a lot of documentation on working around the default navigation in a WinJS Navigation app, so here are some methods that failed (for reference purposes):
Getting the element by class and setting | May have failed from doing it wrong, as I have little experience with HTML and javascript.
Using the above method, but setting the attribute within the for loop breaks the app and causes it to freeze for unknown reasons.
Setting the attribute in the default.js before the navigation is finished. | The javascript calls would fail to recognize either methods called or DOM elements, presumably due to initialization state of the page.
There were a few others, but I think there must be a better way to go about retrieving the element after a page loads. If anyone can enlighten me, I would be most grateful.
~Sean R.
I'm very new in Sencha. When I run my app my main panel doesn't show, only NestedList. Browser shows the following message:
Uncaught TypeError: Cannot call method 'getId' of undefined
I don't know how to fix it. I will glad of any hint.
this is my app
There are 3 things you should modify to get your application works:
Remove fullscreen: true config as it breaks your app layout, because it's not the outer-most component of your applcation.
Remove this.detailCard from setItems in your split view since it is not defined and not compulsory to be defined. So: this.setItems([this.nestedList]); is enough.
Add layout: 'card' to your split view config.
I've tested and it worked well. Hope it helps you.