We Keep Coding

Angular ng-smart-table delete confirm modal dose not work

Trying to use ng-smart-table to shows delete confirm modal when user try to delete row, but the modal does not appear.
I added delete related settings following documents and other examples but still modal does not show.
<ng2-smart-table [settings]="settings" [source]="data" (deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>
settings = {
mode: 'external',
pager: {perPage: 10},
hideSubHeader: true,
sort: false,
actions: {
position: 'right',
edit: false,
delete: true,
add: false,
},
delete: {confirmDelete: true},
columns: {
id: {title: 'ID'},
},
}
onDeleteConfirm($event: any) {
if (window.confirm('Are you sure you want to delete?')) {
$event.confirm.resolve();
} else {
$event.confirm.reject();
}
}
Nothing shows on Chrome Console log.

Remove mode: 'external' from the settings.
Please refer the demo for better understanding. DEMO https://stackblitz.com/edit/example-ng2-smart-table

As you can see in the ng2-smart-table documentation:
Triggered only if table confirmDelete = true and mode = inline.
So please change the mode in settings to inline instead of external.

Dragging windows

I did some research on this and still can't find a good solution for it. I wrote my app in ExtJS 4.1 and when I run it on an iPod the dragging functionality is disabled by default (which is what I want), but if I write the same app in ExtJS 6.2 all windows can be draggable which causes issues of visibility of the app. With that being said, Does anyone know how to disable window dragging when using Tablets (iPod, iPad, etc.)? I'm using ExtJS 6.2
Here's my working code that works great for a single window, but I want a general solution that will stop ALL windows from being dragged.
var win = Ext.create('Ext.Window', {
title: "My Window",
width: 500,
modal: true,
layout: 'fit',
items: form,
buttons: [{
text: 'Close',
handler: function() {
win.hide();
}
}]
});
win.show();
if(Ext.os.deviceType === 'Tablet') {
win.dd.disable();
}

A "global solution" sounds like you want to use an override to apply one of the other answers globally to your application:
Ext.define('MyAppName.override.Window', {
override: 'Ext.window.Window',
initComponent: function() {
this.callParent(arguments);
if(Ext.os.deviceType === 'Tablet') {
this.dd.disable();
}
}
})
or
Ext.define('MyAppName.override.Window', {
override: 'Ext.window.Window',
initComponent: function() {
if(Ext.os.deviceType === 'Tablet') {
this.draggable = false;
}
this.callParent(arguments);
}
})
To make the override work, put it into the file app/override/Window.js and add a reference to your requires array in Application.js:
requires: [
'MyAppName.override.Window'
],

You are looking for Ext.os class.
More precisely Ext.os.is method, according to the docs it has all the values you would need.
I am not sure why you want to block only iPads and not tables in general. If you wan tablets than you can use if(Ext.os.deviceType === 'Tablet') {...}
Otherwise if(Ext.os.is.iPad) {...}.
UPDATE Solution:
If you want to force anything across all classes in the ExtJS you would use Ext.override.
So the solution would be to put at the beginning of the app this code:
if (Ext.os.deviceType === 'Tablet') {
Ext.override('Ext.Window', {
privates: {
initDraggable: function(){}
}
})
}
FYI You can check the Ext.Window source code. I had to override this method, the default value draggable: false doesn't work.
https://fiddle.sencha.com/#view/editor&fiddle/2iqi
To test it, just press F12 switch to table mode.
But this solution has 1 drawback:
If the target is a class declared using Ext.define, the override
method of that class is called
Which means this solution don't work when you use Ext.create('Ext.Window',{})
Solution for that would be to define our own Ext.Window class and than inside the app when you are using Ext.create('Ext.Window' you would use Ext.create('Fiddle.view.MyWindow', and when we have our own function already we don't need to use override but can put if directly into the class definition like this:
Ext.define('Fiddle.view.MyWindow', {
extend: 'Ext.Window',
alias: 'widget.mywindow',
draggable: (function(){
if (Ext.os.deviceType === 'Tablet') {
return false;
} else {
return true;
}
})()
});
https://fiddle.sencha.com/#view/editor&fiddle/2iqj
I don't know how to override it for Ext.create('Ext.Window' if you still insists on using it. One solution would be to re-write Ext.create or simply edit the framework source itself but I highly discourage from that.

Why you are not using draggable: false in window config
Here is some code in FIDDLE
var win = Ext.create('Fiddle.view.MyWindow', {
title: "My Window",
width: 500,
draggable: false,
modal: true,
layout: 'fit',
buttons: [{
text: 'Close',
handler: function() {
win.hide();
}
}]
});
win.show();

Replacing javascript Alerts with Kendo Notification

I'm wondering the best way to replace all my alert('error...') with kendo notifications, the easiest way.
so I can just do
myKendoAlert('my message', info); and I don't have to add a specific html div or span holder to each page.
currently I'm doing something like:
var popupNotification = $("#popupNotification").kendoNotification({
position: {
pinned: false,
bottom: 100,
right: 100
},
templates: [{
type: "info",
template: "<div>Test : #= myMessage #</div>"
}],
autoHideAfter: 0,
stacking: "up"
}).data("kendoNotification");
But I need to put this in a common javascript file with a function I can use on all pages. with, info, error, success... (and clear on success)

Just add a method to your namespace to do just that, and call it from where ever you need to.
Here is a sample that is similar to what I do, putting two methods, showSuccess and showError on the top level of the javascript namespace for my application (I use toastr, but same approach).
I have my app object on the window object, with two methods I can call from wherever.
http://jsbin.com/novena/1/edit

var notificationWidget = null;
function alert(message, type) {
if (notificationWidget == null) {
notificationWidget = $("#notification").kendoNotification({
button: true,
hideOnClick: true,
//appendTo: "#container",
//width: "30em",
position: {
pinned: true,
top: "5em",
left: null,
bottom: null,
right: 10
},
autoHideAfter: 8000
}).data("kendoNotification");
}
notificationWidget.show(message, type);
}

Can i give the view a show up animation in emberjs

Here is a example using emberjs router http://jsbin.com/agameq/edit.
Now I wanna have some showup animation, like fadeIn or fadeOut, when route changed. what should I do?

Every View in ember has a method named didInsertElement:
Called when the element of the view has been inserted into the DOM.
Override this function to do any set up that requires an element in
the document body.
All ember views also have a $ which is a reference to jQuery, so you can wrap some element in your view with it and apply any changes to it such as:
// this will animate only the tag h2, which in your case is the title of the users view
App.UsersView = Ember.View.extend({
templateName: 'users',
didInsertElement: function() {
this.$('h2').animate({ fontSize: "3em" }, 900 );
}
});
Or you can call it without arguments (like $()) to return the current view wrapped by jQuery.
To animate a view as you enter in that view/route, do this in your App.UsersView:
// this will animate the entire view
App.UsersView = Ember.View.extend({
templateName: 'users',
didInsertElement: function() {
this.$().animate({ fontSize: "3em" }, 900 );
}
});
(Note: my animation is pretty lame, but it's just to show where to call the methods, do a real animation)
Here's a modified version of your JSBin

Following the answer from #MilkyWayJoe, you probably want to hide the View before inserting it, by setting the isVisible property to false:
App.UsersView = Ember.View.extend({
templateName: 'users',
isVisible: false,
didInsertElement: function() {
var self = this;
this.$().fadeIn(700, function(){
self.set('isVisible', true); //inform observers of `isVisible`
});
}
});
Or use this animation Mixin, which allows you to animate Views by changing a set of observed CSS properties:
App.UsersView = Ember.View.extend( JQ.Animate, {
templateName: 'users',
isVisible: false,
// Observed CSS properties
cssProperties: ['display'],
// Optional animation properties
duration: 700,
easing: 'easeInOutCubic',
didInsertElement: function() {
this.set('display', 'block');
},
afterAnimate: function() {
this.set('isVisible', true);
}
});

ExtJS buttons won't accept "id" config parameter?

I need specific IDs on ExtJS generated window buttons, but I'm having trouble specifying the ID. The documentation claims that this should be possible, but I still get an autogenerated id when I specify my own.
What gives?
dialog = new Ext.Window({
closeAction:'hide',
plain: true,
buttons: [
{
id: 'my-dialog',
text: 'Done',
handler: function() {
dialog.hide();
}
}
],
items:new Ext.Panel({
applyTo:'add-document-popup-panel'
}),
title: 'Add Documents',
layout: 'fit',
resizable: false,
draggable: false,
width: 300,
height: 300,
modal: true
});
}
dialog.show(this);

Check this topic: http://www.sencha.com/forum/showthread.php?24433-CLOSED-Cannot-assign-id-to-button-extjs-bug
The id of the container of the button is set, not the HTML button itself.

The id you specify is assigned to the button component (specific to extjs) and not necessarily to the underlying html button.
Does Ext.getCmp('my-dialog') successfully return the extjs button component?

The ID is set, but not on the actual button element. One of the containers is set with the correct id, and you can probably key off of this to get at whatever you need.

I had the same problem and I confirm:
The ID is set in the button's TABLE container.
Ext.getCmp('my-button') returns the extjs button component (object with xtype="button" and id="my-button").