I am using w2ui. I have a toolbar with one button. This button has the icon-image "icon-delete".
When I click on the button, I want it to change the icon-image to "icon-add", but my code doesn't work.
toolbar: {
items: [{
type: 'button',
id: 'hide',
caption: 'Menü',
img: 'icon-delete'
}],
onClick: function (target, data) {
if (target == 'hide') {
this.items.img('icon-add');
}
}
}
You can use toolbar.set() method to update toolbar button icon. So in your onClick event do the following:
onClick: function (target, data) {
this.set(target, { icon: 'new_icon' });
}
See more here: http://w2ui.com/web/docs/w2toolbar.set
I created a hidden button "show" with the "icon-add" image.
when the button "hide" is clicked, it get hidden and the button "show" get shown.
toolbar: {
name: 'toolbar',
items: [
{ type: 'button', id: 'hide', caption: 'Menü', img: 'icon-delete' },
{ type: 'button', id: 'show', hidden: 'true', caption: 'Menü', img: 'icon-add' }
],
onClick: function (target, data) {
if (target == 'hide' ) {w2ui['layout'].toggle('left', window.instant);
this.hide('hide');
this.show('show');
}
if (target == 'show' ) {w2ui['layout'].toggle('left', window.instant);
this.hide('show');
this.show('hide');
}
}
}
I think you were missing the refresh line in your original approach. Here is an example that worked for me. I added an else part
if (event.target == 'hide') {
if (this.items[0].icon == 'icon-delete') {
this.items[0].icon = 'icon-add';
//do something code
} else {
this.items[0].icon = 'icon-delete';
//do something else code
}
w2ui['toolbar'].refresh('hide');
}
Related
I have a generic Split button defined like:
this.toolbarButtons.publish = new Ext.SplitButton({
text: t('save_and_publish'),
iconCls: 'pimcore_icon_save_white',
cls: 'pimcore_save_button',
scale: 'medium',
handler: this.publish.bind(this),
menu: [{
text: t('save_pubish_close'),
iconCls: 'pimcore_icon_save',
handler: this.publishClose.bind(this)
},
{
text: t('save_only_new_version'),
iconCls: 'pimcore_icon_save',
handler: this.save.bind(this, 'version'),
hidden: !this.isAllowed('save') || !this.data.general.o_published
}
]
});
What I need to happen is - when user clicks the Publish button a confirm box appears which collects yes/no click.
I have a AJAX call on the yes/no click to execute/prevent user notification of the publish action.
I have tried something like this:
this.toolbarButtons.publish = new Ext.SplitButton({
text: t('save_and_publish'),
iconCls: 'pimcore_icon_save_white',
cls: 'pimcore_save_button',
scale: 'medium',
listeners: {
click: function() {
Ext.MessageBox.confirm(
'Confirm', 'Notify related users?', callbackFunction);
function callbackFunction(btn) {
if(btn == 'yes') {
Ext.Ajax.request({
url: Routing.generate('save_phrase_and_notify'),
jsonData: {
notifyFlag: JSON.stringify(true),
phraseId: JSON.stringify(phraseId),
},
method: 'POST',
success: (response) => {
button.up('window').close();
},
failure: () => {
Ext.MessageBox.alert(
t('Sum Tim Wong'),
);
},
});
} else {
Ext.Ajax.request({
url: Routing.generate('save_phrase_and_notify'),
jsonData: {
notifyFlag: JSON.stringify(false),
phraseId: JSON.stringify(phraseId),
},
method: 'POST',
success: (response) => {
button.up('window').close();
},
failure: () => {
Ext.MessageBox.alert(
t('Sum Tim Wong 2'),
);
},
});
}
}
}
},
handler: this.publish.bind(this),
menu: [{
text: t('save_pubish_close'),
iconCls: 'pimcore_icon_save',
handler: this.publishClose.bind(this)
},
{
text: t('save_only_new_version'),
iconCls: 'pimcore_icon_save',
handler: this.save.bind(this, 'version'),
hidden: !this.isAllowed('save') || !this.data.general.o_published
}
],
});
This confirm box work but I need to prevent the handler( handler: this.publish.bind(this)) from executing until the yes/no is clicked by the user. Currently the confirm box appears but the handler runs anyways, which redirects to a overview page.
How do I prevent the handler from running until yes/no is clicked? Ultimately how can I move the handler bind action in the AJAX success function?
I am wondering, if it is possible to implement in the existing jQuery context menu (link to jQuery custom context menu) a link item, where you can right click on the link to get the default browser context menu.
This is my code so far:
$('.cMenuCust').on('contextmenu', function(e){
$('ul li:nth-child(3)').text((c > 100) ? 'tooMuch' : 'thatsOK');
$('.context-menu-list').width(500);
});
$(function(){
$.contextMenu.types.label = function(item, opt, root) {
$('<span>HTML<span>')
.appendTo(this)
.on('contextmenu', 'a', function(e) {
return true;
});
this.addClass('labels').on('contextmenu:focus', function(e) {
}).on('contextmenu:blur', function(e) {
});
};
$.contextMenu({
selector: '.cMenuCust',
trigger: 'left',
callback: function(key, options) {
if (key === 'a') {
...
} else if (key === 'XLSX') {
...
} else if (key === 'CSV') {
...
}
},
items: {
"title": {name: '{!cmTitel}', disabled: true},
"sep1": "----------------",
"XLS": {name: 'XLS'},
label: {type: "label", customName: "Label", callback: function(){ return false; }, disabled: function(){ return (c > 10000); }},
"CSV": {name: 'CSV'}
}
});
});
Do you have any idea how to get the default browser context menu, if I make a right click on the link item in the jQuery custom context menu (link to jQuery custom context menu)?
Every hint is highly appreciated.
Thanks in advance.
When i tap delete the action sheet sheet doesnt hide after a successful delete. Is there a way I could call the cancel from the deletePicture function?
$scope.deletePicture = function(post_id, pic_id, index){
PostService.DeletePic(post_id, pic_id, $localStorage.CurrentUser.auth_token)
.success(function (data) {
$scope.pics.splice(index);
hideSheet(); //doesn't Hide the action sheet
}).
error(function(error,status) {
})
}
$scope.update_or_delete = function(post_id,pic_id,index){
$ionicActionSheet.show({
titleText: 'Edit Photo',
buttons: [
{ text: 'Change' },
],
destructiveText: 'Delete',
cancelText: 'Cancel',
cancel: function() {
console.log('CANCELLED');
},
destructiveButtonClicked: function() {
$scope.deletePicture(post_id,pic_id,index);
},
buttonClicked: function(index) {
if(index === 0){ // Camera BUtton
$scope.changePicture();
}
return true;
}
});
};
You must return true from the destructiveButtonClicked callback in order to automatically close the action sheet.
From the Docs :
destructiveButtonClicked : Called when the destructive
button is clicked. Return true to close the action sheet, or false to
keep it opened.
So in your case, it will be :
$ionicActionSheet.show({
titleText: 'Edit Photo',
buttons: [{
text: 'Change'
}, ],
destructiveText: 'Delete',
cancelText: 'Cancel',
cancel: function() {
console.log('CANCELLED');
},
destructiveButtonClicked: function() {
$scope.deletePicture(post_id, pic_id, index);
return true;
},
buttonClicked: function(index) {
if (index === 0) { // Camera BUtton
$scope.changePicture();
}
return true;
}
});
You can check out a demo here
I building a sortable table in Meteor with Reactive-Table and having trouble getting my delete button to work for removing entries from the table.
Please see my javascript code below:
Movies = new Meteor.Collection("movies");
if (Meteor.isClient) {
Template.body.events({
"submit .new-movie": function (event) {
var title = event.target.title.value;
var year = event.target.year.value;
var genre = event.target.genre.value;
Movies.insert({
title: title,
year: year,
genre: genre
});
event.target.title.value = "";
event.target.year.value = "";
event.target.genre.value = "0";
return false;
}
});
Template.moviestable.events({
"click .deletebtn": function (event) {
Movies.remove(this._id);
}
});
Template.moviestable.helpers({
movies : function () {
return Movies.find();
},
tableSettings : function () {
return {
showFilter: false,
fields: [
{ key: 'title', label: 'Movie Title' },
{ key: 'year', label: 'Release Year' },
{ key: 'genre', label: 'Genre' },
{ key: 'edit', label: 'Edit', fn: function () { return new Spacebars.SafeString('<button type="button" class="editbtn">Edit</button>') } },
{ key: 'delete', label: 'Delete', fn: function () { return new Spacebars.SafeString('<button type="button" class="deletebtn">Delete</button>') } }
]
}
}
});
}
Can anyone tell me what I'm doing wrong?
In the reactive tables docs, there's an example of how to delete rows from the table. Adapting the example in the docs for your needs, your event should look like this:
Template.moviestable.events({
'click .reactive-table tbody tr': function (event) {
event.preventDefault();
var objToDelete = this;
// checks if the actual clicked element has the class `deletebtn `
if (event.target.className == "deletebtn") {
Movies.remove(objToDelete._id)
}
}
});
The problem you are having is that you are trying to find the _id property on the button click instead of the row click.
If you do console.log(this) on your button click event (as you have it in your question above) you will get something like this Object {key: "delete", label: "", fieldId: "2", sortOrder: ReactiveVar, sortDirection: ReactiveVar} which does not contain the property _id
It is easier to register the row click, where the row object is the actual document you are trying to delete, and then check if the event's target has the delete class you added.
How to disable the delete button using if condition in Extjs for ex;i want to disable the button if it satifies the given if condition else remain enabled.
if(validAction(entityHash.get('entity.xyz'),actionHash.get('action.delete')))
This is the grid Delete button code.
Ext.reg("gridheaderbar-inActive", Ad.GridInActiveButton,{
xtype: 'tbspacer', width: 5
});
Ad.GridCampDeleteButton = Ext.extend(Ext.Toolbar.Button, {
//text: 'Delete',
cls: 'ad-img-button',
width:61,
height:40,
iconCls: 'ad-btn-icon',
icon: '/webapp/resources/images/btn_del.png',
handler:function(){
statusChange(this.parentBar.parentGrid, 'Delete')
}
});
create actioncolumn and make custom renderer:
{
xtype: 'actioncolumn',
width: 38,
renderer: function (val, metadata, record) {
this.items[0].icon = '${CONTEXT_PATH}/images/' + record.get('fileType') + '.png';
this.items[0].disabled = !record.get('isDownloadActionEnable');
this.items[1].disabled = !record.get('isDeleteActionEnable');
metadata.style = 'cursor: pointer;';
return val;
},
items: [
{
icon: '${CONTEXT_PATH}/images/pdf.png', // Use a URL in the icon config
tooltip: 'Download',
handler: function (grid, rowIndex, colIndex) {
//handle
}
},
{
icon: '${CONTEXT_PATH}/images/delete.png', // Use a URL in the icon config
tooltip: 'Delete',
handler: function (grid, rowIndex, colIndex) {
handle
}
}
]
}
in this example You see additionally how to change dynamically icon.
One way to solve it is to attach a unique ID to your delete button and bind a listener to the selectionchange event of your SelectionModel, whenever the selection changes you can check whatever you want and enable/disable the button as you see fit.
ie.
Ad.GridCampDeleteButton = Ext.extend(Ext.Toolbar.Button, {
id: 'btnDelete',
cls: 'ad-img-button',
...
});
and in your selectionmodel do something like this :
var sm = new Ext.grid.CheckboxSelectionModel({
...
,listeners: {
'selectionchange' : {
fn: function(sm) {
if (sm.hasSelection()) {
var selected = sm.getSelected();
if (selected.get('field') == value) {
Ext.getCmp('btnDelete').disable();
}
else {
Ext.getCmp('btnDelete').enable();
}
}
}
,scope: this
}
}
});