We Keep Coding

Datatables date sort vs date display

I am using Datatables to display a table and I am pulling a list of datestimes from a MySQL database. These date times are not standard dates and look like this:
12/30/19 # 04:17 pm
How can I sort these accurately with Datatables?
Here is my code:
getRes(function (result) { // APPLIED CALLBACK
$('#resdatatable').DataTable({
data: result, // YOUR RESULT
order: [[ 0, "desc" ]],
autoWidth: false,
responsive: true,
columns: [
{ data: 'id', title: 'ID' },
{ data: 'bookingdatetime', title: 'Booking Date' },
{ data: 'name', title: 'Name' },
{ data: 'class', title: 'Class' },
{ data: 'pickupdatetime', title: 'Pick up' },
{ data: 'duration', title: 'Duration' },
{ data: 'dropdatetime', title: 'Drop off' },
{ data: 'age', title: 'Age' },
{ data: 'coverage', title: 'Coverage' },
{ data: 'quote', title: 'Quote' },
{
data: 'status',
title: 'Status',
render: function(data, type, row) {
let isKnown = statusList.filter(function(k) { return k.id === data; }).length > 0;
if (isKnown) {
return $('<select id="resstatus'+row.id+'" onchange="changeResStatus('+row.id+')" data-previousvalue="'+row.status+'">', {
id: 'resstatus-' + row.id, // custom id
value: data
}).append(statusList.map(function(knownStatus) {
let $option = $('<option>', {
text: knownStatus.text,
value: knownStatus.id
});
if (row.status === knownStatus.id) {
$option.attr('selected', 'selected');
}
return $option;
})).on('change', function() {
changeresstatus(row.id); // Call change with row ID
}).prop('outerHTML');
} else {
return data;
}
}
}
]
});
});
/**
* jQuery plugin to convert text in a cell to a dropdown
*/
(function($) {
$.fn.createDropDown = function(items) {
let oldTxt = this.text();
let isKnown = items.filter(function(k) { return k.id === oldTxt; }).length > 0;
if (isKnown) {
this.empty().append($('<select>').append(items.map(function(item) {
let $option = $('<option>', {
text: item.text,
value: item.id
});
if (item.id === oldTxt) {
$option.attr('selected', 'selected');
}
return $option;
})));
}
return this;
};
})(jQuery);
// If you remove the renderer above and change this to true,
// you can call this, but it will run once...
if (false) {
$('#resdatatable > tbody tr').each(function(i, tr) {
$(tr).find('td').last().createDropDown(statusList);
});
}
function getStatusList() {
return [{
id: 'Confirmed',
text: 'Confirmed'
}, {
id: 'Unconfirmed',
text: 'Unconfirmed'
}, {
id: 'Communicating',
text: 'Communicating'
}, {
id: 'Open',
text: 'Open'
}, {
id: 'Closed',
text: 'Closed'
}, {
id: 'Canceled',
text: 'Canceled'
}, {
id: 'Reallocated',
text: 'Reallocated'
}, {
id: 'No Show',
text: 'No Show'
}];
}
I need to sort bookingdatetime, pickupdatetime, dropdatetime accurately (they are currently being converted into MM/DD/YY in the PHP script)

Maybe you can prepend hidden <span> elements containing the respective unix timestamps in the cells that have dates (by manually parsing the dates). Then using such columns to sort alphabetically would practically sort time-wise.

Filter custom JSON

I have this JSON
const Menu = [{
icon: "home",
text: "Inicio",
url: {
name: "home"
},
typeUrl: "exact"
},
{
heading: "Operaciones"
},
{
icon: "settings",
"icon-alt": "settings",
text: "Operación",
model: true,
children: [{
icon: "add",
text: "Cargar Pedidos",
url: {
name: "cargarpedidos"
}
},
{
icon: "playlist_add_check",
text: "Aprobar Pedidos"
},
{
icon: "content_copy",
text: "Remitir Pedidos"
}
]
},
{
heading: "Informes"
},
{
icon: "widgets",
"icon-alt": "widgets",
text: "Informe",
model: false,
children: [{
icon: "view_module",
text: "Usuarios"
},
{
icon: "view_module",
text: "Perfiles"
},
{
icon: "view_module",
text: "Permisos Perfiles"
},
{
icon: "view_module",
text: "Resetear Password"
},
{
icon: "view_module",
text: "Cambiar Password"
}
]
},
{
heading: "APSI"
},
{
icon: "view_module",
text: "Informes del APSI"
},
{
heading: "Administaciones"
},
{
icon: "extension",
"icon-alt": "extension",
text: "Administración",
model: false,
children: [{
icon: "face",
text: "Usuarios"
},
{
icon: "assignment_ind",
text: "Perfiles"
},
{
icon: "settings",
text: "Permisos Perfiles"
},
{
icon: "cached",
text: "Resetear Password"
},
{
icon: "fingerprint",
text: "Cambiar Password"
}
]
},
{
heading: "Mantenimientos"
},
{
icon: "build",
"icon-alt": "build",
text: "Mantenimiento",
model: true,
children: [{
icon: "group_work",
text: "Departamentos"
},
{
icon: "room",
text: "Locales"
},
{
icon: "donut_large",
text: "Unidades de Medida"
},
{
icon: "spellcheck",
text: "Articulos"
},
{
icon: "toc",
text: "Categorías"
},
{
icon: "supervisor_account",
text: "Usuario Aprobador"
}
]
}
];
export default Menu;
I use it to create the menu of my system that I am developing with VueJS + Vuetify and I need to filter it through the "text" field by words that contain it regardless of position, in the style of SQL's like '%filter%', also without distinguish upper and lower case. As far as possible don't distinguish accents (but this is already very picky, if it is not possible or it is very cumbersome, I can skip it).
Also in the case that the pattern of coincidence is in a child node and not in the father, does this father also have to appear in the filter, is it possible to do this with a Javascript function?
The menu looks like this:
I expect this behavior

I am not sure but if you want to get text fields of children, I think something like that should do it. You just need to initialize all your parents with empty children arrays:
tempArr = Menu.filter(function (elem) {
return elem.children == null ;
});
textFields = tempArr.map(({ text }) => text)

Here is how you can filter match regular expression in an array.
var arr = [{
icon: "add",
text: "Cargar Pedidos",
url: {
name: "cargarpedidos"
}
},
{
icon: "playlist_add_check",
text: "Aprobar Pedidos"
},
{
icon: "content_copy",
text: "Remitir Pedidos"
},
{
icon: "content_copy",
text: "Remitir Pedisddos"
},
{
icon: "content_copy",
text: "Remitir Pediados"
},
{
icon: "content_copy",
text: "Remitir asdaasd"
}
];
var name = "dido";
var regex = "/" + name + "/g";
var filtered = arr.filter(
(val) => val.text.match(name)
);
console.log(filtered);
These are the basics of filtering. If you want to search for any property in an array object than use this function:
var result = Menu.filter(function(o) {
return Object.keys(o).some(function(k) {
return o[k].toString().toLowerCase().indexOf('dido') != -1;
})
})
console.log(result)

How to read values from multiselector component

I am trying to use multiselector from EXTJS 6.5.2
This is the code that I am using to create multiselector with the values that I need
{
xtype: 'multiselector',
title: 'I caktohet:',
name: 'Caktohen[]',
bind: '{userfullname.value}',
fieldName: 'userfullname',
viewConfig: {
deferEmptyText: false,
emptyText: 'Askush i zgjedhur'
},
search: {
field: 'userfullname',
model: 'InTenders.model.UserModel',
store: {
type: 'users',
sorters: 'userfullname',
// proxy: {
// type: 'rest',
// limitParam: null,
// url: 'api/User'
// }
}
}
}
When I call form = win.down('form') records I can get all values except the multiselector values, they show like this on console.
Anyone can help me or guide me how to get the values?
Thank you.
//Code that I'm trying to get multiselector items and save them
saveTenderForm: function (button, e, eOpts) {
var userMultiSelector = Ext.getCmp('AssignedUsers'); //save assigned users
var selectedUsers = userMultiSelector.getStore().getData(); //get store and put them in array
var me = this,
win = button.up('window'),
form = win.down('form'),
// formApplyUpload = this.getFormApplyUpload(),
// var ko = win.items.items[0].items.items[0].value;
recordtenderUsers = Ext.create('InTenders.model.TenderSaveModel');
// recordtenderUsers = form.getRecord();
// record = form.getRecord(),
values = form.getValues();
// appFile = this.getApplicationFile(),
// callbacks;
recordtenderUsers.set(values);
recordtenderUsers.set('tenderUsers',selectedUsers.items);
// // me.showMask();
// if (form.isValid()) {
recordtenderUsers.save({
success: function (recordtenderUsers, operation) {
win.close();
me.hideMask();
},
failure: function (recordtenderUsers, operation) {
me.hideMask();
}
});

You can get value using multiselector.down('grid') this will return you the grid. And grid have method getSelection().
In this FIDDLE, I have created a demo. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'form',
renderTo: Ext.getBody(),
items: [{
xtype: 'multiselector',
title: 'Multi selector example',
fieldName: 'text',
viewConfig: {
deferEmptyText: false,
emptyText: 'No value selected'
},
search: {
field: 'text',
store: {
fields: [{
name: 'text',
type: 'string'
}],
data: [{
text: 'ABC'
}, {
text: 'ABC 1'
}, {
text: 'ABC 2 '
}, {
text: 'ABC 3'
}, {
text: 'ABC 4'
}]
}
}
}, {
xtype: 'button',
text: 'Get Value',
margin:15,
handler: function (btn) {
var multiselector = btn.up('form').down('multiselector');
if (multiselector.down('grid')) {
multiselector.down('grid').getSelection().forEach(rec => {
console.log(rec.get('text'));
});
}
}
}]
});
}
});

Setting an extjs 6 combobox's store data at runtime results in display error

I've got a prototype of a combo box where I'm trying to set the store data at runtime.
When I try to do this, the menu under the combobox doesn't render (or it renders so small you can't actually see it). It's here on sencha fiddle:
Ext.define('ComboBoxRates',{
extend: 'Ext.data.Store',
alias: 'store.rates',
storeId: 'ratescombo',
fields: ['rate', 'description', 'price' ]
});
Ext.define('ComboPanel',{
extend: 'Ext.panel.Panel',
title: 'Test',
renderTo: Ext.getBody(),
items:[
{
xtype: 'combobox',
editable: false,
displayField: 'description',
valueField: 'price',
}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
var data = [
{
description: "$105: Standard Registration",
price: "105",
rate: "rate1"
},
{
description: "$125: Non-Member Rate",
price: "125",
rate: "rate2"
},
{
description: "$44: Price for SK tester",
price: "44",
rate: "rate3"
},
{
description: "$11: Another price :O",
price: "11",
rate: "rate5"
}
];
var rates = Ext.create('ComboBoxRates');
rates.setData(data);
// Showing data is loaded into the store
console.group('directly from store instance');
rates.each(function (rate){
console.log(rate.getData());
});
console.groupEnd();
var panel = Ext.create('ComboPanel');
panel.down('combobox').setStore(rates);
// Showing that the data is definitely in the widget's store
console.group('from widget store');
panel.down('combobox').getStore().each(function (rate){
console.log(rate.getData());
});
console.groupEnd();
}
});
I know the data is loaded into the combobox's store (open the console log in the fiddle) so I'm not sure why it's not rendering correctly.
I know this seems silly in this context, but the prototype is logic extracted out of a grid's widget column where each row has different store data.
I also built a one-step-back prototype with the same structure but the same data is inlined in the store's definition and that works:
Ext.define('ComboBoxRates',{
extend: 'Ext.data.Store',
alias: 'store.rates',
storeId: 'ratescombo',
fields: ['rate', 'description', 'price' ],
data: [
{
description: "$105: Standard Registration",
price: "105",
rate: "rate1"
},
{
description: "$125: Non-Member Rate",
price: "125",
rate: "rate2"
},
{
description: "$44: Price for SK tester",
price: "44",
rate: "rate3"
},
{
description: "$11: Another price :O",
price: "11",
rate: "rate5"
}
]
});
Ext.define('ComboPanel',{
extend: 'Ext.panel.Panel',
title: 'Test',
renderTo: Ext.getBody(),
items:[
{
xtype: 'combobox',
editable: false,
displayField: 'description',
valueField: 'price',
}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
var rates = Ext.create('ComboBoxRates');
var panel = Ext.create('ComboPanel');
panel.down('combobox').setStore(rates);
}
});
I thought an updateLayout would resolve the issue but it doesn't.
Is there something wrong with my code? Is there some way of setting a combobox's values at runtime?

You are missing queryMode, use queryMode: 'local' in the combo.
Working example: https://fiddle.sencha.com/#fiddle/10al

How to set value for input 'textfield' with JavaScript

i have a method in my openDB.js logic class:
getUserByUsername: function(username) {
return this.getUsers(username).then(function(users) {
return users[ username ];
});
},
i'm getting there user with a lot of properties/values.
i have a extjs input 'textfield', and i want to get in 'value' of textfield some user information.
i know that all follow parameters has values (it is codesnippet from openDB.js CreateUser function):
.addParameter("DEPARTMENT", user.department)
.addParameter("FAX", user.fax)
.addParameter("FIRSTNAME", user.firstName)
.addParameter("FUNCTION", user["function"])
.addParameter("LASTNAME", user.lastName)
.addParameter("LOCATION", user.location)
.addParameter("MAIL", user.mail)
.addParameter("MOBILE", user.mobile)
.addParameter("PASSWORD", user.password)
i know it because its possible to check it with setTitle like this:
openDB.getUserByUsername(user.username).then(function(userDetails)
{
debugger;
me.setTitle("Welcome " + userDetails.department + "!");
});
its works fine with all properties.
but how to do it with 'textfield' value ????
items: [{
xtype: "form",
bodyPadding: 5,
border: false,
defaults: {
xtype: "textfield",
inputType: "text",
anchor: "100%"
},
items: [{
fieldLabel: 'Firstname:',
id: 'firstName',
readOnly: true,
value: user.firstName,
name: "username"
}, {
fieldLabel: 'E-Mail:',
id: 'email',
value: 'user.email',
name: "email"
}, {

Use the getValue method on the field.
var f = new Ext.form.field.Text({
renderTo: document.body,
value: 'foo'
});
console.log(f.getValue());

after couple hours of Fitign with that -> BEST SOLUTION EVER:
items: [{
fieldLabel: 'Firstname:',
id: 'firstName',
readOnly: true,
value: user.firstName,
name: "username"
}]
...
var name = Ext.getCmp('firstName').setValue('JohnRambo');