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.
Related
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 integrate qTip2 to show tooltips on mouse events for elements in a Cytoscape graph. I'm using this example. However, in my testing, the attempt to call qtip() on the selected element object fails, and IE for example says object doesn't support property or method qtip. I am sure the selector is working, since I can get at all of the element's properties.
What am I missing? Any insight is appreciated. Thanks!
Code:
cy.getElementById("n1").qtip({
content: {
text: 'My tooltip text'
}
});
I found the issue, which is that there is a separate extension for qTip in this case, which I didn't see from looking at the JS Bin example. You can get the extension here.
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"
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.
I have generated fieldset (textboxes,selectfield etc) inside panel. After login done i display this panel using bellow code from my controller.js
Ext.Viewport.add({xtype: 'IntakePanel'});
Ext.Viewport.setActiveItem({xtype: 'IntakePanel'});
But after this if i try to inspect i can found two panels are there
And due to this if i try to access fields of panel i got array with length 2/4 etc.
I try to remove it using
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
but doesn't help much.
Please help me on this.
Thanks
I think the framework is reinstantiating your component because when you pass only the xtype, it can't know you are trying to reference the same instance as before. try adding an id to your instance and instead of passing an xtype to setActiveItem, give it the result of a component query.
Ext.ComponentQuery.query('#yourCompoId'):