We Keep Coding

ExtJS : How to map Store fields to JSON properties?

I have the following JSON data :
{
"disclaimer": "Exchange rates provided for informational purposes only and do not constitute financial advice of any kind. Although every attempt is made to ensure quality, no guarantees are made of accuracy, validity, availability, or fitness for any purpose. All usage subject to acceptance of Terms: https://openexchangerates.org/terms/",
"license": "Data sourced from various providers; resale prohibited; no warranties given of any kind. All usage subject to License Agreement: https://openexchangerates.org/license/",
"timestamp": 1475110853,
"base": "USD",
"rates": {
"AED": 3.672983,
"AFN": 66.5538,
"ALL": 122.0421,
"AMD": 473.5925,
"ANG": 1.7763,
"AOA": 165.571834,
"ARS": 15.3169,
"AUD": 1.299338,
"AWG": 1.792667,
"YER": 250.130999,
"ZAR": 13.61321,
"ZMK": 5252.024745,
"ZMW": 9.831204,
"ZWL": 322.387247
}
}
And I have defined my model as follows:
Ext.define('CurrencyConvert.model.CurrencyCode', {
extend : 'Ext.data.Model',
fields : [
{
name : 'code',
value : 'string'
},
{
name : 'rate',
value : 'float'
}
]
});
So that I can have the currency code(i.e. "USD") and the rate. But the problem is that the currency code itself is the property name of the actual rate; so how would I create my store so as to get both the code and the rate in my model ?
Ex:
For "AED": 3.672983, I want the code value to hold "AED" and rate field to hold 3.672983.

You can do like this:
Ext.define('CurrencyConvert.model.CurrencyCode', {
extend : 'Ext.data.Model',
fields : [
{
name : 'code',
value : 'string',
convert:function(v,rec){
=== Add Your Logic Here ===
}
},
{
name : 'rate',
value : 'float'
convert:function(v,rec){
=== Add Your Logic Here ===
}
}
]
});

Ext.define('CurrencyConvert.model.CurrencyCode', {
extend : 'Ext.data.Model',
fields : [
{
name : 'code',
value : 'string'
},
{
name : 'rate',
value : 'float',
convert : function(value, record) {
return jsonData.rates[record.get('code')]
}
}
]
});

ExtJs - How to create instance of Ext.data.Model dynamically using json file containing Model configs

I am using ExtJs Version 5.0.0.970. I have a Json file which has configs related to a model. Following is the structure of the Json file -
{
"model": {
"requires": ["Ext.data.Field"],
"fields": [
{
"name" : "carName",
"mapping" : "carName"
},
{
"name" : "carPrice.currency",
"mapping" : "carPrice.currency"
}
]
}
}
Using above Json i am trying to create a Model dynamically in the following way -
//gridModelJsonData variable contains the content of json.model object
Ext.create("Ext.data.Model",gridModelJsonData);
As soon as the above line of code executes i am getting following error in the console -
Model.js?_dc=1471922882661:2367 Uncaught TypeError: Cannot read property 'length' of undefined
Ext.data.Model#rankFields # Model.js?_dc=1471922882661:2367
Ext.data.Model#makeInitializeFn # Model.js?_dc=1471922882661:2824
Ext.data.Model#constructor # Model.js?_dc=1471922882661:378
Ext.data.Model # Class.js?_dc=1471922882661:29
Ext.create1 # VM11599:3create # ClassManager.js?_dc=1471922882661:1413
Please let me know how to solve this problem!
Thanks!

You should define your model's fields(i.e. the model's metadata) and then create the model:
var jsonData = {
"model": {
"fields": [
{
"name" : "carName",
"mapping" : "carName"
},
{
"name" : "carPrice.currency",
"mapping" : "carPrice.currency"
}
]
}
};
Ext.define('CarModel', { //Defining a model, which is like an object
extend : 'Ext.data.Model',
fields : [
{name: 'name', type: 'string'},
{name: 'mapping', type: 'string'}
]
});
var gridModelJsonData = jsonData.model;
var carModels = [];
for(var i =0; i < gridModelJsonData.fields.length; i++) {
carModels.push(Ext.create('CarModel', gridModelJsonData.fields[i]));
}
for(var i =0; i < carModels.length; i++) {
console.log('CarModel[' + i + '].name=' + carModels[i].get('name'));
console.log('CarModel[' + i + '].mapping=' + carModels[i].get('mapping'));
}
. See this fiddle

How to get the selected value from Kendo UI grid

I am using Kendo grid. I want to get the value(field-nlv_id) for the multiple row selected if select the rows. Also i want to get the number of selected rows and pass to the controller. Let me know the way to do it.
columns : [
{
'field' : 'nlv_id',
'title' : 'Asset ID'
},
{
'field' : 'due_date',
'title' : 'Partner Due Date'
},
{
'field' : 'link',
'title' : 'Partner'
},
{
'field' : 'playlist_type',
'title' : 'Playlist Style'
},
{
'field' : 'show_code',
'title' : 'Show Code'
},
{
'field' : 'status',
'title' : 'Status'
},
{
'field' : 'retry_count',
'title' : '# Retries'
}
],
scrollable : false,
pageable : {
pageSizes : [ 10, 25, 50 ],
buttonCount : 5,
refresh : true,
messages : {
display : "{0} - {1} of {2} assets",
itemsPerPage : "assets per page",
empty : "No assets to display"
}
},
dataSource : new kendo.data.DataSource({
serverPaging : true,
transport : {
read : getJobs
},
pageSize : 10,
schema : {
total : returnTotalCount
}
}),
selectable : 'multiple',
sortable : true
};

You will need to do an change() event on grid, then you will have selected items, for convinience i did an example using an list with all selected items, so you can easily get numbers of rows selected.
change: function (e, args) {
var currentSelected = this.select();
var dataSource = $grid.dataSource.data();
currentItems = [];
$.map(currentSelected, function (item) {
currentItems.push($grid.dataItem(item).nlv_id) ;
return $grid.dataItem(item).nlv_id;
});
alert(currentItems);
},
You can get count like that
currentItems.length;
EDIT: For convinience i create an example to do, is easier.
Important: you must set you 'nlv_id' in Schema!
http://jsfiddle.net/2ojwwpLf/
hope this help

jstree incompatible checkbox and types plugin

I'm creating a tree using the jstree javascript library while using two jstree plugins:
checkbox plugin
types plugin
Here is a code example with
var mydata=[
id: "1",
parent: "#",
text: "node1",
},
{
id: "2",
parent: "#",
text: "node2",
type: "nodeattribute",
}];
$('#dqResultsJSTree').jstree(
{
'core' : {
'themes' : {
'variant' : 'large',
'icons' : false,
},
'data' : mydata,
},
'types' : {
'nodeattribute' : {
'icon' : 'http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/24/Letter-A-lg-icon.png',
},
},
'checkbox' : {
cascade : "",
three_state : false,
},
'plugins' : [ 'checkbox', 'types'],
});
The problem I'm having is that the type is not working. The node with id=2 does not show the icon defined at type nodeattribute. Does anybody have had this problem using while using the checkbox at the same time?
Thanks in advance.
Source: https://www.jstree.com/plugins/

You have to set 'icons': true in the core section of jsTree config.
I also fixed your JSON - need a { for first object in mydata.
See demo: JS Fiddle

Common model in ExtJs 4

​I have few grids which have lot of similar fields. I want to create a common model and extend from it as below :
Ext.define('my.model.MyModel', {
extend : 'Ext.data.Model',
fields : [ {
name : 'fieldA'
}, {
name : 'fieldB'
}
]
});
Ext.define('my.model.MyModelA', {
extend : 'my.model.MyModel',
fields : [ { // How do I add the extra columns in the subclass?
}
]
});
And same for grids.

Just add the extra fields. The model will figure it out during definition time.
Ext.define('A', {
extend: 'Ext.data.Model',
fields: ['name']
});
Ext.define('B', {
extend: 'A',
fields: ['age']
});
console.log(B.getFields());