I'm trying to take a test api property of ajax proxy in store, but seems it does not work.
I have no idea why it does not work. I've just followed reference book.
Would someone please give me an advice ? I've attached source code.
Below is source code for model.
Ext.define('directModel', {
extend : 'Ext.data.Model',
fields : [
{name : 'id', type : 'int'},
{name : 'firstName', type : 'string'},
{name : 'lastName', type : 'string'},
{name : 'company', type : 'string'},
{name : 'email', type : 'string'},
{name : 'dob', type : 'date'},
{name : 'age', type : 'int'},
{name : 'coworker', type : 'string'}
]
});
Below is source code for store.
var store = Ext.create('Ext.data.Store', {
storeId : 'directStore',
model : 'directModel',
proxy : {
type : 'ajax',
api : {
read : '/common/command.jsp?action=read',
create : '/common/command.jsp?action=add',
update : '/common/command.jsp?action=update',
destory : '/common/command.jsp?action=remove'
},
reader : {
type : 'json',
root : 'root'
},
writer : {
type : 'json',
root : 'data'
}
}
});
var s = Ext.data.StoreManager.get('directStore');
s.load({
callback : function(){
var r = Ext.ModelManager.create({
id : '346012',
firstName : '',
lastName : '',
company : '',
email : '',
dob : '',
age : 3,
coworker : 'N/A'
}, 'directModel');
s.add(r);
s.sync();
}
});
I just loaded store to bring the data from server side and I found out it's okay.
Also I tried to add new reocrd and invoke "sync" function.
As I know, request url should be create property of api. However nothing happened.
pls give me an advice.
Related
I have a ProfileView which should show some user data. This is the first time I am trying to get data from MySql and showing it on a Sencha view.
The view
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['Ext.List', 'Ext.data.Store'],
config : {
layout: 'fit',
title : 'Profiel',
iconCls : 'user3',
cls : 'home',
scrollable : true,
styleHtmlContent : true,
html : ['<h1>Mijn Profiel</h1>'].join(""),
items : [Ext.create('Ext.List', {
title : 'Profile',
docked : 'top',
store : myStore,
show : function(list, opts) {
alert('list === ' + list);
console.log('List Shown: ' + list);
}
})]
}
});
var myStore = Ext.create("Ext.data.Store", {
model : "MyApp.model.User",
proxy : {
type : "ajax",
url : "php/get_user.php",
reader : {
type : "json"
// rootProperty : "users"
}
},
autoLoad : true
});
The data is returned correctly but nothing is shown, and this I am trying to figure out.
The Response
[{"ID":"19","USERNAME":"Annet","EMAIL":"annet#annet.nl"}]
I skipped the rootProperty because it is a single user.
The Model
Ext.define('MyApp.model.User', {
extend : 'Ext.data.Model',
config : {
fields : [{
name : 'ID',
type : 'int'
}, {
name : 'USERNAME',
type : 'string'
}, {
name : 'EMAIL',
type : 'string'
}]
}
});
So, why does the list not show anything ?
Update
I check to see it the store contains data and it does
map: Object
ext-record-1: Class
_data: Object
EMAIL: "annet#annet.nl"
ID: 19
USERNAME: "Annet"
id: "ext-record-1"
__proto__: Object
Why is it not picked up by the list? I tried DataView as well.
You need to use itemTpl, i changed code for you.
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['Ext.List', 'Ext.data.Store'],
config : {
layout: 'fit',
title : 'Profiel',
iconCls : 'user3',
cls : 'home',
scrollable : true,
styleHtmlContent : true,
html : ['<h1>Mijn Profiel</h1>'].join(""),
items : [Ext.create('Ext.List', {
title : 'Profile',
docked : 'top',
itemTpl : '<div>{ID} <span> {USERNAME} </span> <span> {EMAIL} </span> </div>',
store : myStore,
show : function(list, opts) {
alert('list === ' + list);
console.log('List Shown: ' + list);
}
})]
}
});
I am trying to load data into an extjs 4 TreeStore but while appending node, I am getting node.updateInfo is not a function error.
My model classes are as follows :
Dimension.js
Ext.define('ilp.model.Dimension', {
extend : 'Ext.data.Model',
require : [
'ilp.model.DimensionLevel'
],
fields : [
'actualName',
'displayName'
],
hasMany : {model : 'ilp.model.DimensionLevel', name : 'dimensionLevels'}
});
DimensionLevel.js
Ext.define('ilp.model.DimensionLevel', {
extend : 'Ext.data.Model',
fields : [
{name : 'name', type : 'string'},
{name : 'totalTrainees', type : 'int'}
]
});
and tree store code is as follows :
Ext.define('ilp.store.DimensionTree', {
extend : 'Ext.data.TreeStore',
requires : [
'ilp.model.Dimension',
'ilp.model.DimensionLevel'
],
model : 'ilp.model.Dimension',
root: {
name: 'Dimensions'
},
proxy: {
type: 'ajax',
url: 'http://localhost:8080/pentaho/content/cda/doQuery',
reader: {
type: 'pentahoReader',
root: 'resultset'
},
extraParams: {
path: 'RINXDashboards%2FCDAs%2FILP_Employee_Qeries.cda',
dataAccessId:'Get_All_Levels_From_All_Dimensions',
userid : 'joe',
password : 'password'
}
},
listeners: {
append : function(parentNode, newNode, index, options) {
if(newNode.get('text') != 'Root') {
console.log('newNode text value = ' + newNode.get('text'));
newNode.set('checked', null);
newNode.set('expandable', true);
if(Ext.ClassManager.getName(newNode) == "ilp.model.Dimension") {
newNode.set('expanded', true);
newNode.set('text', newNode.get('displayName'));
if(newNode.dimensionLevels().getCount() > 0) {
newNode.dimensionLevels().each(function(level) {
newNode.appendChild(level);
});
} else {
newNode.set('leaf', true);
}
}else if(Ext.ClassManager.getName(newNode) == "ilp.model.DimensionLevel") {
newNode.set('leaf', true);
newNode.set('text', newNode.get('name'));
}
}
}
}
});
I am getting above error on following line :
newNode.dimensionLevels().each(function(level) {
while debugging I have found that updateInfo() method of newNode is undefined.
Can anyone please tell me why this error is coming? I am totally clueless now !!!
May this is caused by the bug EXTJSIV-6051
see Sencha Forum for further infos
I think your problem comes from :
root: {
name: 'Dimensions'
},
root attribute must be of type: Ext.data.Model/Ext.data.NodeInterface/Object. So try to replace 'root' attribute by this:
root: {
text: "Dimensions",
leaf: false
}
Check Sencha doc for more information: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tree.Panel-cfg-root
Its same regarding my previous post. This is the changed json I am getting from the server.
{"property":[{"#length":"10","#mandatory":"true","#type":"String","#label":"Description","#id":"desc"},{"#mandatory":"false","#type":"Number","#label":"Code","#id":"code"},{"#mandatory":"true","#type":"Boolean","#label":"Check","#id":"check"},{"#mandatory":"true","#type":"DateField","#label":"Date","#id":"date"},{"#mandatory":"true","#type":"List","#label":"Types","#id":"types","options":[{"#value":"eee"},{"#value":"fff"}]}]}
I want to render the options array of Types in a combo-box.This is the model.
Ext.define('Property', {
extend : 'Ext.data.Model',
fields : [ {
name : 'id',
mapping : '#id'
}, {
name : 'label',
mapping : '#label'
}, {
name : 'type',
mapping : '#type'
}, {
name : 'mandatory',
mapping : '#mandatory'
}, {
name : 'length',
mapping : '#length'
} ],
// {name : 'values', mapping : 'options[0].#value'}], didnt work
hasMany : {
model : 'Options',
name : 'options'
}
});
Ext.define('Options', {
extend : 'Ext.data.Model',
// reader : {
type : 'json',
root : 'options'
},
fields : [ {
name : 'value1',
mapping : '#value'
} ],
associations : [ {
type : 'belongsTo',
model : 'Property'
} ]
});
Unable to find what is going wrong. Can someone suggest me the proper way of doing it?
I think you should look into the "associations" concept in the models, and use the hasMany/belongs to relationships. IMHO, it would make it easier and cleaner code, in the same way more usefull later in the code when you will need to use the data you're trying to set.
FOr more info about association please refer to this great link in sencha docs
HTH!
How are you configuring your combo store? If your data was fetched already you can just set the data for the combo by accessing raw data that was returned to the store.
I'm trying to load a store into a Select field in sencha touch 2.0 but got a strange proble:
For following code:
{
xtype : 'list',
store : 'Docbases',
itemTpl : 'Hello {docbase}!'
}, {
xtype : 'selectfield',
label : 'Docbase',
id : 'docbase',
store : 'Docbases',
displayField : 'docbase',
valueField : 'docbase',
placeHolder : 'Select a Value'
}
The list component can display well, while selectfield cannot display the value. When click on that selectfield, I got a console error:
Uncaught TypeError: Cannot call method 'get' of null
My Store is declared as:
Ext.define('FDMobileClient.store.Docbases', {
extend : 'Ext.data.Store',
requires : ['FDMobileClient.model.Docbase'],
model : 'FDMobileClient.model.Docbase',
autoLoad : true,
proxy : {
type : 'ajax',
url : '/MobileInternalProject/mobile/getDocbaseList.action',
reader : {
type : 'json',
root : 'docbases'
}
},
});
Does anyone have any ideas what I'm doing wrong :(
I'm appreciated all of your help. Thanks
Long
Your store seems fine to me. That's what I did to get is sorted:
in your view config:
config: {
...
docStore : null
...
},
in your view init:
initialize: function() {
...
docStore = Ext.create('FDMobileClient.store.Docbases');
...
},
finally the code for your selectfield
{
xtype : 'list',
store : 'Docbases',
itemTpl : 'Hello {docbase}!'
}, {
xtype : 'selectfield',
label : 'Docbase',
id : 'docbase',
store : docStore, //NOTE: no quotes!
displayField : 'docbase',
valueField : 'docbase',
placeHolder : 'Select a Value'
}
It worked for me, it should be OK for you too. Good luck, Alex
You should give your store an ID and use this identifier when referring to the store:
Ext.define('FDMobileClient.store.Docbases', {
extend : 'Ext.data.Store',
requires : ['FDMobileClient.model.Docbase'],
model : 'FDMobileClient.model.Docbase',
id : 'DocbaseStore'
...
}
{
...
store : 'DocbaseStore',
displayField : 'docbase',
...
}
I have the following json :
{"service":
{"description":"Export a list of amendments.","id":"504e1bf57e8d2fdd92b6c316cd000b25","name":"AT4AM_AmendmentsList","notes":"Export a list of amendments in a defined format, Word or XML.\r\n\r\n\"keywords\" : [ \"AT4AM\", \"DST\", \"Amendment\", \"Export\", \"Word\", \"XML\" ]","revision":"2-cd375cfd296ba97e934f12794d4930e9","status":"study","type":"entity",
"versions":[{"description":"v1.0 description...","id":"504e1bf57e8d2fdd92b6c316cd0017c0","version":1}]}}
I would like to display the list of versions into a grid.
here is my model :
Ext.define('XXXX.model.Version', {
extend: 'Ext.data.Model',
fields : [ {
name : 'id',
type : 'string'
}, {
name : 'description',
type : 'string'
}, {
name : 'version',
type : 'string'
}],
belongsTo: 'XXXX.model.Service',
proxy: {
type: 'rest',
id: 'id',
url : 'http://localhost:8080/xxxxx/services/service',
reader: {
type: 'json',
root: 'versions'
}
}
});
Thanks for help
Medley
use root: 'service.versions' in your reader's config.
Here is the solution I found :
1 - I added this to the model 'Service'
{type: 'hasMany', model: 'XXXX.model.Version', name: 'versions'}
2 - I used the configured RestProxy to make a GET request
Ext.ModelManager.getModel('XXXX.model.Service').load(serviceId, {
success: function(service) {
// Now, it is possible to access to all the versions of a service
service.versions().each(function(version) {
listOfVersions.push(version.data);
});
}
});
Regards
Medley