I need to prevent tree node anchor from navigating current page, but the anchors have to keep showing its link (no hash).
I tried to put return false when it sets up the listener:
...
listeners : {
click : function (node) {
/* some processes */
return false;
}
}
...
Seems it is useless, the anchors are still firing its href.
I can't do onClick injection for all nodes, because the nodes are loaded on demand.
Any idea's?
I can't do onClick injection for all
nodes, because the nodes are loaded on
demand.
Not necessarily, have you thought about doing this with a different approach, i.e.:
YOURTREEPANELCOMPONENT.on('click',function(currentnode, clickevent){
// prevent href from being called and the page from loading
clickevent.stopEvent();
// what else to do when the node is clicked
});
Related
After I refresh my page(the refresh simply sets the events array to [], then refetches the data to be displayed on screen again), the event components still show, but become unresponsive to touch e.g. no buttons on the event card work and you can not swipe left and right on them. When the app first launches tho, you can interact with the buttons just fine.
The problem occurs after refresh EVERY time, but it also occurs after I go through my other tabs on the screen and come back to the events tab.
this only happens sometimes but I thought it would be important to note.
I have tried to reload the component by adding a *ngIf statement in a parent div of the event card that checks for the event array being empty. I thought this would force the component to reload, but no luck.
I also made sure that the event's array first gets equal to [] before fetching for more data.
I also made sure that the data the event's array gets filled with is the same before and after the refresh happens.
HTML Code where the event cards are present :
<div class="cards" *ngFor="let event of events; index as i" class="final">
<ion-item-sliding class="item-sliding">
<ion-item-options class="item-options" side="start">
<ion-item-option color="success" (click)="saveEvent(event.id)">Mark As Going</ion-item-option>
</ion-item-options>
<app-card *ngIf="event.eventDeleted != true" [id]="event.id"></app-card>
</ion-item-sliding>
</div>
Some relevant global variables inside my TS file :
limit: number = 5;
lastVisible: any;
This method gets run first :
ngOnInit() {
this.fetchEvents();
}
My method for pulling events :
fetchEvents() {
this.fStore.collection('events').ref.limit(this.limit).get().then((events) => {
this.lastVisible = events.docs[events.docs.length-1];
this.events = events.docs
console.log(this.events, "events")
});
}
Problem occurs after this refresh button
doRefresh(event) {
this.fetchEvents()
setTimeout(() => {
event.target.complete();
}, 2000);
}
Expected: After refresh, buttons should be interactive.
Actual: After refresh, buttons are not interactive.
This sounds like ionic/issues/15486 which is basically:
dynamically generated ion-item-sliding becoming unresponsive after removing elements from base array
The issues claims that this was fixed in ionic#4.1.0... Which version are you using?
I'm very close to finishing up my page, and I ran into this odd bug.
When I use ng-include, the pages load fine, but they resume scrolling from the previous position, so they don't start at the top with every click.
I resorted to using anchor scroll, but it doesn't work properly. I have to click the link again, for it to load the contents, and if I click the same link again, it offsets the page to some weird position.
This is my code in the controller:
$scope.toPage = function (index, id) {
$scope.missiveIndex = index;
$scope.contentsDown();
$location.hash(id);
};
and this is the HTML part:
<article id="{{articles.ids}}" class="stories-anim" ng-repeat="articles in stories" ng-hide="!isMissiveSlideIndex($index)" ng-include="articles.content" [autoscroll]>
</article>
the id is passed in via ng-click="ng-click="toPage($index, button.ids);"
is there a way to put the location.hash in the [onload] expression and autoscroll that way?
thanks
Probably the anchor scroll didn't work because the content of the page was not fully loaded when it was called.
You can solve that by using a timeout.
$timeout(function() {
$anchorScroll();
},500);
I have a window, and inside it a panel. The panel contains text (basic html). After the window is ready I call the following function, which finds elements with specific class, and registers click events on them. This works at first.
After closing the window, and recreating 1:1 similar window the events will not fire. The same happens if I .update() the panel and re-run my function - the events fail to fire. Why is this?
I can still see elements being found, and apparently some events must be registered, but my clicks can't be captured by the debug code, or the receiving function anymore.
addEvents: function(win) {
// The Window
var ow = win;
// Using this debug trick I can see that on the second time the events wont fire
// -- nothing gets printed to console
Ext.util.Observable.capture(ow, function(){
console.log(arguments);
});
// Will search for elements, finds elements that have class myclass
// In my case the elements are just ordinary html tags in the visible content
// area of the panel.
var elems = ow.down('panel').getEl().select(".myclass").elements;
Ext.Array.forEach(elems, function (item, index, allItems) {
// We need Ext DOM element to be able to attach stuff to it
var elem = new Ext.dom.Element(item);
elem.on ('click', function (evt, el, o) {
ow.fireEvent('myevent', ow, elem);
});
});
}
I suspected at first that I have to actually unregister the previous events and destroy the window, so I tried adding this to the close of the window:
window.down('panel').destroy();
window.destroy();
However it seems I have some other problem I really am unable to understand.
This is a very JQuery-ish way to add events. You are dealing with components and should add event listeners on components. If you need to delegate events down to html elements then you need to set a single event listener on the Component encapsulating the elements and add delegate config to the actual html elements.
Here are some resources:
Explain ExtJS 4 event handling
Event delegation explained:
http://www.sencha.com/blog/event-delegation-in-sencha-touch (applies to extjs just as well)
More on Listeners with extjs: https://stackoverflow.com/a/8733338/834424
I have a Tree Panel which I expand programmatically.
When I expand a node, I would like to "jump to" this node, I mean to scroll to it.
How to scroll a tree panel to a specific node ?
UPDATE:
I use Ext 4.1
Try using selectPath() http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel-method-selectPath
In extjs 3.x you can try calling focus() on the TreeNodeUI (myNode.ui.focus())
The tree is asynchronously loading every node, and you need to call to focus only after all the nodes have been loaded. What you are going to need to do is to set autoLoad to false on your root node, then later in the code manually load the root node for the first time using:
rootNode.expand(true, function(){
myTreePanel.getView().focusRow(nodeyouwanttofocus);
});
doing it this way allows you to use the first parameter of the expand function that makes the expand fully recursive and also assures that the second parameter that is a function only executes after all the nodes are loaded, guarenteeing that the view is the correct height and that the node exists visually.
Another option that allows more flexability is to hook into the expand event:
var myTreeStore = Ext.create("Ext.data.TreeStore", {
listeners: {
expand: function(theParentNode){
theParentNode.eachChild(function(node){
if(nodeIWantSelected == node)
myTreePanel.getView().focusRow(node);
}
}
}
});
and you can use the .select of the selection model to hook in to select the node (and I think it may focus the node too).
I haven't tried 'selectPath' as suggested by Sha before, which seems a lot easier to use, but you can hook in the focusRow function as the callback and I think that would work too.
You can use tree.getView().focusRow(), like it:
tree.expandPath(
'/root/1/2/3',
'id',
'/',
function() {
tree.getView().focusRow(tree.getStore().getNodeById('3'));
}
});
But, if your tree use animate: true and load every node asynchronously and any node in the path not loaded yet this approach doesnt work (tree is not scrolled to the selected node because of multiple layout updates).
As workaround you can:
set animate: false for tree;
add 'afterlayout' listener, like this:
tree.on('afterlayout', function() {
tree.getView().focusRow(tree.getSelectionModel().getSelection()[0]);
}
I guess you can add this handler when needed and remove it when everything is done.
I have a Sencha tab panel, each tab loads html content via ajax. One of the components is a post/list that visitors can use to drill down once more to read the entire post.
My question is, can I somehow trigger a view switch through the html? Or should I be loading the post data via JSON, and styling a listpanel in Sencha?
Thank you!
You can add listeners to elements within your HTML which would then be able to trigger the view switch. For example,
// simple HTML snippet contained in Panel
<a class="my-link">Click Me!</a>
// on after load/after render (need to ensure that the elements exists in the page!)
// get reference to the containing panel (tab)
var panel = this.items.get(0);
panel.getEl().on({
tap: function(e){
console.log('i was clicked!');
},
delegate: 'a.my-link'
});
The delegate option allows you to pass a selector that means the event will only fire when an element matching that selector is in the event target's chain (i.e. returns something in an e.getTarget(delegate) call).
EDIT
You can access attributes of the tapped element using either the DOM node tapped or use Ext.fly to wrap an Ext.Element instance around it and use the helper methods.
console.log(e.getTarget('a.my-link')); // logs DOM node
console.log(Ext.fly(e.getTarget('a.my-link'))); // logs Ext.Element wrapping DOM node
console.log(e.getTarget('a.my-link').href); // logs href via DOM node property
console.log(Ext.fly(e.getTarget('a.my-link')).getAttribute('href')); // logs href via Ext.Element getAttribute() method
Depending on the nesting you may be able to remove the selector from the getTarget() call (i.e. if you're always tapping on the element your listening on then you can remove it, but if there are children in the element you're listening on then you will need it. In the second case the 'target' will be the child that the event bubbled from so the href etc will be wrong. If that makes sense... :) )
The solution for 2.2.1:
initialize: function() {
this.element.on({
tap: <function>,
delegate: <query_expression>
});
this.callParent(arguments);
}
<query_expression> can be anything fitting in to Ext.query() too.