Related
I have cart and products global variable.
Products can have multiple attributes.
Here is a code
var products = [
{
name: 'Table',
price: 200,
attributes: [
{
name: 'Height',
type: 'text',
default_value: '',
},
{
name: 'Width',
type: 'text',
default_value: '',
}
],
},
{
name: 'Chair',
price: 150,
attributes: [
{
name: 'Height',
type: 'text',
default_value: '',
},
{
name: 'Width',
type: 'text',
default_value: '',
},
{
name: 'Company',
type: 'text',
default_value: ''
}
],
}
];
var cart = {
products: [],
};
//console.log('Initial cart',cart);
//add product to cart
let p = Object.assign({},products[0]);
cart.products.push(p);
//console.log('First cart', cart);
//change price
cart.products[0].price = 20;
//console.log('products',products);
//console.log('second cart',cart);
//change attribute of product
cart.products[0].attributes[0].value = 5;
This code changes global products value attributes instead of cart attributes.
Please help me to solve this issue.
From MDN
Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.
And as products[0] is an object in your data that's why you are facing this shallow copy issue
Instead you can use
let p = JSON.parse(JSON.stringify(products[0]));
var products = [{
name: 'Table',
price: 200,
attributes: [{
name: 'Height',
type: 'text',
default_value: '',
},
{
name: 'Width',
type: 'text',
default_value: '',
}
],
},
{
name: 'Chair',
price: 150,
attributes: [{
name: 'Height',
type: 'text',
default_value: '',
},
{
name: 'Width',
type: 'text',
default_value: '',
},
{
name: 'Company',
type: 'text',
default_value: ''
}
],
}
];
var cart = {
products: [],
};
//console.log('Initial cart',cart);
//add product to cart
let p = JSON.parse(JSON.stringify(products[0]));
cart.products.push(p);
//console.log('First cart', cart);
//change price
cart.products[0].price = 20;
console.log('products',products);
console.log('second cart',cart);
You create only shallow copy with Object.assign, which leads to accessing the same objects in a memory through copied reference.
If I need to modify object that is passed by reference or is global and I dont want to mutate it for all other functions/parts of the code, I use this: https://lodash.com/docs/4.17.10#cloneDeep
let p = _.cloneDeep(products[0]);
I am trying to add an icon(a lock) based on whether a value is true or false in a JSGrid.
I have a variable called SoftLock, and if this is true I want to insert a lock icon on the grid.
I have the following fields but am unsure about how to continue:
var fields = [
{ name: 'ID', type: 'text', visible: false },
//THIS FIELD BELOW
{ name: 'SoftLock', type: 'text', title: 'Locked', formatter : function () {return "<span class='fa fa-lock'><i class='fa fa-lock' aria-hidden='true'></i></span>"} },
//THIS FIELD ABOVE
{ name: 'Status', type: 'select', items: MatterStatusEnum.List, valueField: 'Id', textField: 'Name', width: 70, title: 'Account Status' },
{ name: 'AttorneyRef', type: 'text', title: 'Reference' },
{ name: 'Investors', type: 'text', title: 'Investor/s' },
{ name: 'AccountNumber', type: 'text', width: 70, title: 'Account Number' },
{ name: 'IntermediaryName', type: 'text', title: 'Intermediary Name' },
{ name: 'CreatedBy', type: 'text', title: 'Captured By' },
{ name: 'RequestedDate', type: 'date', title: 'Requested Date'}
];
I have used the formatter with no luck. Also, how can I show an icon if true, and nothing if false.
Any help would be appreciated.
I solved this by using the itemTemplate as follows:
{
name: 'SoftLock', type: 'text', title: 'Locked', width: 30,
itemTemplate : function (value, item) {
var iconClass = "";
if (value == true) {
iconClass = "fa fa-lock"; //this is my class with an icon
}
return $("<span>").attr("class", iconClass);
}
Simple as that :)
Much later but try the following
{
type: "control",
editButton: true
}
Also the answer is better described in the formal documentation.
http://js-grid.com/docs/#control
I'm trying to create a grid (Ext.grid.Panel) and fill it with data. But something is going wrong so the grid shows empty rows without data.
Model is:
Ext.define('Order', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'int'
},
{
id: 'companyId',
type: 'int'
},
{
id: 'amount',
type: 'int'
},
{
id: 'dealDate',
type: 'date'
},
{
id: 'complete',
type: 'int' //boolean imitation
}
],
idProperty: 'id'
});
Grid & Store code is:
var orders = Ext.create('Ext.data.Store', {
model: 'Order',
proxy: Ext.create('Ext.data.proxy.Ajax', {
url: 'service/orders-data.php?',
reader: Ext.create('Ext.data.reader.Json', {
root: 'orders'
})
}),
sorters: [{
property: 'name',
direction: 'ASC'
}]
});
orders.load();
var ordersGrid = Ext.create('Ext.grid.Panel', {
width: 400,
height: 300,
store: orders,
columns: [
{
text: 'Amount',
dataIndex: 'amount',
width: 120
},
{
text: 'Deal date',
dataIndex: 'dealDate',
width: 120
},
{
text: 'Complete',
dataIndex: 'complete',
width: 120
}
]
});
JSON-response from server is:
{
"orders":[
{
"id":1,
"amount":5000,
"dealDate":"2012-01-05",
"complete":0
},
{
"id":2,
"amount":6850,
"dealDate":"2012-01-07",
"complete":0
},
{
"id":5,
"amount":7400,
"dealDate":"2012-01-09",
"complete":0
}
]
}
Why does the grid display empty rows?
All your model's fields but the first are being declared with 'id' properties where they should instead be using 'name':
{
name: 'id',
type: 'int'
},
{
name: 'companyId',
type: 'int'
},
{
name: 'amount',
type: 'int'
},
{
name: 'dealDate',
type: 'date'
},
{
name: 'complete',
type: 'int' //boolean imitation
}
I am using Sencha Touch to display nested (associated) model data in a list template but I can only get the root model data to display. My models are an Appointment which belongs to a Customer, and Customers have many Appointments. My model code:
Customer = Ext.regModel('Customer', {
hasMany: { model: 'Appointments', name: 'appointments' },
fields: [
{ name: 'id', type: 'integer' },
{ name: 'firstName', type: 'string' },
{ name: 'lastName', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'secondary_email', type: 'string' },
{ name: 'homePhone', type: 'string' },
{ name: 'mobilePhone', type: 'string' },
{ name: 'dob', type: 'date', dateFormat: 'Y-m-d' },
{ name: 'allowLogin', type: 'boolean' },
{ name: 'emailReminders', type: 'boolean' },
{ name: 'reminders_to_stylist', type: 'boolean' },
{ name: 'fullName',
convert: function(value, record) {
var fn = record.get('firstName');
var ln = record.get('lastName');
return fn + " " + ln;
} }
]
});
Appointment = Ext.regModel('Appointment', {
belongsTo: { model: 'Customer', name: 'customer' },
fields: [
{ name: 'id', type: 'string' },
{ name: 'startTime', type: 'date', dateFormat: 'c' },
{ name: 'customer_id', type: 'integer' },
{ name: 'startTimeShort',
convert: function(value, record) {
return record.get('startTime').shortTime();
}
},
{ name: 'endTimeShort',
convert: function(value, record) {
return record.get('endTime').shortTime();
}
},
{ name: 'endTime', type: 'date', dateFormat: 'c' }
]
});
And my panel using an xtype: list looks like:
var jsonPanel = {
title: "Appointments",
items: [
{
xtype: 'list',
store: appointmentStore,
itemTpl: '<tpl for="."><span id="{id}">{startTimeShort} - {endTimeShort} <tpl for="customer"><span class="customer">{firstName}</span></tpl></span></tpl>',
singleSelect: true,
onItemDisclosure: function(record, btn, index) {
Ext.Msg.alert('test');
}
}
]
};
The nested data gets loaded from JSON and appears to be loading correctly into the store - when I debug the appointment store object loaded from the Appointment model, I see that the appointment.data.items array objects have a CustomerBelongsToInstance object and that object's data object does contain the correct model data. The startTime and endTime fields display correctly in the list.
I have a suspicion that I am either not using the item template markup correctly, or perhaps there is some weird dependency where I would have to start from the model that has the "has many" association rather than the "belongs to" as shown in the kitchen sink demo.
I wasn't able to find any examples that used this type of association so any help is appreciated.
Looks like your Customer hasmany association is assigning Appointments when it should be appointment which is the name of that model.
The Store
var timesheet = new Ext.data.JsonStore(
{
root: 'timesheetEntries',
url: 'php/scripts/timecardEntry.script.php',
storeId: 'timesheet',
autoLoad: true,
fields: [
{ name: 'id', type: 'integer' },
{ name: 'user_id', type: 'integer' },
{ name: 'ticket_number', type: 'integer' },
{ name: 'description', type: 'string' },
{ name: 'start_time', type: 'string' },
{ name: 'stop_time', type: 'string' },
{ name: 'client_id', type: 'integer' },
{ name: 'is_billable', type: 'integer' }
]
}
);
A section of my GridPanel code:
columns: [
{
id: 'ticket_number',
header: 'Ticket #',
dataIndex: 'ticket_number'
},
{
id: 'description',
header: 'Description',
dataIndex: 'description'
},
{
id: 'start_time',
header: 'Start',
dataIndex: 'start_time',
renderer: Ext.util.Format.dateRenderer('m/d/Y H:i:s')
}
...
From the server, I receive this JSON string:
{
timesheetEntries:[
{
"id":"1",
"user_id":"1",
"description":null,
"start_time":"2010-11-13 11:30:00",
"stop_time":"2010-11-13 15:50:10",
"client_id":null,
"is_billable":"0"
}
My grid panel renders fine. However, my start and stop time columns read 'NaN/NaN/NaN NaN:NaN:NaN' and I don't know why.
If your data has "2010-11-13 11:30:00" shouldn't your format be 'Y-m-d H:i:s'?
EDIT: Sorry, the grid config should be OK -- I was referring to the dateFormat value in your store's field definition, which should be 'Y-m-d H:i:s' so that your incoming data can be properly mapped to your column model. You should also include type: 'date'. You're not showing your store config, but the problem is likely one of those things being wrong.
Try this
function renderDate(v,params,record)
{
var dt = new Date(v);
if (!isNaN(dt.getDay())) {
return dt.format('d/m/Y');
}
return '-';
}
A very simple way to do it:
return Ext.util.Format.date(val,'m/d/Y');