I'm using Backbone to render a view on my homepage. In this view I have a view li elements containing movie titles (pure text). When I click on a li element I want to show it's content in my console.
I was using this,
events: ->
"click li": "showtext"
showtext: ->
litext = $(this).text()
console.log litext
In my head this should work. It should give me the text of the clicked li element. It does give me some feedback in the console but it's empty.
After reading This it became clear that this targets the view and not the element clicked. But I can't find out how to replace the this function.
How can I target a element from the view? So that when I click on a element it shows the text in the console?
All click handlers are passed an Event object as their argument. This object has a target property, which is the object that has been clicked.
events:
"click li": "showtext"
## #param {Event} event
showText: (event)->
liText = $(e.target).text()
console.log liText
Reference
jQuery Event Docs
Related
I have a PopOver page and I pass a string message to it, what I want is use this popover as a Tooltip for some elements on the page.
Example, on my page I have this:
<button ion-button icon-only clear (click)="shareThisCardByEmail(item)" (blur)="showTooltipShareByEmail($event)" >
Share
</button>
In this case I am associating the event "blur" (I am not sure what would be the best for this case) and I need when the view is loaded that event is shot and the popover is shown to the user.
On the component I have this:
showTooltipShareByEmail(event ? : any) {
let popover = this.popoverCtrl.create(PopoverTooltipPage, {
"message": 'This is a message on the tooltip popover about sharing by email'
});
let navOptions: any = {
animate: true,
ev: event
};
popover.present(navOptions);
}
How would I activate one specific event for an specific element on the page then the tooltip would be displayed?
I saw 2 questions but I'm trying to answer this:
I need when the view is loaded that event is shot and the popover is shown to the user
Check this out for the lifecycle events https://ionicframework.com/docs/api/navigation/NavController/.
You can call the popover when the view did load at here
ionViewDidLoad() {
console.log("I'm alive!");
// Right here
}
I have created a login page, on click of button, I want to load a new page. how can I achieve that?
I have tried:
Ext.create({
xtype: 'login'
});
If 'login' is of type Window or Panel (so a kind of container), you can call show() method after creation.
first you need to remove login page view, after create new view and render it. for example.
get access to top level element. in most case it's viewport and remove all child elements.
var topLvlElement = Ext.ComponentQuery.query("viewport")[0]
topLvlElement .removeAll()
create new view and add it in top level element
var newView = Ext.create("myapp.view.mainPage",{title:"mainPage"});
topLvlElement .add(newView);
I have a list with handler on list item disclose, when the user click on an item
I'm pushing a form view with the next code:
list.up('navigationview').push({
xtype: 'xEditAddFormPanel',
title: 'Edit task',
data: record.getData()
});
In the first click it's working and the navigation display the xEditAddFormPanel..
But then, after click on the back button (and return to the list screen) and then press again on list item (what triggers the above code again) - now nothing happens.
How do I display the form screen again?
I had the same problem and the reason was that the listener(s) is(are) lost the second time that you push a view into the navigator. Why? Because every time that you push a view into the Navigator the old view is destroyed, taking with it all listeners to the grave...
To get around this problem I binded the events manually whenever I create a new view that I wanted pushed:
onXButtonTap: function () {
var view = Ext.create('MyApp.view.XEntryView');
//Bind the events you need manually every time you push.
view.on('myEvent', this.onSubmitNewX);
this.getXMainView().push(view);
}
Often in Sencha, you have to manually destroy components. You may need to do something like this:
var formPanel = Ext.create('YourApp.view.EditAddFormPanel', {
title: 'Edit task',
data: record.getData()
});
formPanel.onAfter('erased', function(){
this.destroy();
}, this);
list.up('navigationview').push(formPanel);
Can anybody give a small example about how to load a new div container based on a mouse click, using Backbone.js? I would like to add a new div container to my already existing html contents.
In a view class:
events: { "click #myButton": "insertDiv" }
insertDiv: function(event) {
this.$el.append("<div>...</div>");
}
I have an MVC app which has a Tab Panel rendered as the only item in the viewport. Within the tabs I would like to put the same type of component, for which the event handling is equal within all tabs.
Therefore I need an ExtJS MVC Controller ref to the active tab, that would lead me to execute events on the components in the active tab. Is it possible to have such a ref?
My current approach is this:
get reference to Tab Panel
call getActiveTab()
call the controller events for the component in active tab
Is it possible to encapsulate the above 3 steps in one controller ref? Would be beautiful :-)
I'm using ExtJS 4.1.
Personally, I think controller refs are overrated. This sounds like a simple case where you can use one as you describe, but I prefer to listen to the event, and navigate from the firing component to the one I need.
In your case, assuming your tab panel contains regular ext panels, I'd do something like the following:
onButtonClick: function (button) {
var panel = button.up('panel[tab]');
if (panel) {
panel.someMethod();
}
}
The up method will find the closest ancestor that is of xtype panel and has a property named tab. If you have more specific xtypes or known properties, use those instead.
The panel should be the active one (else how was its button clicked?) but you can check that by going up another level to the tab panel and getting the activeTab there.
onButtonClick: function (button) {
var panel = button.up('panel[tab]'),
tabPanel = button.up('tabpanel'),
activeTab = tabPanel && tabPanel.getActiveTab();
if (panel && panel === activeTab) {
panel.someMethod();
}
}
Say your tabPanel has itemId: 'content'. Inside that panel you will have bunch of tabs and on each tab you will have bunch of buttons (as an example). And you want to handle all these button's click in one controller. Do I understand you correctly?
I believe that simple ref inside your controller would work:
this.control('#content button', {
click: this.buttonClicked
}
});