We Keep Coding

ExtJS - disable/enable elements on combo change

The title says much about it. I will pass you an example below:
let scalesField = {
xtype: 'combo',
name: property.name + 'scale',
listeners: {
change: function (combo, selectedValue) {
// here would be some logic
// Tried with:
Ext.Array.each(possibleValues, function (single, index) {
possibleValues[index].disabled = true;
if (possibleValues[index].scale_id === selectedValue) {
possibleValues[index].disabled = false;
}
});
}
}
};
if (possible_values.length > 0) {
Ext.Array.each(possible_values, function (single, index) {
fields.push({
xtype: 'checkboxfield',
fieldLabel: possible_values[index].name,
name: possible_values[index].name,
labelWidth: 100,
});
});
}
Variable 'possible_values' contain all possible checkboxes as are defined in the 'if' block. I want to disable or enable checkboxes depending on what option user choose in combo(select option dropdown).
After running code as below I can see in the console that property disabled is changed but it does not apply to a view.
How to solve this in ExtJS?

You can use it like below:-
Ext.ComponentQuery.query('checkboxfield[name=' + possibleValues[index].name + ']')[0].setDisabled(true /*/false*/ );

How to hide/ Remove action columns Item?

I have a problem for hide/remove action column Item on record condition in grid view.
let see bellow code. there is action column code I did. I want to hide delete Icon shown in image. this delete icon hide/remove on record condition.
{
xtype: 'actioncolumn',
flex: 1,
align: 'center',
scope: this,
renderer: function (n, t, rec) {
/* if (rec.get('companyId') == 23) {
console.log('Distributor Account List');
}
else {
console.log('Distributor Client user List');
} */
},
items: [
{
icon: FLEET_SERVER_URL + 'images/edit2.png',
tooltip: fleet.Language.get('_FLEET_USER_USERLIST_EDIT_'),
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
this.fireEvent('showUserDetails', rec);
}
},
{
xtype: 'spacer'
},
{
icon: (Ext.getStore('userStore').first().get('issuperadmin') == 1 || Ext.getStore('userStore').first().get('isadmin') == 1 || Ext.getStore('userStore').first().get('isadmin') == 3) ?
FLEET_SERVER_URL + 'images/vehicles/van-icon.png' : '', // Use a URL in the icon config
tooltip: fleet.Language.get('_FLEET_USER_USERLIST_VEHICLE_'),
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
this.fireEvent('assignvehicles', rec);
}
},
{
xtype: 'spacer'
},
{
icon: FLEET_SERVER_URL + 'images/del.png',
tooltip: fleet.Language.get('_FLEET_USER_USERLIST_DELETE_'),
handler: function (grid, rowIndex, colIndex) {
Me = this;
var rec = grid.getStore().getAt(rowIndex);
Ext.Msg.show({
title: fleet.Language.get('_FLEET_USER_USERLIST_REMOVETITLE_'),
msg: fleet.Language.get('_FLEET_USER_USERLIST_REMOVEMSG_'),
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
callback: function (button) {
if (button == fleet.Language.get('_FLEET_USER_USERLIST_YESBTN_')) {
Me.removeUser(rec);
}
}
});
}
}
]
}
There are 4 items in action column (Edit icon, spacer, spacer, and delete Icon) please see Attached image.
In above code there is Action column render event. e.g. I want to check record having company ID=23. I use this condition for testing. Main problem is that I want to hide that delete Icon on condition. Any proper solution for this?

What you want to do is not use the icon property, but you want to put the icons into the corresponding CSS in a class. E.g.
.someIcon {
background-image: path/to/icon.png no-repeat center center !important;
width:20px;
height:20px;
}
and then you can add a getClass config instead of the icon config, and provide the CSS classes as needed, e.g. if you want to switch icon on or off:
getClass: function(v, meta, rec) {
if(rec.get('companyId')==23) return 'someIcon';
else return '';
}
or, if you want to have different icons, e.g.:
getClass: function(v, meta, rec) {
if(rec.get('isImportant')) return 'redIcon';
else return 'greyIcon';
}
Please note that you have to recompile your project in Sencha Cmd if you add classes through SCSS.

Extjs add a button to Desktop TaskBar QuickStart

I need to add a button to the taskbar quickstart, but i do not want to open a module window, for example a logout button that will show a confirm messagebox, i have tried like this:
getTaskbarConfig: function () {
var ret = this.callParent();
me = this;
return Ext.apply(ret, {
quickStart: [
{ name: 'Window', iconCls: 'icon-window', module: 'ext-win' },
{ name: 'Logout', iconCls:'logout', handler: me.onLogout}
]
});
},
onLogout: function () {
Ext.Msg.confirm('Logout', 'Are you sure you want to logout?');
},
And i changed the getQuickStart function of the TaskBar.js file to this:
getQuickStart: function () {
var me = this, ret = {
minWidth: 20,
width: Ext.themeName === 'neptune' ? 70 : 60,
items: [],
enableOverflow: true
};
Ext.each(this.quickStart, function (item) {
ret.items.push({
tooltip: { text: item.name, align: 'bl-tl' },
overflowText: item.name,
iconCls: item.iconCls,
module: item.module,
//handler: me.onQuickStartClick, **original code**
handler: item.handler == undefined ? me.onQuickStartClick : item.handler,
scope: me
});
});
return ret;
}
But it does not work, is there a way to add a simple button to the taskbar quickstart?

Thanks for your reply. I have solved the issue. In the TaskBar.js file i changed this line:
handler: item.handler == undefined ? me.onQuickStartClick : item.handler
for this one:
handler: item.handler ? item.handler : me.onQuickStartClick
Actually, for me, both do the same, but for any weird reason the code works with that change.

noty, call a function on button click

This is a prototype function I use for displaying confirmation with buttons using noty.
function confirmation(message, call_func)
{
var m=noty(
{
text: message,
modal: true,
layout : 'center',
theme: 'notifications',
buttons: [
{
addClass: 'general-button red', text: 'Yes', onClick: function($noty)
{
call_func;
$noty.close();
}
},
{
addClass: 'general-button', text: 'No', onClick: function($noty)
{
$noty.close();
}
}]
});
return m;
}
I am calling this function with the syntax,
confirmation("Are you sure want to delete this item?", "delete("+id+")");
So on clicking the Yes button, another function delete(id) have to be called. But it does not, why?
I checked with alert, alert(call_func). I alerts as delete(10) where 10 is ID at the instance.

Well here you are not calling the function
call_func;
you are just referencing it
And here you are just building a string
"delete("+id+")")
it is not a reference to a function call.
What you need to do is pass in an actual function and execute the function.
confirmation("Are you sure want to delete this item?", function(){ delete(id); });
and
call_func();

Why won't my jQuery-ui modal dialog display two custom buttons?

I have a generic Javascript function for displaying a jQuery-ui modal dialog with two buttons -- essentially "Continue" and "Cancel", though the text varies. I'm calling it in three places in my application. What's happening is that only the second button, the "Cancel" button is being displayed. Here's the function: (String.Format is an external function I always use since Javascript doesn't have one built-in - I know it isn't the problem.)
function DisplayModalDialog(titleText, bodyText, continueText, cancelText) {
//add the dialog div to the page
$('body').append(String.Format("<div id='theDialog' title='{0}'><p>{1}</p></div>", titleText, bodyText));
//create the dialog
$('#theDialog').dialog({
width: 400,
height: "auto",
modal: true,
resizable: false,
draggable: false,
close: function (event, ui) {
$('body').find('#theDialog').remove();
$('body').find('#theDialog').destroy();
},
buttons: [
{
text: continueText,
click: function () {
$(this).dialog('close');
return true;
},
text: cancelText,
click: function () {
$(this).dialog('close');
return false;
}
}]
});
return false;
}
And here's a snippet showing how I'm calling it:
if(CheckFormDataChanged() {
var changeTitle = "Data has been changed";
var changeText = "You have updated information on this form. Are you sure you wish to continue without saving?";
var changeContinue = "Yes, continue without saving";
var changeCancel = "No, let me save";
if (DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel)) {
if (obj) obj.click();
return true;
}
}
What's wrong with my function (or the call)?
UPDATE: Here's what I'm working with now. I realized that on one of the modal dialogs I didn't need a cancel button, just an acknowledge button:
function DisplayModalDialog(titleText, bodyText, continueText, cancelText, suppressCancel) {
var def = new $.Deferred();
//add the dialog div to the page
$('body').append(String.Format("<div id='theDialog' title='{0}'><p>{1}</p></div>", titleText, bodyText));
//create the button array for the dialog
var buttonArray = [];
buttonArray.push({ text: continueText, click: function () { $(this).dialog('close'); def.resolve(); } });
if (!suppressCancel) {
buttonArray.push({ text: cancelText, click: function () { $(this).dialog('close'); def.reject(); } });
}
//create the dialog
$('#theDialog').dialog({
... dialog options ...
close: function (event, ui) { $('body').find('#theDialog').remove(); },
buttons: buttonArray
});
return def.promise();
}
And the usage:
DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel, false)
.done(function () { if (obj) obj.click(); return true; })
.fail(function () { return false; });
Just to give you some context, obj is an ASP.Net Button being passed to the client-side function; if the function returns true, the server-side OnClick event is triggered; if false, it isn't. In this case, the server-side OnClick advances to the next tab in a TabContainer (among other things). What's happening is that it's moving to the next tab anyway, even though I'm returning false in the fail() function.

Your curly braces are off:
[{
text: continueText,
click: function () {
$(this).dialog('close');
return true;
}
}, {
text: cancelText,
click: function () {
$(this).dialog('close');
return false;
}
}]
As you have it, you only have one object in your buttons array.

I can't tell yet why the button doesn't display EDIT, ah, yes I can, there's a missing curly brace.
What I can tell you that your return lines simply won't work.
The dialog box gets displayed, your function returns immediately, and processing continues, so the click callback return values are completely ignored.
What you can do instead is return a promise:
function DisplayModalDialog(titleText, bodyText, continueText, cancelText) {
var def = $.Deferred();
...
buttons: [
{
text: continueText,
click: function () {
$(this).dialog('close');
def.resolve();
}
},
{ // ah - here's your button bug - a missing brace
text: cancelText,
click: function () {
$(this).dialog('close');
def.reject();
}
}
...
return def.promise();
}
with usage:
DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel)
.done(function() {
// continue was clicked
}).fail(function() {
// cancel was clicked
});