My project has a navigation view with tabs at the bottom I want when a specific tab is clicked an action sheet pops up. I tried launching a function when the controller is instantiated but that only launches the action sheet once obviously
I did a few things to make this work - not sure it is the best. First, I removed the href from a tab and the inner nav child:
I also added a ng-click action. My showActionSheet needs to defined in rootScope, not a controller, since it needs to be available no matter what controller is active. So in app.js, I added the sample code for it.
.run(function($ionicPlatform,$rootScope,$ionicActionSheet) {
$rootScope.showActionSheet = function() {
console.log("showAS");
var hideSheet = $ionicActionSheet.show({
buttons: [
{ text: '<b>Share</b> This' },
{ text: 'Move' }
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index) {
return true;
}
});
};
Related
I'm trying to add a popup that will be shown on a page when the user starts to populate data in the form and then he decided to go somewhere else in the app.
This popup will show this message: 'Do you want to leave this page and save your changes?'
three buttons are available: Stay, Leave and Save before leaving.
I'm new to ionic logic and I couldn't figure out how to do this.
I started by adding a button in the page that shows the popup (Still don't know how to trigger the event when the user clicks on any link of the sidebar for example). when the user clicks on that button the popup is shown with the three buttons.
The problem is that I don't know how to implement the handlers of these buttons.
This is what I have in the ts file :
leaveOrStayModal() {
let e = event || window.event;
e.stopPropagation();
this.alertMixin.presentAlert(
'Do you want to leave this site?\n',
"You haven't saved your changes!",
'Stay',
'Leave',
'Save',
null,
() => {
console.log('leave handler')
// this.navCtrl.push() Here I don't know how to get the exact link clicked from the sidebar ? to go to
},
() => {
console.log('Save handler')
//here I want to save the form ?
}
)
}
the popup code:
presentAlert(title: string, message: string, btnOneText: string, btnTowText: string, btnThreeText: string,
btnOneHandler?: () => void, btnTowHandler?: () => void, btnThreeHandler?: () => void,
present: boolean = true) {
let confirm = this.alertCtrl.create({
title: title,
message: message,
buttons: [
{
text: btnOneText,
handler: () => {
if (btnOneHandler) {
btnOneHandler();
}
}
},
{
text: btnTowText,
handler: () => {
if (btnTowHandler) {
btnTowHandler();
}
}
},
{
text: btnThreeText,
handler: () => {
if (btnThreeHandler) {
btnThreeHandler();
}
}
}
]
});
if (present) {
confirm.present().then();
}
return confirm;
}
And this is the button that shows the popup (to be removed )
<button ion-button icon-left item-right type="button" (click)="leaveOrStayModal()"> Click to show modal </button>
You should leverage life cycle hook ionViewCanLeave for that. Some basic documentation here: https://ionicframework.com/docs/api/navigation/NavController/
For your context I just drafted the way I would do it (its a bit dirty):
userCanLeave = false;
ionViewCanLeave() {
// here you can use other vars to see if there are reasons we want to keep user in this page:
if (!this.userCanLeave) {
return new Promise((resolve, reject) => {
let alert = this.alertCtrl.create({
title: 'Are you sure?',
message: 'The form data may be lost',
buttons: [
{
text: 'Stay',
role: 'cancel',
handler: () => {
console.log('User stayed');
this.userCanLeave = false;
reject();
}
},
{
text: 'Leave',
handler: () => {
console.log('User leaves');
this.userCanLeave = true;
resolve();
}
},
{
text: 'Save',
handler: () => {
console.log('User saved data');
// do saving logic
this.userCanLeave = true;
resolve();
}
}
]
});
alert.present();
});
} else { return true }
}
userCanLeave - here is just example of a var that defines if the page has the state where we would not want a user to leave "freely".
then we use promise to ensure that user can not leave without answering dialogue options, we wait for their answers to define whether life cycle hook gets true/false flag to proceed.
Please note also that this life cycle hook only "kicks in" when a view (page) gets off the stack (pops) if you would push in a new view - it won't guard that. But in this case new pushed in page won't destroy user's data in the form anyway and user can safely return to it once you dismiss that newly pushed in page.
Hope this helps.
I created an action sheet containing some options
when I select an option I want it to be highlighted.
I took the code from here
https://ionicframework.com/docs/components/#action-sheets
can someone help me please
You can use some (S)CSS to style it with a pseudo-class like :active or :hover. To include your own CSS classes to the action sheet you could use its cssClass property when creating it. Like so:
let actionSheet = this.actionSheetCtrl.create({
title: 'Ionic Action Sheet',
cssClass: 'your-custom-class',
buttons: [
{
text: 'Button 1',
cssClass: 'custom-button-1-class',
handler: () => {
console.log("Button 1 picked!");
}
}
]
});
By doing that, you can use custom CSS classes to style each button (option) of your action sheet, as well as the action sheet itself. If you wanted to, say, make Button 1 have a black background whenever a user "activated" it, you could write:
.custom-button-1-class:active {
background-color: black;
}
I use wordpress and currently writing a plugin for the tinymce-editor. I use the windowmanager.open() function to show a modal, but I dont know how to hide the ok button in this modal. The official documentation is very slim: https://www.tinymce.com/docs/api/tinymce/tinymce.windowmanager/#open
I assume you are creating the modal as per the documentation link you provide, if so, then the buttons parameter let you specify the buttons to add to the modal and the actions of said buttons, like this:
tinymce.activeEditor.windowManager.open({
url: 'file.htm',
buttons: [{
text: 'Accept',
subtype: 'primary',
onclick: 'submit'
},
{
text: 'Custom',
onclick: function(){
//Add custom action here
}
},
{
text: 'Close',
onclick: 'close'
}
],
width: 320,
height: 240
}, {
custom_param: 1
});
passing an empty buttons parameter gives no buttons in the modal, the 'submit' and 'close' strings in onclick button's parameter make the buttons perform those actions, you can add custom logic by defining an anonymous function instead, you can also add custom logic to the 'submit' action by adding the onsubmit parameter, like this:
onsubmit: function() {
//custom logic
}
Tinymce documentation is not much help, I've been researching something similar this past days, these links might be useful for you:
https://www.tinymce.com/docs/api/tinymce/tinymce.plugin/
https://docs.contenido.org/display/CONDEVE/TinyMCE+4#TinyMCE4-Writingownplugins
I have a strange problem with all my selectfields. When I enter a view for the first time containing a selectfield with a change event listener defined in the controller, it works fine. I can do a select and the event will fire. But when I enter an other view and pop that view so I return in the view with the selectfield, the change event does not fire anymore. Also the selected value is gone. I've tried to add the listeners to the config in the view, but that is not working at all?
This is more ore less an example of what I'm doing.
Controller:
Ext.define('MyApp.controller.Search', {
extend: 'Ext.app.Controller',
config: {
refs:{
distanceSelect:'#distanceSelect',
},
control:{
distanceSelect:{
change:'filterSearchList',
},
}
},
filterSearchList:function(){
alert('42!!');
}
});
View:
Ext.define('Abedrijven.view.search.Search_main', {
extend:'Abedrijven.view.Screen',
alias:'widget.search_main',
requires:[
'Ext.field.Select',
],
config:{
items:[{
xtype: 'selectfield',
id: 'distanceSelect',
name:'distance',
options: [{
text: '- All -',
value: '0'
}, {
text: '5 Km.',
value: '5'
}, {
text: '10 Km.',
value: '10'
}
}]
}
});
EDIT
I have this in my app.js. I call these when I want to change the views.
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
var view = Ext.create('Abedrijven.view.Main');
Ext.Viewport.add(view);
Abedrijven.app.view = view;
Abedrijven.app.pushView = function(xtype,data){
Abedrijven.app.view.push({xtype:xtype,data:data});
}
Abedrijven.app.popView = function(){
Abedrijven.app.view.pop();
},
Abedrijven.app.goHome = function(){
Abedrijven.app.view.reset();
}
Abedrijven.app.view.add({xtype:'home_main'});
},
My main view:
Ext.define("Abedrijven.view.Main", {
extend:'Ext.NavigationView',
requires:[
'Ext.Toolbar',
'Ext.tab.Panel',
'Ext.TitleBar',
],
alias:'widget.main',
id:'mainview',
config:{
cls:['mainview'],
fullscreen: true,
ui:'dark',
items:[
The first time it all works, change to other view, and than change back to this view and the change event will not fire. I'm using ST 2.0.1.1 GPL. Tested on iOS and browser.
Any help would be great!
Thanks in advance!
I had the same problem because I was using views defined and instantiated at runtime. First time was fine, second one the controller was loosing the listeners.
I solved the problem simply using dom subqueries.
config: {
refs: {
RecordTypeSelectField : 'NewRecordPanel #recordTypeSelectField'
Essentially you simply add the parent container to the query key. That's all!
I've found the bug. I was using id's, but itemId is better. Here the answer that helped me figuring this out.
id:'myid'
replaced to
itemId:'myid'
Needed to change some code to get the right elements again, but now it works
I would like to switch views with a button, there is absolutely no examples of it in a MVC context in the sencha documentation although they recommend developers to use their build in MVC architecture. I guess its because Touch 2.0 is rather new.
http://docs.sencha.com/touch/2-0/#!/api
The video about the list component is also about navigation.View, but since the list component is used, they dont show how to switch views with a button.
Video: Intro to List Component
This is the code i have so far:
uddannelser.js (First view)
Ext.define("VUCFyn.view.uddannelser", {
extend: "Ext.navigation.View",
xtype: "uddannelser",
requires: [
"VUCFyn.view.avu"
],
config: {
title: "Uddannelser",
cls: "uddannelser",
items: [
{
title: "Uddannelser",
xtype: "container",
margin: 20,
layout: "vbox",
items: [
{
xtype: "button",
text: "AVU",
width: 100
}
]
}
]
}});
avu.js (subview of uddannelser)
Ext.define("VUCFyn.view.avu", {
extend: "Ext.Panel",
xtype: "avu",
config: {
title: "AVU",
cls: "avu",
scrollable: true,
items: [
{
xtype: "label",
html: [
"<p>Almen Voksenuddannelse - avu - er et tilbud om uddannelse til alle over 18 år. Du kan tage avu-fagene et ad gangen eller i en kombination med flere fag. Du kan også kombinere avu-fagene med andre enkeltfag på FVU og/eller hf.</p>",
"<h5>AVU omfatter kernefagene:</h5>",
].join("")
}
]
}});
Main.js (controller)
Ext.define('VUCFyn.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
uddannelser: "uddannelser"
},
control: {
"uddannelser": {
tap: "showDetail"
}
}
},
showDetail: function () {
this.getUddannelser().push({
xtype: "avu"
});
},
init: function () {
}});
Please, if someone could show me how to do it, based on the above code (or similar) that would be great.
btw: the answers in this thread: Sencha Touch 2 MVC - how to switch views with button is not working for me. (No errors though) I think its for Sencha Touch 1.1, and a lot of things have apparently changed in 2.0
Hi I think you just need to fix the controller and it will work, try the following and let me know how you get on.
config: {
refs: {
uddannelser: "uddannelser",
uddannelserButton: "uddanelser button"
},
control: {
"uddannelserButton": {
tap: "showDetail"
}
}
},
So all I have done is add a selector for the button in your uddanelser view and attached the click listener to that. Good luck!
Are you trying to listen for tap events on the navigationview you've given the uddannelser cls? There's a couple of issues with your setup;
Firstly, it doesn't look like you are using component queries properly in your controller, check this documentation: http://docs.sencha.com/touch/2.4/apidocs/#!/api/Ext.ComponentQuery
Depending on how many of these components in the view you want the controller to manage, you can either give it an id and search for the component by "#id" or you can use the xtype and a config option, such as "navigationview[cls=uddannelser]".
Secondly, you can't listen for tap events on a navigationview, if you wanted to listen for tap events on this component you'd have to listen for the tap event on the element and relay the event. I suspect you are actually trying to listen for the tap event on the button though, in that case create two refs in your controller, one for the navigationview and one for the button, listen for the tap event on the button and push the panel on the navigationview like you are now.