I need some direction in the following situation I have to solve:
I have a 'page' that have some fields that can be edit with 'save' button and with another button to 'navigate' to another place.
If the user edit some fields and click on the 'navigate' button before saving the data, the application should show and message something like:
Confirm Navigation
Button1 -> Leave this page Stay on this page
Button2 -> Stay on this page
I was think that I need some availability of pre-processing, before navigating to another place, Is there some availability in marionettejs before navigating in the AppRouter Or Router objects?, also I need to get some indication from the user, to which button he clicks.
You should have events set up for the buttons
Backbone.Marionette.ItemView.extend({
/* Removed other stuffs*/
events: {
'click #navigateBtn': function(e) {
/* Do your preprocessing in here */
}
}, //events
}
Related
Is it possible to add a component, like Button to a ToastBar? I want to add an action button that loads a new form when its clicked. Or is there any method exposed to add listeners to a ToastBar component?
You can't add an actual button to ToastBar at the moment but you can add an action event.
// 10 seconds on screen
ToastBar.showMessage("I am a toast message", FontImage.MATERIAL_OPEN_WITH, 10000, e -> {
// ToastBar clicked, go to next form
});
Sure use something like:
tb.addMaterialCommandToRightSideMenu("", FontImage.MATERIAL_OPEN_WITH, e -> {
// button click event
});
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
}
When the user clicks this camera icon the get a snapshot of the page in a modal. If they click repeatedly it will make multiple snapshots before the modal has loaded and essentially blocked the camera icon.
Is there a way that I can say if a snapshot modal has just been created do not create another one?
events: {
'click .snapshot-camera' : 'clickCamera'
}
clickCamera: (event) ->
event.preventDefault()
#snapshot = new ******.Models.Snapshot({ user_id: ******.State.get('signInUser').id })
You can use underscore's debounce method which prevents double submissions.
// prevent double-click
$('button.my-button').on('click', _.debounce(function() {
console.log('clicked');
/* .. code to handle form submition .. */
}, 500, true);
Have a look into the below article
http://jules.boussekeyt.org/2012/backbonejs-tips-tricks.html
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);
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
}
});