We Keep Coding

JavaScript: How to run a function several time with different arguments?

I'm using ExtJS framework and a run one method multiple times with different parameters.
I'm looking a way to make it more consist, easy and maintainable and I guess just vanilla Javascript solutions could handle this?
I've tried to collect each param into array and using Array.map() as well forEach() methods but I couldn't handle it.
Thanks for advance.
//ExtJS class:
Ext.define('MyApp.FooClass', {
extend: 'Ext.panel.Panel',
items: [
MyApp.createFooCard('Func1Param1', 'Func1Param2', 'Func1Param3'),
MyApp.createFooCard('Func2Param1', 'Func2Param2', 'Func2Param3'),
MyApp.createFooCard('Func3Param1', 'Func3Param2', 'Func3Param3'),
]
});
As you'll notice I totaly use same method but different arguments for each of them.
//And here is related factory-function:
createFooCard: (bindValue, userCls, glyph, label) => {
return {
itemId: bindValue,
userCls: userCls,
glyph: MyApp.getGlyph(glyph),
items: {
xtype: 'infocardfld',
fieldLabel: label,
bind: '{' + bindValue + ' || "0"}'
}
}
}

It works with Array.prototype.map to collect nested arrays and relaying those arrays with Spread syntax to run on factory-function. It should be:
Ext.define('MyApp.FooClass', {
extend: 'Ext.panel.Panel',
items: [
['Func1Param1', 'Func1Param2', 'Func1Param3'],
['Func2Param1', 'Func2Param2', 'Func2Param3'],
['Func3Param1', 'Func3Param2', 'Func3Param3']
].map(args => MyApp.createFooCard(...args));
});

If this Items array is in the global scope you could easily add elements to it inside the createFooCard function. As a example:
// Your element collection array
var items = []
//Your function
function createFooCard(bindValue, userCls, glyph, label) {
var temp = {
itemId: bindValue,
userCls: userCls,
glyph: MyApp.getGlyph(glyph),
items: {
xtype: 'infocardfld',
fieldLabel: label,
bind: '{' + bindValue + ' || "0"}'
}
};
items.push(temp);
}
You could easily pass the array as a param as well. if you wants to make it more generalized.

extjs renderer not executed

Im using the modern toolkit with extjs 6.5.1.
I want to use the renderer property in a grid cell to use html. The renderer simply returns '<a>...</a>' but when I use this it will encode the html code so that the cell shows '<a>...</a>' instead of a link.
Regarding to the answers on this thread I will need a cell property with "encodeHtml" turned to false but as soon as I add a cell property the renderer wont get executed anymore (Even when I use EncodeHtml) and shows the data like there was no renderer property.
Why cant I use the renderer property anymore?
Heres my code:
{
xtype: 'gridcolumn',
renderer: function(value, record, dataIndex, cell, column) {
console.log('hello world');
return '<a>...</a>';
},
width: 30,
text: '...',
cell: {
xtype: 'textcell',
encodeHtml: false
}
}
What it looks like without encodeHtml

This behavior is because you specify
cell: {
xtype: 'textcell'
}
in the first place. Just remove it, and your renderer can return HTML. This should work:
{
xtype: 'gridcolumn',
renderer: function(value, record, dataIndex, cell, column) {
console.log('hello world');
return '<a>...</a>';
},
width: 30,
text: '...'
}
At least id does in my application, where I use renderers returning html to generate special formatting.
If you need to specify the cell property, because of something you didn't show in your code, use the default cell xtype instead: gridcell.

store add - does not work

I have a simple grid, which looks like so:
{
xtype: "grid",
columns: [{
header: 'Title', flex: 1, dataIndex: 'Title'
}],
store: Ext.create('Ext.data.Store', {
fields:['id', 'Title']
})
}
And I have a function (attached to a button) which, I believe, should populate this grid with some data. It does it like so:
grid.store.removeAll();
records = [{"id":"1", "Title", "Hello world"}];
grid.store.add(records);
grid.store.load();
console.log(grid.store.getCount());
But for some insane reason, the store is empty and grid.store.getCount() echoes "0". What the heck is going on? PS. I'm using ExtJS 6.
EDIT
If however I slightly change my code to this:
...
store: Ext.create('Ext.data.Store', {
autoLoad: false,
fields:['id','Title'],
data:[{"id": 1,"Title": "Hello world"}]
})
...
//and in function just one line of code:
grid.store.load();
then it starts working. So, it seems like the whole problem is with store.add. It does not do what it should.

Just remove grid.store.load().
The load marks the store as needing a load, but if your adding records using add that is not what you need.
Working example: https://fiddle.sencha.com/#fiddle/1fbv

Extjs store isn't loaded after changing active tab

I have a grid.panel on the side with table names and I'd like to show the table(or it's structure) when the user clicks on it, in another grid.panel inside a tab view.
what i did:
in the actionlistener
var store = Ext.data.StoreManager.lookup('Tables');
currentTable = store.findRecord('name',record.get('name'));
var structureView = Ext.ComponentQuery.query('structure')[0];
structureView.showTable(currentTable);
in the view
showTable: function(table) {
this.storeObj.getProxy().url = '/tables/stucture/' + table.data.name;
this.storeObj.load();
this.update();
}
In the Tables store I have table descriptors, with some basic data like name, etc. and the list with table names displays the content of this store. So I look up the Tables store and get the tabledescriptor and pass it to the view, which then loads the store('Columns' in this case) with the data it will display. And all this works fine until I switch tabs. After changing the active tab and then changing back data is not refreshed on clicking on another table's name and I get this: Uncaught TypeError: Cannot call method 'removeChild' of null. It seems that it can't load the store anymore after changing the active tab. I found this issue on forums but I couldn't find a solution for it.
Do you have any ideas?
Thanks for your time.
Edit:
Ext.define('App.view.Table.Structure', {
extend: 'Ext.grid.Panel',
alias: 'widget.structure',
store: 'Columns',
width: 800,
storeObj: undefined,
initComponent: function () {
this.columns = [{
header: 'Column name',
dataIndex: 'name',
flex: 1
}, {
header: 'Position',
dataIndex: 'position',
flex: 1
}, {
header: 'Default value',
dataIndex: 'defaultValue',
flex: 1
}, {
header: 'Column type',
dataIndex: 'type',
flex: 1
}, ];
this.storeObj = Ext.StoreManager.lookup('Columns');
this.callParent(arguments);
}

Well I managed to solve it at last, but I don't really understand why this solved the problem. So this is what I did:
Every time I needed to update the Columns store(or the others) I looked it up
instead of just looking it up in the initcomponent.
Instead of calling update() method I called reconfigure()
Now it works like charm, but I don't see why update didn't do the trick and why I had to look up the store every time I wanted to call load() on it... So if someone could explain it I would be thankful.

ExtJS: share store between grid and chart

I'm writing a simple application storing and displaying timestamped messages. Messages are JSON objects containing, say 2 main fields like:
{
"emitted": "2011-12-08 12:00:00",
"message": "This is message #666"
}
I have a model to describe these messages:
Ext.define('Message', {
extend: 'Ext.data.Model',
fields: [
{ name: 'emitted', type: 'date' },
{ name: 'message', type: 'string' }
]
});
I have no problem displaying these messages in a grid. However, i would now like to display these messages in a chart. For instance, I would be able to grab numbers (like the #666 in the above example) and display a line chart.
Ideally, i don't want to create a new store for the chart, i would like to reuse the same message store, but apply a filter on the fields to grab the proper value. I don't know, something that might look like:
var chart = {
xtype: 'chart',
...
series: [{
type: 'line',
axis: ['left', 'bottom'],
xField: 'emitted',
yField: {fieldName:'message', fieldGrabber: function(v) {
new RegExp("This is message #(\d+)$", "g").exec(v)[1]
}}
}]
};
Does this kind of thing is possible in ExtJS ?
I just tried to explain what I'm trying to do, i have no idea where to find such a feature: in the chart class, in the store class, or using a kind pf proxy to the store.
Side note:
I cannot ask the data to be properly formatted to the server. The messages I receive are not backed up anywhere, they are just live events streamed to the client via socketIO.
Any advices greatly appreciated!

You should extract the value inside you model to a separate field:
Ext.define('Message', {
extend: 'Ext.data.Model',
fields: [
{ name: 'emitted', type: 'date' },
{ name: 'message', type: 'string' },
{ name: 'nr', convert: function(v, r){
return r.get('message').replace(/^.*#/, '');
} }
]
});
Or you might be better off just having the 'nr' field and using a renderer in Grid that displays it as "This is message #{nr}".
Then you can use the 'nr' field directly in you chart.

I switched to Highcharts and threw ExtJS out to the trash :P