I have a problem with loading data from store. Please tell me what I do wrong. I am using ExtJS 4.1.
Request sends properly, i haven't troubles like file not found or something like that. It also works if I had few stores, and any of this stores loading one 'data type' to his model, for example urls1. But if I have one store and one big model, data don't display.
I have a JSON like this:
{
"root": {
"tName": "name",
"urls1": [{
"url": "http:// ..... :09'"
}, {
"url": "http:// ..... :10'"
}],
"perS": "",
"perD": "",
"urls2": [{
"url": "http:// ..... :0009'"
}, {
"url": "http:// ..... :0010'"
}],
"val2": "",
"list2": [{
"level": "lvl1"
}, {
"level": "lvl2"
}],
"types": [{
"type": "type2"
}, {
"type": "type4"
}],
"accs": [{
"login": "login",
"pass": "p1",
"port": "8858",
"conType": "type3",
}, {
"login": "login3",
"pass": "p13",
"port": "88583",
"conType": "type2",
}]
}
}
My Model:
Ext.define('ACT.model.myModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'tname'},
{name: 'urls1'},
{name: 'psec'},
{name: 'pday'},
{name: 'urls2'},
{name: 'list2'},
{name: 'types'},
{name: 'accs'},
]
});
My Store:
Ext.define('ACT.store.dataStore', {
extend: 'Ext.data.Store',
storeId:'mStore',
model: 'ACT.model.myModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'resources/data/configuration/MyConfig.json',
reader: {
type: 'json',
root: 'root',
successProperty: 'success'
}
}
});
and my initComponent function in view:
initComponent: function() {
var me = this;
this.columns = [
{
xtype: 'checkcolumn',
text: ' ',
width: 100,
sortable: false,
hideable: false,
allowBlank: false
},
{
text: 'URL',
width: '85%',
dataIndex: 'urls1',
sortable: true,
hideable: false
}]
this.callParent(arguments);
}
});
The above should load urls1 into the store correctly, however, the data type is array. So the data is in the store but it is only not displayed in the grid as dataIndex points to that array.
You can create another model for urls and associate it with the master model.
Related
Below code works fine with the data as in ReadOrder.json (below), however how to read the associated object when it is nested inside another object as in ReadOrderNested.json(below, within 'collection').
Question is more specifically can we use a mapping property or proxy's reader config with rootProperty (tried this approach with no luck)
Sencha fiddle : https://fiddle.sencha.com/#fiddle/9fb
Extjs version : 5.0.0
//Base Model
Ext.define('MyApp.model.Base', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}],
schema: {
namespace: 'MyApp.model'
}
});
//Order Model
Ext.define('MyApp.model.Order', {
extend: 'MyApp.model.Base',
fields: [{
name: 'customer',
type: 'string'
}, {
name: 'paymentStatus',
type: 'string'
}]
});
//PaymentDetail Model
Ext.define('MyApp.model.PaymentDetail', {
extend: 'MyApp.model.Base',
fields: [{
name: 'orderId',
reference: 'Order'
}, {
name: 'cardNumber',
type: 'string'
}, {
name: 'status',
type: 'string'
}]
});
Ext.define('MyApp.store.OrderStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Order',
proxy: {
type: "rest",
url: 'Order.json',
appendId: false,
api: {
create: undefined,
read: 'ReadOrder.json',
update: 'UpdateOrder.json',
destroy: undefined
},
reader: {
type: 'json',
rootProperty: 'order'
},
writer: {
writeAllFields: true,
allDataOptions: {
persist: true,
associated: true
}
}
},
});
Ext.application({
name: 'MyApp',
launch: function() {
var orderStore = Ext.create('MyApp.store.OrderStore');
orderStore.load({
callback: function(records) {
var order = this.first();
debugger;
var paymentDetailList = order.paymentDetails();
paymentDetailList.each(function(paymentDetail) {
//Print initial values of payment detail
console.log(paymentDetail.get('cardNumber'));
console.log(paymentDetail.get('status'));
})
}
});
}
});
Data : ReadOrder.json
{ "success": true,
"order": [{
"id": 1,
"customer": "Philip J. Fry",
"paymentStatus": "AWAIT_AUTH",
"paymentDetails": [{
orderId : 1,
"cardNumber": "4111111111",
"status": 'CREATED'
}, {
orderId : 1,
"cardNumber": "4222222222",
"status": "CREATED"
}]
}]
}
How to read with this data when the associated object is nested inside 'collection', ReadOrderNested.json:
{ "success": true,
"order": [{
"id": 1,
"customer": "Philip J. Fry",
"paymentStatus": "AWAIT_AUTH",
"paymentDetails": {
"collection" : [{
orderId : 1,
"cardNumber": "4111111111",
"status": 'CREATED'
}, {
orderId : 1,
"cardNumber": "4222222222",
"status": "CREATED"
}]}
}]
}
I am using ExtJS 4, dunno whether there is a difference. I am using a model with fields like this:
fields: [{
name: 'id',
type: 'int'
},{
name: 'paymentDetails'
}],
and when loading one model into a form
form.load(record);
Ext.getStore("paymentDetailsStore").removeAll();
Ext.getStore("paymentDetailsStore").loadRawData(record.get("paymentDetails"));
with paymentDetailsStore bound to a grid which is in the same window as the form.
I'm trying to implement a web-based Desktop application for administration purpose of my website. When I tried to rewrite the BogusMenuModule and BogusModule which are examples of ExtJS, I was unable to get deeper nodes of JSON by using myDataStore.load({callback:function(){...}}) inside of Ext.define('MyDesktop.BasicWindowModule', {...}) . I'm only able to get the first layer's ID.
If myDataStore(...) is outside of Ext.define(...) it works, but the problem is that it's unable to set parameters to 'win' which is an inside variable of Ext.define(...) .
Why I'd like to modify them is that I wanna implement a base-class module in order to pass taskbar ID to it and create a new taskbar instead of creating a new js file for my taskbar every time.
What I mean by deeper nodes is that if there's only one layer in JSON, it worked fine. But it doesn't work if the JSON looks like:
{
"BasicWindows": [
{
"id": 0,
"window": {
"id": 0,
"name": "ControlPanel",
"hasButton": false,
"configs": [
{
"id": 0,
"title": "ControlPanel",
"width": 640,
"height": 480
}
]
}
},
{
"id": 1,
"window": {
"id": 1,
"name": "Customers",
"hasButton": true,
"configs": [
{
"id": 1,
"title": "Customers",
"width": 400,
"height": 300,
"button": [
{
"text": "Submit"
},
{
"text": "Cancel"
}
]
}
]
}
},
{
"id": 2,
"window": {
"id": 2,
"name": "Reports",
"hasButton": false,
"configs": [
{
"id": 2,
"title": "Reports",
"width": 600,
"height": 400
}
]
}
}
]
}
And my modified BogusModule looks like:
Ext.require([
'Ext.data.*',
'Ext.form.*',
'Ext.window.Window'
]);
Ext.define('BasicWindow',{
extend: 'Ext.data.Model',
fields: [
{name: 'id', type:'int'}
],
hasMany : {model : 'myWindow', name : 'window'}
});
Ext.define('myWindow',{
extend: 'Ext.data.Model',
fields: [
{name: 'id', type:'int'},
{name: 'name', type: 'string'},
{name: 'hasButton', type: 'boolean'}
],
hasMany : {model : 'myConfigs', name : 'configs'},
belongsTo: 'BasicWindow'
});
Ext.define('myConfigs', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type:'int'},
{name: 'title', type: 'string'},
{name: 'width', type: 'int'},
{name: 'height', type: 'int'}
],
hasMany : {model : 'myButton', name : 'button'},
belongsTo: 'myWindow'
});
Ext.define('myButton',{
extend: 'Ext.data.Model',
fields: [
{name: 'text', type:'string'}
],
belongsTo: 'myConfigs'
});
var myDataStore = Ext.create('Ext.data.Store', {
model: 'BasicWindow',
proxy: {
type: 'ajax',
url : 'js/extjs/src/desktop/json/BasicWinConfig.json',
reader:{
type:'json',
root: 'BasicWindows'
}
}
});
var windowIndex = 0;
//function GetWindowName
Ext.define('MyDesktop.BasicWindowModule', {
extend: 'Ext.ux.desktop.Module',
init : function(){
this.launcher = {
//text: 'Auto Search',
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId:windowIndex
};
},
createWindow : function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('BasicWindow');
var form = new Ext.form.Panel({
border: false,
fieldDefaults: {
labelWidth: 60
}
});
if(!win){
win = desktop.createWindow({
autoShow: true,
id: 'BasicWindow',
//title: 'Auto Search',
//width: 240,
//height:200,
//minWidth: 240,
//minHeight: 200,
layout: 'fit',
plain: true,
items: form
});
myDataStore.load({callback:function(){
alert('This is inside load callback');
myDataStore.each(function(rec) {
var window = rec.get('window');
alert(window.getId());
rec.each(function(conf){
alert(conf.getId());
win.add({
title: config.get('title'),
width: config.get('width'),
height: config.get('height')
});
});
});
}});
}
win.show();
return win;
}
});
Any comment or answer would be appreciated.
I figured it out! Add the line outside of Ext.define
var me = this;
and then
me.myDataStore.load(...);
Another question comes out. How can I load myDataStore if I move Models and DataStore definition to another .js file?
Any suggestion?
Ext.data.StoreManager.lookup('myDataStore');
This function didn't work for ExtJS4 in my case.
I was not able to show <div>{lat}, {lon}, {ele}</div> on a sencha touch usingEXT.dataview.List ItemTpl with data from a Json File:
Json:
{
"data": {
"trackData":
[
{
"lon": 9.979255199432373,
"lat": 53.56595538391044,
"ele": 19
},
{
"lon": 9.973998069763184,
"lat": 53.56923037464335,
"ele": 15
}
]
}
}
Model:
Ext.define('Fahrradtour.model.Location', { extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'lat',
type: 'float'
},
{
name: 'lon',
type: 'float'
},
{
name: 'ele',
type: 'float'
}
]
}
});
Store:
Ext.define('Fahrradtour.store.LocationStore', { extend: 'Ext.data.Store',
requires: [
'Fahrradtour.model.Location'
],
config: {
autoLoad: true,
model: 'Fahrradtour.model.Location',
storeId: 'LocationStore',
proxy: {
type: 'ajax',
url: './data/json-track.json',
reader: {
type: 'json',
rootProperty: 'data',
record: 'trackData'
}
}
}
});
the Store loads his data in Architect well, but the List shows nothing.
anybody has an Idea what is wrong?
thanks.
I have model Schedule which associated with another model Chamber.
And i'm getting the problem when associated model data is null.
It's normal behavior, cause it's not required field.
Upgrade: Schedule model is a part of scheduleTree model, which used by store loading data from server.
Ext.define('...SchedulesTree', {
extend : '...TreeStore',
model: "...ScheduleTree",
root: {
expanded: true,
text: "root",
children: [],
loaded: true
},
paramsAsHash : true,
proxy : {
type: "direct",
autoLoad: false,
api : {
read: registratorAction.getScheduleNode
},
reader: {
type: "json",
root : "records",
totalProperty: 'total'
}
}
});
Ext.define("...ScheduleTree", {
extend: "Ext.data.Model",
...
associations: [
{
type: "hasMany",
model: "Unimed.model.staff.Schedule",
name: "schedules",
getterName: "schedules"
}
]
});
Ext.define("...Schedule", {
extend: "Ext.data.Model",
fields: [
{name: "timeBegin", type: "date", dateFormat: "time"},
{name: "timeEnd", type: "date", dateFormat: "time"}
],
proxy: {
type: "direct",
reader: {
type: "json"
}
},
associations: [
{
type: "belongsTo",
model: "..LpuPosition",
associationKey: "lpuPosition",
getterName: "lpuPosition",
associatedName: "lpuPosition"
},
{
type: "belongsTo",
model: "...Chamber",
associationKey: "chamber",
getterName: "chamber",
associatedName: "chamber"
}
]
});
When i'm getting chamber:
chamber = schedule.chamber();
and there is no linked data i'm getting exception: 'Uncaught TypeError: undefined is not a function'.
I can make workaround by looking raw data, but may be there exists more elegance solution?
I just cannot seem to get the tree grid up and running.
I have defined the model, the store and the treegrid (as seen below).
The tree grid shows inside target, the data is loaded async (checked with fiddler, two rows came back) however the treegrid just shows two rows with empty cells.
I tried debugging and the store's root node indeed has two child nodes, the model data is under child's raw property (except some fields such as leaf and iconCls which are also in data property), yet the tree grid shows two empty rows, despite dataIndex pointing to a proper model field.
It's like tree grid cannot find the field defined by the model?!?
Here's the source (I am using sandbox because I am integrating this into salesforce vforce, the salesforce merge fields {!} are also valid and render properly)
Ext4.onReady(function() {
var target = '{!$Component.childBlock.childTreeDiv}';
Ext4.define('ConfigurationItem', {
extend: 'Ext4.data.Model',
fields: [
{
id: 'id',
type: 'string'},
{
id: 'name',
type: 'string'},
{
id: 'recordType',
type: 'string'},
{
id: 'ciName',
type: 'string'},
{
id: 'alias',
type: 'string'},
{
id: 'model',
type: 'string'},
{
id: 'status',
type: 'string'},
{
id: 'description',
type: 'string'},
{
id: 'leaf',
type: 'bool'},
{
id: 'iconCls',
type: 'string'}
]
});
var store = Ext4.create('Ext4.data.TreeStore', {
model: 'ConfigurationItem',
root: {
nodetype: 'async',
id: '{!CI__c.Id}',
expanded: true
},
proxy: {
type: 'ajax',
url: 'json_CIChildren',
reader: {
type: 'json',
root: 'children'
}
}
});
tree = Ext4.create('Ext4.tree.Panel', {
width: document.getElementById(target).offsetWidth,
autoHeight: true,
title: 'Child Configuration Items',
collapsible: true,
titleCollapse: true,
renderTo: target,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
columns: [
{
type: 'treecolumn',
text: 'CI#',
dataIndex: 'name'},
{
text: 'Type',
dataIndex: 'recordType'}
]
});
});
The request to json_CIChildren?_dc=1329830854458&node=a0NT0000006tYKzMAM was valid (the parentID in root.id got propagated ok) and came back with valid json:
{ "children" : [
{
"id": "a0NT0000006tswhMAA",
"name": "CI334593834",
"recordType": "Rack",
"ciName": "Empty rack",
"alias": "",
"model": "",
"status": "",
"description": "",
"leaf": "true",
"iconCls": "x4-ciicon-Rack"
},
{
"id": "a0NT0000006tYKuMAM",
"name": "CI2345234",
"recordType": "Service",
"ciName": "Business Connect - Premium",
"alias": "",
"model": "",
"status": "",
"description": "",
"leaf": "true",
"iconCls": "x4-ciicon-Service"
}
]}
What am I doing wrong? Why isn't the treegrid seeing name and recordType fields?
Is this because store only saw NodeInterface-like fields and there is none of my custom data in data property?
I think the problem is your model fields aren't mapped right. The "id" property for each field should be the 'name' property instead.