We Keep Coding

Get date from store and compare to todays date

I have a store in sencha, in the store I have 2 date fields, start_date and end_date, I want to get this data from my store, and compare it to the current day, then if the end_date from the store matches todays date, I need to output an ext.toast message, that shows the respective data. This is based on licenses and their start and end dates.
I just need to know how I would set this up, ultimately I want it in the launch function, so it launches on first startup
this is my store
Ext.define('ClientInfo.store.LicenseAllStore', {
extend: 'Ext.data.Store',
requires: [
'ClientInfo.model.LicenseAllModel',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'LicenseAllStore',
autoLoad: true,
model: 'ClientInfo.model.LicenseAllModel',
proxy: {
type: 'ajax',
extraParams: {
class: 'LicenseAll',
method: 'get'
},
url: 'system/index.php',
reader: {
type: 'json',
rootProperty: 'topics'
}
}
}, cfg)]);
}
});
and this is my model
Ext.define('ClientInfo.model.LicenseAllModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.Field'
],
fields: [
{
name: 'license_id'
},
{
name: 'license_number'
},
{
name: 'start_date'
},
{
name: 'end_date'
},
{
name: 'duration'
},
{
name: 'expiry_date'
},
{
name: 'product_id'
},
{
name: 'product_name'
},
{
name: 'version'
},
{
name: 'company_id'
},
{
name: 'name'
},
{
name: 'physical_address'
},
{
name: 'postal_address'
},
{
name: 'people_id'
},
{
name: 'firstname'
},
{
name: 'lastname'
},
{
name: 'occupation'
},
{
name: 'office_number'
},
{
name: 'cell_number'
},
{
name: 'email'
},
{
name: 'harware_id'
},
{
name: 'server_url'
},
{
name: 'ip_address'
},
{
name: 'mac_address'
},
{
name: 'os_id'
},
{
name: 'os_name'
},
{
name: 'os_version'
},
{
name: 'os_build'
}
]
});
So far I have this in the launch function
var start = Ext.getCmp('overviewGrid').store.data.start_date;
var end = Ext.getCmp('overviewGrid').store.data.end_date;
var today = new Date();
if(end.setHours(0,0,0,0) == today.setHours(0,0,0,0));
{
Ext.toast({
html: 'Expiring Licenses',
title: 'Licenses',
width: 200,
align: 't',
autoClose: false
});
}

var allRecords = Ext.getCmp('overviewGrid').store.data;
var today = new Date();
//and loop like this
allRecords.each( function(record){
var start = record.data.start_date;
var end = record.data.end_date;
if(Ext.Date.format(end, 'Y-m-d') == Ext.Date.format(today, 'Y-m-d'));
{
Ext.toast({
html: 'Expiring Licenses',
title: 'Licenses',
width: 200,
align: 't',
autoClose: false
});
}
});

EXT JS 5.1 - Client side pagination on grid is not working

I am using EXT JS 5.1, in my application there is a grid panel which gets data from the grails server. I need the data to be paginated from client side i.e. all the data from the server should be retrieved at once and on click of "next" or "prev", it should not go to the server again to fetch the data. Instead it should get the local data. Is there any way to achieve this.
I had tried with two stores. One store gets the data from the server which has the proxy of AJAX and the other store which has the proxy as MEMORY which is assigned to the grid.
Data from AJAX proxy store is copied to the Memory proxy store and Memory proxy store is assigned to the grid so that every time the server is not hit.
To load the data, I am using loadRawData. But this is disrupting the pagingtoolbar configurations. I tried overriding the loadRawData to reset the configuration of the store but still the paging toolbar is not showing proper results.
Below is the code:
Ext.define('MVC.model.WorkOrderStatic', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Selected', type: 'boolean' },
{ name: 'workOrderBatchId', type: 'string' },
{ name: 'territory', type: 'string' },
{ name: 'apo', type: 'string' },
{ name: 'eventRefId', type: 'string' },
{ name: 'product', type: 'string' },
{ name: 'Received', type: 'string' },
{ name: 'DueDate', type: 'string' },
{ name: 'priority', type: 'string' },
{ name: 'AssignedTo', type: 'string' },
{ name: 'Ready', type: 'boolean' },
{ name: 'InProgress', type: 'boolean' },
{ name: 'partial', type: 'boolean' },
{ name: 'Complete', type: 'boolean' },
{ name: 'hold', type: 'boolean' },
{ name: 'account', type: 'string' },
{ name: 'id', type: 'string' }
],
idProperty: 'id'
});
Ext.define('MVC.model.WorkOrder', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Selected', type: 'boolean' },
{ name: 'workOrderBatchId', type: 'string' },
{ name: 'territory', type: 'string' },
{ name: 'apo', type: 'string' },
{ name: 'eventRefId', type: 'string' },
{ name: 'product', type: 'string' },
{ name: 'Received', type: 'string' },
{ name: 'DueDate', type: 'string' },
{ name: 'priority', type: 'string' },
{ name: 'AssignedTo', type: 'string' },
{ name: 'Ready', type: 'boolean' },
{ name: 'InProgress', type: 'boolean' },
{ name: 'partial', type: 'boolean' },
{ name: 'Complete', type: 'boolean' },
{ name: 'hold', type: 'boolean' },
{ name: 'account', type: 'string' },
{ name: 'id', type: 'string' }
],
idProperty: 'id'
});
var datar = '';
var jsonDataEncode= '';
var workOrderData = '';
//var workOrderStore = Ext.data.StoreManager.lookup('WorkOrder');
var workOrderStaticStore = Ext.create('Ext.data.Store', {
requires : [
'MVC.model.WorkOrderStatic',
],
storeId: 'workOrderStatic',
model : 'MVC.model.WorkOrderStatic',
pageSize : 4,
//buffered: true,
//autoLoad: false,
//autoLoad: true,
//data: workOrderData,
//data:[],
autoLoad: {params: {start: 0, limit: 40}},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'workOrders'
},
enablePaging : true
}/*,
listeners:{
beforeload: function(store, operation, options){
alert("In before load of workOrderStatic");
console.log("In before load of workOrderStatic");
console.log(workOrderData);
}//End of beforeLoad listener
}*/
});//end of workOrderStatic store
var grid = Ext.create('Ext.grid.Panel', {
alias: 'app.gridPanelAlias',
//extend : 'Ext.grid.Panel',
xtype : 'WorkOrderView',
title : 'Work Order Batches',
//store : 'WorkOrder',
//store: 'WorkOrderStatic',
//store: Ext.data.StoreManager.lookup('workOrderStatic'),
//bind: '{workOrderStatic}',
store : workOrderStaticStore,
multiSelect: true,
requires: ['Ext.ux.CheckColumn',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
// 'Ext.ModelManager',
],
loadMask: true,
columns: [
{text:"id",width: 15,dataIndex: 'id', sortable: true},
{text: "Work Order Batch", width: 55, dataIndex: 'workOrderBatchId', sortable: true},
{text: "Territory", width: 35, dataIndex: 'territory', sortable: true}
],
listeners: {
render: function(){
alert("In render of grid");
}
},
dockedItems:
[
{ xtype: 'pagingtoolbar',
dock: 'bottom',
displayMsg: '{0} - {1} of {2}',
emptyMsg: 'No data to display',
store: workOrderStaticStore,
//store: 'woStatic',
//store: Ext.StoreMgr.lookup('WorkOrderStatic'),
displayInfo: true
}
],
forceFit: true,
height:210,
split: true,
region: 'north'
});
var workOrderStore = Ext.create('Ext.data.Store', {
requires : [
'MVC.model.WorkOrder'
],
storeId : 'WorkOrder',
model : 'MVC.model.WorkOrder',
pageSize : 6,
//buffered: true,
remoteSort: false,
//autoload: false,
autoLoad: false,
proxy: {
type: 'ajax',
url: '/CommandAndControl/workOrderList/getReadyWorkOrders',
actionMethods :{
read : 'POST'
},
reader: {
type: 'json',
rootProperty: 'workOrders'
}
},
listeners:{
load:function(store, record, success, opts){
var responseText = store.proxy.reader.rawData;
var responseString = Ext.encode(responseText);
}
}
});
workOrderStore.load({
scope : this,
callback: function(records, operation, success) {
datar= new Array();
records1 = workOrderStore.getRange();
console.log("length of records ");
console.log(records1.length);
for (var i = 0; i < records1.length; i++) {
datar.push(records1[i].data);
}//End of for loop
jsonDataEncode = Ext.util.JSON.encode(datar);
console.log("datar");
console.log(datar);
console.log("jsonDataEncode");
console.log(jsonDataEncode);
var jsonEncodeData= jsonDataEncode.replace(/^"(.*)"$/, '$1');
console.log("replaced json encoded data");
console.log(jsonEncodeData);
var bracket1= "{";
var bracket2= "}";
workOrderData = bracket1.concat("workOrders").concat(":").concat(jsonDataEncode).concat(bracket2);
workOrderData=Ext.JSON.decode(workOrderData);
console.log("data1 data");
console.log(workOrderData);
workOrderStaticStore.loadRawData(workOrderData);
//this.reconfigure(workOrderStaticStore, columns);
//grid.reconfigure(workOrderStaticStore, workOrderData.columns);
/*var result=workOrderStaticStore.proxy.reader.read(workOrderData);
var records=result.records;
workOrderStaticStore.add(records);
workOrderStaticStore.load({add:true,
params:{
start:0,
limit:4
}
});*/
//workOrderStaticStore.loadRawData(workOrderData, true);
//Ext.StoreMgr.lookup('WorkOrderStatic').load();
}//End of call back
});//End of workorderstore
Ext.override(Ext.data.Store, {
loadRawData : function(data, append){
var me = this,
result = me.proxy.reader.read(data),
records = result.records;
if (result.success) {
me.totalCount = result.total;
console.log("total count");
console.log(me.totalCount);
me.loadRecords(records, { addRecords: append });
//me.currentPage = 2;
me.fireEvent('load', me, records, true);
}
}
});
Ext.define("MVC.view.WorkCenterPanel",{
extend: "Ext.panel.Panel",
alias: 'widget.workcenterpanel',
requires : [
'Ext.grid.Panel','MVC.GridPanel','MVC.controller.WorkCenterPanel'
],
requires: 'MVC.view.Device',
items:
[
grid
,
{
xtype: 'devicepanel'
}
]
});
Thanks in advance!!

Extjs5 : ComboBox not showing the selected value

I created a comboBox and when I select a value, no value will be displayed.
Ext.create("Ext.form.field.ComboBox", {
name: el.name,
fieldLabel: el.labelId,
hidden: !(el.visible),
displayField:"value",
valueField:"value",
flex: 1,
store:Ext.create("Ext.data.Store",{
fields: ['key', 'value'],
data: [
{ key: "10",value: "etap 0"},
{ key: "200",value: "etape 1"},
{ key: "300", value: "etape 3"}
]
}),
regex: el.parameterType.regex,
regexText: el.regExErrMsg,
allowBlank: !el.mandatory,
blankText: el.requiredErrMsg
})
EDIT
Here is exactly the method that return combo:
drawField: function (el) {
var me = this;
var uiField = Ext.create(me.componentType, {
name: el.name,
fieldLabel: el.labelId,
hidden: !(el.visible),
flex: 1,
regex: el.parameterType.regex,
regexText: el.regExErrMsg,
allowBlank: !el.mandatory,
blankText: el.requiredErrMsg
});
if (el.parameterType.isCombo) {
uiField.displayField = 'value';
uiField.valueField = 'key';
uiField.editable = false;
uiField.store = Ext.create('Ext.data.Store', {
fields: ['key', 'value'],
data: el.parameterType.values
});
}
return uiField;
}
and el parameter is a JavaScript object like that:
{
name: "",
labelId: "Champ :",
parameterType: {
regEx: "^.*$",
errID: "115",
isCombo: true,
values:[
{key: "10", value: "etap 0"},
{key: "200",value: "etape 1"},
{key: "300",value: "etape 3"},
],
selectedValue: "etap 0"
},
mandatory: false,
visible: true,
defaultValue: "",
elementType: "LIST_BOX",
regExErrMsg: "Valeur invalide.",
requiredErrMsg: ""
}
and me.componentType at runtime is Ext.form.field.ComboBox

This fiddle works fine for me, I removed the references to el as it shown undefined for me and also changed Ext.data.store to Ext.data.Store
https://fiddle.sencha.com/#fiddle/jj6
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create("Ext.form.field.ComboBox", {
renderTo: Ext.getBody(),
displayField: "value",
valueField: "value",
flex: 1,
store: Ext.create("Ext.data.Store", {
fields: ['key', 'value'],
data: [{
key: "10",
value: "etap 0"
}, {
key: "200",
value: "etape 1"
}, {
key: "300",
value: "etape 3"
}]
})
});
}
});

valueField:"value" is wrong, you should specify valueField:"key" in order for ComboBox to work properly

How can I filter an array of objects based on the value of a field and the remap the objects?

I have the following object:
options.getOrderBy = function (type) {
var OrderBy = [
{ type: 'x', id: 0, label: 'xx1', key: 'yy1' },
{ type: 'x', id: 1, label: 'xx2', key: [1,2] },
{ type: 'x', id: 9, label: 'xx2', key: ['a','b'] },
{ type: 'y', id: 0, label: 'xx44', key: 'yya' },
{ type: 'y', id: 1, label: 'xx45', key: 'yyb' },
{ type: 'y', id: 2, label: 'xx46', key: 'yyc' },
];
return OrderBy;
};
What I need is that when the function is called with a type of ('x') then I want it to return something like:
[
{ id: 0, label: 'xx1', key: [1.2] },
{ id: 1, label: 'xx2', key: 'yy2' },
{ id: 9, label: 'xx2', key: ['a','b'] }
]
Can someone explain to me how I can filter an array based on the value of the type field and then just return an array of objects containing id, label and key?
Note that I have _lodash and I would like to use that if it makes it easier. Also my solution would be for browsers greater than IE9

options.getOrderBy = function (type) {
var OrderBy = [
{ type: 'x', id: 0, label: 'xx1', key: 'yy1' },
{ type: 'x', id: 1, label: 'xx2', key: 'yy2' },
{ type: 'y', id: 0, label: 'xx44', key: 'yya' },
{ type: 'y', id: 1, label: 'xx45', key: 'yyb' },
{ type: 'y', id: 2, label: 'xx46', key: 'yyc' },
];
return OrderBy.filter(function(e) {
return e.type === type;
}).map(function(e) {
delete e.type;
return e;
});
};
If you could change the OrderBy structure to an object, it will be much simpler:
options.getOrderBy = function (type) {
var OrderBy = {
x:[
{ id: 0, label: 'xx1', key: 'yy1' },
{ id: 1, label: 'xx2', key: 'yy2' }
],
y:[
{ id: 0, label: 'xx44', key: 'yya' },
{ id: 1, label: 'xx45', key: 'yyb' },
{ id: 2, label: 'xx46', key: 'yyc' }
]
};
return OrderBy[type];
};

My solution exploits Lodash's map and omit functions. See it here
var filter = function(collection, filterKey) {
return _.map(collection, function(elem) {
return _.omit(elem, filterKey);
})
}
Use it as:
var filtered = filter(OrderBy, 'type');
EDIT: taking into consideration also the value for filterKey
var filter = function(collection, filterKey, filterValue) {
return _.compact(_.map(collection, function(elem) {
if(elem[filterKey] === filterValue)
return _.omit(elem, filterKey);
}))
}
Use it as:
var filtered = filter(OrderBy, 'type', 'x');
SECOND EDIT: clearer version
var filterV2 = function(collection, filter) {
return _(collection)
.map(function (elem) { if(elem[filter.key] == filter.value) return _.omit(elem, filter.key) })
.compact()
.value()
}
Use it as:
var filtered = filterV2(OrderBy, { key: 'type', value: 'x' });

You can filter the order options like this:
var newOrderBy = [];
for(var i = 0, l = OrderBy.length; i < l; i++) {
if(OrderBy[i].type == type) {
newOrderBy.push({
id: OrderBy[i].id,
label: OrderBy[i].label,
key: OrderBy[i].key
});
}
}

Using underscore.js _.filter():-
options.getOrderBy = function (type) {
var OrderBy = [
{ type: 'x', id: 0, label: 'xx1', key: 'yy1' },
{ type: 'x', id: 1, label: 'xx2', key: [1,2] },
{ type: 'x', id: 9, label: 'xx2', key: ['a','b'] },
{ type: 'y', id: 0, label: 'xx44', key: 'yya' },
{ type: 'y', id: 1, label: 'xx45', key: 'yyb' },
{ type: 'y', id: 2, label: 'xx46', key: 'yyc' },
];
var filteredOrderBy = _.filter(OrderBy, function (order) {
if (order.type === type) {
return true;
} else return false;
});
return filteredOrderBy ;
};

Extjs store.sync error with multiple instance of same model

I have a problem with store.sync()
I use multiple form (multiple instance of same model in different tab) with the same model/store but with not all the fields of the model.
When i use store.sync the store work, i have the record in my database and the result is success:true !
I load the form :
if(modeleActif == 'UniteDeTemps') {
var form = Ext.getCmp('Form'+modeleActif+'1');
var record = Ext.create('ModuleGestion.model.'+modeleActif);
form.loadRecord(record);
var form = Ext.getCmp('Form'+modeleActif+'2');
var record = Ext.create('ModuleGestion.model.'+modeleActif);
form.loadRecord(record);
var form = Ext.getCmp('Form'+modeleActif+'3');
var record = Ext.create('ModuleGestion.model.'+modeleActif);
form.loadRecord(record);
var form = Ext.getCmp('Form'+modeleActif+'4');
var record = Ext.create('ModuleGestion.model.'+modeleActif);
form.loadRecord(record);
}
My controller action:
if(modeleActif == 'UniteDeTemps') {
modeleUDTActif = Ext.getCmp('TabUniteDeTempsForm').getActiveTab().id;
Type_O_J_S_M = modeleUDTActif.substr(15,modeleActif.length);
var form = Ext.getCmp('Form'+modeleActif+Type_O_J_S_M);
var store = this['get'+modeleActif+'Store']();
record = form.getRecord();
values = form.getValues();
if (form.isValid()) {
record.set(values);
store.add(record);
store.sync({
success: function(batch, options) {
store.load();
},
failure: function(batch, options) {
Ext.Msg.alert("Erreur",batch.proxy.getReader().jsonData.message);
}
});
}
}
My model
Ext.define('ModuleGestion.model.UniteDeTemps', {
extend: 'Ext.data.Model',
idProperty: 'idUniteDeTemps',
fields: [
{
name: 'idUniteDeTemps'
},
{
name: 'UniteDeTemps'
},
{
name: 'Type_O_J_S_M'
},
{
name: 'Type_M'
},
{
name: 'Occurence'
},
{
name: 'RepetitionJ'
},
{
name: 'RepetitionS'
},
{
name: 'Jours'
},
{
name: 'Mois'
},
{
name: 'Quantieme'
},
{
name: 'Numero'
}
]
});
My form:
{
xtype: 'form',
border: false,
id: 'FormUniteDeTemps1',
bodyPadding: 10,
title: '',
items: [
{
xtype: 'textfield',
width: 305,
fieldLabel: 'Nom',
name: 'UniteDeTemps'
},
{
xtype: 'hiddenfield',
fieldLabel: 'Label',
name: 'idUniteDeTemps'
},
{
xtype: 'hiddenfield',
fieldLabel: 'Label',
name: 'Type_O_J_S_M'
},
{
xtype: 'numberfield',
fieldLabel: 'Nombre d\'occurences',
labelWidth: 150,
name: 'Occurence'
}
]
}