This is my JSON file from which I want to access "tr_name" which is inside var InspectorDefs but I can't find the way.Any help please?
JSON FILE:
var InspectorDefs = {
'link': {
inputs: {
attrs: {
'.attributes': {
'tr_name': { type: 'text', group: 'attributes', label: 'Name', index: 1 },
'tr_description': { type: 'text', group: 'attributes', label: 'Description', index: 2 },
'tr_rules': { type: 'select', options: [], group: 'attributes', label: 'Rule', index: 3 },
'tr_value': { type: 'select', options: ['true', 'false'], group: 'attributes', label: 'Value', index: 4 },
'tr_rule_source': { type: 'select', options: ['BPM', 'Drools', 'iLog'], group: 'attributes', label: 'Rule source', index: 5 }
},
},
},
},
};
I want to pass tr_name path here but I am desperate:
cell.on('change:tr_name', function(cell, change, opt) {})
if you are just looking for how to access your properties in javascript then you would reference it like this
InspectorDefs.link.inputs.attrs[".attributes"].tr_description
JSON objects can be referenced as properties or dictionaries, i am assuming you are having issues with the ".attributes"?
JsFiddle
you can use [] as in array or map.
var tr_name = InspectorDefs['link']['inputs']['attrs']['.attributes']['tr_name'];
But in your case I guess you want to call some function when the attribute of some html tag changed. so you can use the actual html tag generated by this json file which can be found from the web page generated or from my guess it is: <Name> tag as read from the json file
Related
I receive an array of strings from the server.
How can I populate my grid panel if the data is not in key-value format?
Here is the response:
{"result":true,"data":["dep1","dep2","dep3"],"totalCount":3}
Here is my grid panel
xtype: 'gridpanel',
flex: 1,
itemId: 'departmentsGridPanel',
title: '',
store: new Ext.data.ArrayStore({
autoLoad: true,
fields: [
'department'
],
proxy: {
type: 'ajax',
url: 'FilteringDataServlet?filterColumn=avdeling',
reader: {
type: 'json',
root: 'data'
}
}
}),
columns: [{
text: 'Avdeling',
flex: 1,
dataIndex: 'department'
}],
Then you should use Ext.data.reader.Array with mapping parameter.
Employee = Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping: 0}, // "mapping" only needed if an "id" field is present which
{name: 'occupation', mapping: 1} // precludes using the ordinal position as the index.
]
});
I have solved this by adding load listener to my store and modifying the data there
listeners: {
load: function(store, records, success, opts) {
store.each(function(record) {
record.set('department', record.raw);
});
}
}
I have tried to create a new empty record without creating a model.
Accidentally I tried to run this:
new new storeComp.model()
and it actually works!
anyone know any solution for this or an answer to how is it working ?
Thanks!
Shalev
Stores that are not configured with a model will create an anonymous one implicitly. This is explained in the docs for the implicitModel private property (the store needs to know that because if it uses an implicit model, it must destroy it when it is itself destroyed).
In the end that means that you can safely expect any store to be backed with a model.
I faced the same problem for an associative store. For that i have used below JSON format to load project store. So automatically empty record is created in associative (project-resources) Store.
Store:
Ext.define('App.store.Projects', {
extend : 'Ext.data.Store',
model : 'App.model.Project'
});
Models:
Ext.define("App.model.Project", {
extend: 'Ext.data.Model',
idProperty : 'id',
uses : ['App.model.ProjectResource'],
fields: [
{ type: 'auto', name: 'id'},
{ type: 'number', name: 'customerid'},
{ type: 'string', name: 'projectcode'}
],
associations: [
{type: 'hasMany', model: 'App.model.ProjectResource', name: 'Resources', storeConfig: { remoteFilter: true }}
]
});
Ext.define("App.model.ProjectResource", {
extend: 'Ext.data.Model',
idProperty : 'id',
fields: [
{ type: 'number', name: 'id'},
{ type: 'string', name: 'name'},
{ type: 'number', name: 'projectid'},
{ type: 'auto', name: 'resourceid'}
],
associations : [
{type : 'belongsTo', model: 'App.model.Project'}
]
});
JSON Format:
[
{
"id": "105",
"customerid": "105",
"projectcode": "ALN01",
"Resources": {}
}
]
Loading store with empty object (like "Resources": {}) will create empty model.
I've got a Json file......
[
{
"Title":"Package1",
"id":"1",
"POI":[
{
"Title":"POI1",
"LayerID":"1",
},
{
"Title":"POI2",
"LayerID":"1",
}
},
{
"Title":"Package2",
"id":"2",
"POI":[
{
"Title":"POI3",
"LayerID":"2",
},
{
"Title":"POI4",
"LayerID":"2",
}
}
]
populating a store.....
Ext.define('Murmuration.store.MyPackages', {
extend: 'Ext.data.Store',
xtype: 'myPackages',
config: {
model: 'Murmuration.model.PackagesModel',
proxy: {
type: 'ajax',
url : 'data/store.json',
reader: {
type: 'json'
}
},
autoLoad: true
}
});
with a model......
Ext.define('Murmuration.model.PackagesModel', {
extend: 'Ext.data.Model',
xtype: 'packagesModel',
config: {
fields: [
{name: 'Title', type: 'string'},
{name: 'id', type: 'int'}
]
}
});
for said list......
Ext.define('Murmuration.view.homeList', {
extend: 'Ext.List',
xtype: 'homeList',
fulscreen: true,
config: {
title:'Murmuration',
itemTpl: '<div>{Title}</div>',
store:'MyPackages',
fulscreen: true,
}
});
The list Items are successfully being populated with 'Package1' and 'Package2'. But for the life of me I can't successfully change the code to populate the list with the POI titles for the fist package........'POI1' and 'POI2'. How would I go about successfully implementing the following? Any help would be greatly appreciated.
The json you've given is nested so things little different here. First thing is, you need to specify a rootProperty in your reader. So you define a root element in your json and that element will be set to rootProperty.
Next part is, you have POI as array of objects. So you'd need a separate model for POI.
Model for POI can be defined -
Ext.define('Murmuration.model.POIModel',{
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Title', type: 'string'},
{name: 'LayerID', type: 'int'}
],
belongsTo:'Murmuration.model.PackagesModel'
}
});
After a close look, you'll notice there's one extra config belongsTo. This represents many to one association with your PackageModel since there are many POI in each package.
After doing this, you'd need to change you PackageModel also to -
Ext.define('Murmuration.model.PackagesModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Title', type: 'string'},
{name: 'id', type: 'int'}
]
},
hasMany:{
associationKey:'POI',
model:'Murmuration.model.POIModel',
name:'POI'
}
});
here, hasMany represents that this model is having multiple model instances of POI model. associationKey is the key POI from you json and model gives the model instance of POI model.
After doing that you'd need to change your reader in store to -
Ext.define('Murmuration.store.MyPackages', {
extend: 'Ext.data.Store',
config: {
model: 'Murmuration.model.PackagesModel',
proxy: {
type: 'ajax',
url : 'data/store.json',
reader: {
type: 'json',
rootProperty:'items'
}
},
autoLoad: true
}
});
rootProperty should be set to root of you json. I assumed it could be items here.
Finally in you view you can have template set up like this -
itemTpl: new Ext.XTemplate(['<div>Package Title => {Title}'+
'<tpl for="POI"><h6>POI title => {Title}</h6><h6>POI layer => {LayerID}</h6></tpl></div>'
]),
2 things I found in your code are not correct though -
Store and Model can not have a xtype.
All the config options should be inside config:{} only.
This topic has been discussed several times on the web but all subjects none helped me solve my problem.
My javascript code receives the JSON nested data. All JSON data Level 1 data are transcribed in the grid panel but all child data none.
I have tried so many ways but impossible.
That's why I'm asking you to help me please.
My JSON:
{
"success":true,
"error":false,
"redirectUrl":null,
"fund":[{
"cat_id":1,
"catname":"Europe OE Japan Large-Cap Equity",
"region":{
"region_id":2,
"region_name":"JAPAN"
}
},{
"cat_id":2,
"catname":"Europe OE Europe Large-Cap Growth Equity",
"region":{
"region_id":1,
"region_name":"EUROPE"
}
}]
}
MY model:
var Recommended = new function() {
this.DataModel = function() {
Ext.define('Fund', {
extend: 'Ext.data.Model',
fields: [{
name: 'catname',
type: 'string'
},{
name: 'cat_id',
type: 'int'
}],
proxy :{
type: 'rest',
url: application +'directory/function',
reader: {
type: 'json',
root: 'fund'
}
},
associations: [{
type: 'hasOne',
model: 'Region',
primaryKey: 'region_id',
name:'region'
}]
});
Ext.define('Region', {
extend: 'Ext.data.Model',
fields: [{
name: 'region_name',
type: 'string'
},{
name: 'region_id',
type: 'int'
}]
});
}
My Store & grid Panel:
this.JSONstore = function() {
var storeRecommended;
storeRecommended = Ext.create('Ext.data.Store', {
model: 'Fund',
autoLoad:true,
groupField: 'region_name'
});
var colModel =
[
{
text: 'REGION',
width: 200,
dataIndex: 'region_name',
name:'region_name',
mapping:'region.region_name'
},{
text: 'MORNINGSTAR',
width: 300,
dataIndex: 'catname',
name:'catname'
}
];
var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: 'Classe: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
hideGroupedHeader: false
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: 'recommendedlists',
collapsible: true,
iconCls: 'icon-grid',
frame: true,
store: storeRecommended,
width: 1200,
height: 400,
title: 'Test',
resizable: true,
features: [groupingFeature],
columns: colModel,
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
groupingFeature.disable();
}
}]
});
}
this.initControlsOnload = function() {
Recommended.DataModel();
Recommended.JSONstore();
}
} // close Recommended function
The problem is your store bound to the grid knows nothing about Regions. It stores Funds. So you can't ask for a column to map to a data property that's not in the store.
The store is flat list of Fund records. And sure an individual Fund itself might know about the Region it belongs to, but the store containing a list of funds does not.
What to do?
What needs to happen is flattening out of your data structure on the client side. Why? Because the grid is flat. If you had multiple regions per fund - then we would be talking about a different solution.
How to do that?
If you control the server side of this app then add a Region field to the Fund object, then your data set is simple, straight forward and more importantly flat. If you can't (or don't want to) change the server side, then you can change the client side Model mapping. Essentially you would change your Fund model to something like this:
Ext.define('Fund', {
extend: 'Ext.data.Model',
fields: [
{ name: 'catname', type: 'string' },
{ name: 'cat_id', type: 'int' },
{ name: 'region_name', type: 'string',
mapping: 'region.region_name'},
{ name: 'region_id', type: 'int',
mapping: 'region.region_id'}
]
....
});
You see what we did there? We flattened the Region data into the Fund record. And now your store will have no problems accessing Region name data by name.
Good Luck,
Dmitry.
What's the right way to use a TreeStore with directFn?
Here's how I'm doing it:
var categoryStore = Ext.create('Ext.data.TreeStore', {
//storeId:'categoryStore',
autoLoad:true,
root: {
text: 'Menu',
id: 'categoryId',
expanded: true
},
proxy: {
type: 'direct',
directFn: categoryController.getMenuItems,
reader: {
id: 'categoryId'
}
},
fields: ['categoryId', 'text', 'children', 'leaf', 'cls'],
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}]
});
But I get no love. Here's sample of my data:
[{"method":"getMenuItems","result":{"data":[{"children":[{"leaf":true,"checked":false,"categoryId":1001,"text":"XXXXX"}],"success":true},"action":"categoryController","tid":1,"type":"rpc"}]
Frustratingly, it works if I put what's inside the data node and do a straightforward AJAX call.
Maybe try:
reader:{
type:'json',
root:'data'
}
Also have a quick look at this.