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()
});
Related
I have a grid that when is clicked change the property cellwrap from false to true
onCellClick: function(view, td, index, record, tr, rindex) {
var
me = this,
vm = me.getViewModel(),
field = me.lookupReference('descriptionField');
field.cellWrap = true;
field.getView().getStore().getSource().reload();
}
But i guess im making it wrong. Can i reload the grid with the cellwrap propertie change? Im using the v7.5.1.20
cellWrap is a configuration of an Ext.grid.column.Column. You can't simply change it after the grid is rendered, you need to use the reconfigure method of Ext.grid.Panel to update the columns and set cellWrap to true.
You can try this code in a Sencha Fiddle (ExtJS 7.4.0 modern material), click anywhere and see how the top left cell is changing:
Ext.application({
name: 'Fiddle',
launch: function () {
const store = new Ext.data.Store({
fields: ['name', 'phone'],
data: [{
name: 'Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1',
phone: 111
}, {
name: 'Name2',
phone: 222
}, {
name: 'Name3',
phone: 333
}, {
name: 'Name4',
phone: 444
}, {
name: 'Name5',
phone: 555
}]
})
const myGrid = Ext.create({
renderTo: Ext.getBody(),
xtype: 'grid',
store: store,
selModel: 'cellmodel',
columns: [{
text: 'Name',
dataIndex: 'name',
cellWrap: false
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
cellclick: function (table, td, cellIndex, record, tr, rowIndex, e, eOpts) {
myGrid.reconfigure(null, [{
text: 'Name',
dataIndex: 'name',
cellWrap: true
}, {
text: 'Phone',
dataIndex: 'phone'
}]);
}
}
});
}
});
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',
},
];
I am loading this data from my store. Can anybody please explain me how to load data dynamically. By using Ajax.
My COde
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: 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()
});
Now data I will put in some json file. MY question is how to fetch JSON data in extJS grid store. How to rewrite the STore code
You need to configure the Ext.data.Store to use an Ext.data.proxy.Proxy to load data from the server.
Ext.data.proxy.Ajax - sends requests to a server on the same domain
Ext.data.proxy.JsonP - uses JSON-P to send requests to a server on a
different domain
Ext.data.proxy.Rest - uses RESTful HTTP methods
(GET/PUT/POST/DELETE) to communicate with server Ext.data.proxy.Direct
- uses Ext.direct.Manager to send requests
docs: https://docs.sencha.com/extjs/6.2.0/classic/Ext.data.proxy.Proxy.html
code sample: http://docs.sencha.com/extjs/6.0.2/classic/Ext.data.proxy.Ajax.html
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! :)
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'));