Develop Reference

How to parse a javascript file that contains json data stored in a variable?

I was wondering how can I extract the JSON data from a javascript file. The javascript is intended to be used as a config file and contains one variable with JSON data in it. This is similar to the require-config.js file used in Magento 2, just for reference. It looks something like this:
var config = {
fieldsets : [
{
title : 'Quote Essentials',
description : 'Some',
fields : [
{
label : 'What type of project is this for?',
required : true,
class : '',
type : 'input',
inputType : 'text',
hint : 'For example: company uniforms, clothing line, school events, etc.',
id : ''
},
{
label : 'How many total items do you need?',
required : true,
class : '',
type : 'input',
inputType : 'text',
hint : 'Please note: the minimum order size is 24 pieces.',
id : ''
},
...

If you're accessing this server-side you can export the config
module.exports = {
fieldset: [ ... ]
}
and require it
const config = require('./config.js');
If you're trying to access it on the client-side, just place the config script before the scripts that access it and you'll be able to access it like you would any other object:
config.fieldset...
One problem with this is that you're adding the config variable directly to window and by doing this you might be over-writing an existing config variable. Probably unlikely, but a way to mitigate this is to provide a namespace for your code so you don't pollute the global namespace and the code becomes more modularised. WRT to your config file, your namespace technique might work like this:
// Semi-colon to prevent minify issues
// Pass `window` into the immediately-invoked function expression
// as an argument
;(function (window) {
// config is local to this function and can't leak
var config = { ... };
// If the `app` variable isn't available, create it
window.app = window.app || {};
// Add config to the app namespace
window.app.config = config;
})();
And you can do something similar to the rest of your code.
You would access the config with app.config.fieldset....
Hope that helps.

Data Model's "serialize" function not called on property "set"ting

Also asked on Sencha's site here
My data model's "serialize" function is not called when I call
model.set("<fieldName>", <newValue>);
Here's a fiddle
I'm pretty unclear on why the serialize function isn't called...am I missing something, or is this a bug?
(And here's the code from the fiddle)
Ext.application({
name : 'Fiddle',
requires: [
"Ext.data.Store"
],
launch : function() {
var store = Ext.create("Ext.data.Store", {
data: [{Id: 0, Name: "Bill", Props: "{foo: 2, bar:{pan:5}}"}],
fields:[
{name: "Id", type: "int"},
{name: "Name", type: "string"},
{name: "Props",
convert: function(value, record){
console.log("called convert");
return Ext.JSON.decode(value);
},
serialize: function(value, record){
alert("never getting called!! :(");
console.log("sure, i'll put log here too..not getting called though");
return Ext.JSON.encode(value);
}
}
]
});
console.log(store.getAt(0));
var rec = store.getAt(0);
var newProp = {rec:"junk", foo: "orange"};
console.log(newProp);
rec.set("Props",newProp);
}
});

Mappings from source content (JSON/XML) to business model (Ext.data.Model) are not automatically created in ExtJS's data model system. As such, another step is needed to produce this relationship using mapping/associationsor something similar.
I.e. The data model doesn't store the original JSON to read/write from, which is fine for most cases. When a JSON string needs to be updated via ExtJS, one solution is to, on the model, set
convertOnSet
to false, allowing for custom manipulation of the JSON string via extract/update functions on the data model.

How do I change the .save() JSON output for ExtJS 4.2

I have a problem save data to my database using an ExtJS updateable grid.
I'm working with a REST API that I have written in Progress ABL.
The API is working but the Input JSON and Output JSON is very specific.
I can read the JSON data into my grid and display it, but when I want to save a new record the grid creates a wrong JSON output.
My output has to be like this:
{
"request":
{
"dsUsers":
{
"ttUsers":
[{"ID":20,"LOGIN":"test","PASS":"","ID_ADDR":0,"ID_CUST":0}]
}
}
}
But I'm not able to create the request and dsUsers groups in the writer.
I have tested a lot but I don't really know what I have to change to make it work.
Thanks

Base Ext.data.writer.Json allows you to define only root data property. However if you need more custom structure like this, you can quite easily create your own writer.
Your writer should extend from Ext.data.writer.Json and override writeRecords method. This method add records data into request.
In your case custom writer should look like this:
Ext.define('myWriter', {
extend: 'Ext.data.writer.Json',
writeRecords: function(request, data) {
var root = this.root;
if (this.expandData) {
data = this.getExpandedData(data);
}
if (this.allowSingle && data.length === 1) {
// convert to single object format
data = data[0];
}
request.jsonData = request.jsonData || {};
request.jsonData['request'] = {
'dsUsers': {}
};
request.jsonData['request']['dsUsers'][root] = data;
return request;
}
});
Then you can use your custom writer in model or store proxy:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
proxy: {
type: 'rest',
writer: Ext.create('myWriter', {
root: 'ttUsers',
mainRoot: 'dsUsers'
}),
url : '/users'
}
});
Of course you can create custom writer more configurable and reusable by defining name of "request" and "dsUsers" attributes in config.
Fiddle with example: https://fiddle.sencha.com/#fiddle/33l

Variable in javascript file not accessible in object property

I have the following problem. I have a JS-file which has a handful of variables. Those I initialize in a function:
var currentYear;
var previousYear;
var urlQuarterDates;
var urlHalfYear;
var urlYear;
var urlMonth;
var urlProposalsSentAndReceived; //= '/Marketing/ListProposalsSentAndReceived';
var urlProposalsResponsibleMonth;
function initTabReportProposalsMonth(_currentYear, _previousYear, _urlViewProposal,
_urlQuarterDates, _urlHalfYear, _urlYear, _urlMonth, _urlProposalsSentAndReceived,
_urlProposalsResponsibleMonth) {
currentYear = _currentYear;
previousYear = _previousYear;
urlQuarterDates = _urlQuarterDates;
urlHalfYear = _urlHalfYear;
urlYear = _urlYear;
urlMonth = _urlMonth;
urlProposalsSentAndReceived = _urlProposalsSentAndReceived;
urlProposalsResponsibleMonth = _urlProposalsResponsibleMonth;
}
I have defined an event handler in the same JS-file:
function onPeriodSelect(combo, rec, i) {
var conn = new Ext.data.Connection();
var params = { };
switch(rec.get('myId'))
{
case _currentQuarter1:
conn.url = urlQuarterDates;
params.y = currentYear;
params.index = 1;
break;
}
reload(); //
}
The variables urlQuarterDates and currentYear are readily accessible. So far, so good...
I also have an ExtJs Grid with a data store which is declared inline:
var gridSentAndReceived = new Ext.grid.GridPanel({
title: 'Totaal',
autoHeight: true,
autoWidth: true,
store: new Ext.data.Store({
id: 'idStoreSentAndReceived',
proxy: new Ext.data.HttpProxy({ url: urlProposalsSentAndReceived,
timeout: 1800000 }),
reader: new Ext.data.JsonReader(
{
root: 'rows'
},
[
{ name: 'Status' },
{ name: 'nrOfProposals' },
{ name: 'TotalRevenueHardware' },
{ name: 'TotalRevenueYearly' },
{ name: 'TotalRevenueHours' }
]),
remoteSort: false
}),
frame: true,
iconCls: 'icon-grid',
columns: [
...
],
viewConfig: {
forceFit: true
}
});
The reload() function calls the load of the store of gridSentAndReceived. This generates an exception: the url is not defined at all. If I initialize the url right at its declaration (which is currently commented out' it works fine. When I browse using the debugger it shows that urlProposalsSentAndReceived is initialized. Still, it claims there is no URL.
This seems to be a scope problem, since variables are accessible from the event handler but obviously not elsewhere. Anybody knows how to fix it? The URLs are created using server tags and those cannot be put in JS files. I wouldn't enjoy putting them directly in the JS file as a text string. Is there a possible solution?
Update
I have tried a few more things but nothing works.
I have tried:
'beforeload': function (store, options) {
store.proxy.setUrl('/Marketing/ListProposalsSentAndReceived');
}
but even that didn't work. Still got the same exception. I really have no clue why that failed though, I took the code from the ExtJs Documentation under 'api'.
Now I have no choice but hardcoding the urls in my js-file though I'd very much prefer to use servertags and add them dynamically. Hopefully, one day, I'll find a solution rather than getting runtime errors when I change the location of a controller action.

This is not a scope issue. At the time you run your code urlProposalsSentAndReceived is not defined. If you set that variable via an event handler, the value is always set after gridSentAndReceived is initialized.

How to get data from extjs 4 store

Im stack with ext js 4 at the very beginning. Im trying to get the current user data when starting the application using store. But Im not getting any data from the store, even the store.count return 0.
I found many description how to create store, but not how to access the data in it. I managed to get the data using Ext ajax request, but i think would be better using store and i cant avoid them..
My model:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
'id',
'username',
'email'
]
});
My store looks like:
Ext.define('MyApp.store.User.CurrentUser', {
extend: 'Ext.data.Store',
requires: 'MyApp.model.User',
model: 'MyApp.model.User',
autoLoad: true,
proxy: {
type: 'ajax',
method: 'POST',
url: Routing.generate('admin_profile'),
reader: {
type: 'json',
root: 'user'
}
}
});
The returned json:
{
"success":true,
"user":[{
"id":1,
"username":"r00t",
"email":"root#root.root"
}]
}
And the application:
Ext.application({
name: 'MyApp',
appFolder: '/bundles/myadmin/js/app',
models: ['MyApp.model.User'],
stores: ['MyApp.store.User.CurrentUser'],
//autoCreateViewport: true,
launch: function() {
var currentUser=Ext.create('MyApp.store.User.CurrentUser',{});
/*
Ext.Ajax.request({
url : Routing.generate('admin_profile'),
method: 'POST',
success: function(resp) {
var options = Ext.decode(resp.responseText).user;
Ext.each(options, function(op) {
var user = Ext.create('MyApp.model.User',{id: op.id,username:op.username,email:op.email});
setUser(user);
}
)}
});
*/
currentUser.load();
alert(currentUser.count());
}
});

The problem itself isn't that the store does not contain data, the problem is that the store load is asyncronous therefore when you count the store records, the store is actualy empty.
To 'fix' this, use the callback method of the store load.
currentUser.load({
scope : this,
callback: function(records, operation, success) {
//here the store has been loaded so you can use what functions you like
currentUser.count();
}
});

All the sencha examples have the proxies in the store, but you should actually put the proxy in the model, so that you can use the model.load method. the store inherits the model's proxy, and it all works as expected.
it looks like model.load hardcodes the id though (instead of using idProperty), and it always has to be an int, as far as I can tell.
good luck!