We Keep Coding

Passing 2 fields to key in headers, react-csv

Related to the existing question. How to assign two fields data in header of react-csv. I am working on something and came across the same issue. Asking again since there is no correct answer given. The following code for headers. - key: "user.firstname + user.lastname" doesn't work and the fields are empty. Please help how to get this working! TIA!!
Code:
headers = [
{
label: "id",
key: "user.id"
},
{
label: "Agent Name",
key: "user.firstName + user.lastName"
},
{
label: "Agent Email",
key: "user.email"
},
{
label: "Agent Phone",
key: "user.phoneNumber"
},
{
label: "Agent Commission",
key: "agentComission"
},
{
label: "Company Commission",
key: "companyComission"
},
{
label: "Total Sale",
key: "sale"
}
];
Data format example :
data = [
{
id: 1,
firstnamename: "name ",
lastname: "lastname",
email: "test#gmail.com",
phoneNumber: 123456789,
agentComission: 'agent comission',
companyComission: 'company comission',
sale: 'sale',
},
{
id: 2,
firstnamename: "name",
lastname: "lastname,
email: "test2#gmail.com",
phoneNumber: 123456789,
agentComission: 'agent comission 2',
companyComission: 'company comission 2',
sale: 'sale 2',
},
];

Ext JS - best way to bind Panel to data Store

I'm new to Ext JS and have noticed two ways in which a grid / tree can bind to a data source (Store):
Ext.data.StoreManager.lookup('someStoreId');
Ext.getStore('someStoreId');
Is Ext.getStore just some shorthand for StoreManager.lookup? Is there a performance difference between the two or would it be considered best practice to use one over the other?

Yes they are the same thing, it doesn't matter which one you call, getStore is for typing convenience and it calls StoreManager.
http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext-method-getStore
Shortcut to Ext.data.StoreManager.lookup.
And they are both horrible ideas. You are basically creating global variables. You should prefer passing references to stores you create instead.
Take their grid example:
Ext.create('Ext.data.Store', {
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' }
]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
It can be rewritten so that the store is not globally reachable, since the store manager is a global singleton.
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' }
]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

Sencha touch Selectfield picker not showing correct selection

Store of the selectfield contains same word with different case like Ed & ed.When we select ed,In the picker it is showing Ed.
Code:
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
displayField:'firstName',
valueField:'firstName',
store:Ext.create("Ext.data.Store", {
fields: [
{name: 'firstName', type: 'string'},
],
data : [
{firstName: "Ed"},
{firstName: "ed"},
{firstName: "Tommy"},
{firstName: "Aaron"},
{firstName: "Jamie"}
]
})
}
]
}
]
});
Fiddle for the problem

In Sencha, the selectfield is somethings whose value doesn't distinguish between the caps and small letter. So, it has provided valuefield. If you create your store like this below, you will get the expected result:
store: Ext.create("Ext.data.Store", {
fields: [{
name: 'firstName',
type: 'string'
}, {
name: 'value',
type: 'string'
}],
data: [{
firstName: "Ed",
value: 'edCaps'
}, {
firstName: "ed",
value: 'edSmall'
}, {
firstName: "Tommy",
value: 'tommy'
}, {
firstName: "Aaron",
value: 'aaron'
}, {
firstName: "Jamie",
value: 'jamie'
}]
})
Here is fiddle also. Happy coding! :)

Retrieve from the store for time and set it to minvalue

var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Lisa', phone: '555-111-1224', timecallval: '08:10' },
{ name: 'Bart', phone: '555-222-1234', timecallval: '09:54' },
{ name: 'Homer', phone: '555-222-1244', timecallval: '20:00' },
{ name: 'Marge', phone: '555-222-1254', timecallval: '08:11' }
]
});
var panel = Ext.create('Ext.form.Panel', {
items: [
{
xtype: 'timefield',
name: 'timecall',
id: 'timecall',
minvalue: '08:00'
// 08:00 to be changed to timecall value dynamically
}
}
I have searched for quite awhile but i don't seem to be able to set minvalue as the value retrieved from store. The problem is I want timefield to display 08:10, 09:54, 20:00 and 08:11 for selection. Any helpers?

Found the answer
Ext.getCmp('reserveEndTime').setMaxValue(selectrow.get('timecall'));

Sencha touch get data from json

Recently I try to get data from json file with using sencha touch but its showing 0 result, Please refer below coding and tell me about my mistake,
Thanks,
app.js
Ext.application({
name: 'TP',
views: [
'Main'
],
models: [
'User'
],
stores: [
'Users'
],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('TP.view.Main'));
var user = Ext.create('TP.model.User', {
name: 'James Henry',
age: 24,
phone: '555-555-5555',
username: 'Admin'
});
Ext.getStore('Users').on('load', this.onStoreLoad, this);
console.log(Ext.getStore('Users'));
},
onStoreLoad: function(self, records, success, operation){
console.log(self);
}
});
Model :: User.js
Ext.define('TP.model.User',{
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'},
{name: 'gender', type: 'string'},
{name: 'username', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true}
],
validations: [
{type: 'presence', field: 'age'},
{type: 'length', field: 'name', min: 2},
{type: 'inclusion', field: 'gender', list: ['Male', 'Female']},
{type: 'exclusion', field: 'username', list: ['Admin', 'Operator']},
{type: 'format', field: 'username', matcher: /^[A-Za-z0-9 _]*$/ }
],
},
ageString: function(){
var age = this.get('age');
if(age > 1) {
return age + " yesrs old";
}else{
return age = " Yes old";
}
}
});
Store :: Users.js
Ext.define('TP.store.Users', {
extend: 'Ext.data.Store',
config: {
model: 'TP.model.User',
autoload: true,
proxy: {
type: 'ajax',
url: 'http://localhost/sencha/SenchaStarter/data/users.json',
reader: {
rootProperty: 'users',
type: 'json'
}
}
}
});
JSON file users.json
{
"users": [
{
"name": "Mike Henderson",
"age": 24,
"phone": "555-555-555",
"gender": "Male",
"username": "mhenderson",
"alive": true
},
{
"name": "Sally Michael",
"age": 34,
"phone": "555-555-555",
"gender": "Female",
"username": "sallym",
"alive": true
},
{
"name": "Rory Muldoon",
"age": 19,
"phone": "555-555-555",
"gender": "Male",
"username": "greatscott",
"alive": true
}
]
}

The store isn't loading because you haven't loaded it yet. The reason is a typo as you wrote this config option in your store:
autoload
when it needs to be:
autoLoad

The proxy of your store is set to ajax. It won't save the records. I believe that you will only have access to the records in the onStoreLoad in app.js.
You could perhaps(now this is just a theory) set the ajax proxy in your model(this I am sure that you can do and is recommended by sencha because you can then override this proxy with the store proxy when needed http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/) then save the records in the store, because i believe that a store proxy type by default is localstorage.
Good luck :)