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.
Related
Ext.define('Form', {
extend: 'Ext.data.Model',
fields: [
{name:'type', type:'String'}
]
});
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Form',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/test.json',
reader: {
type : 'json',
root: 'types'
}
}
});
Ext.define('DForms', {
extend: 'Ext.panel.Panel',
bodyPadding: 12,
layout : 'auto',
autoScroll : true,
items: [{
xtype:'selectcombo',
queryMode:'local',
emptyText: 'Select Condition',
store:store,
displayField: 'type',
valueField: 'type',
width : 200,
typeAhead : true
}],
});
When this loads, the selectcombo is empty, nothing gets loaded, i have searched through many sites, and can't find anything to help. Any suggestions would be great
The xtype you look for is combo, the store type is JsonStore because the ArrayStore will not interpret the json from the types root as you might expect. I can not simulate the ajax request here though.
Ext.onReady(function() {
Ext.define('Form', {
extend: 'Ext.data.Model',
fields: [{
name: 'type',
type: 'String'
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'Form',
data: [{
type: 'Aaaaaaa'
}, {
type: 'Bbbbbb'
}, {
type: 'Ccccccccccc'
}, {
type: 'Ddddddd'
}]
});
Ext.define('DForms', {
extend: 'Ext.panel.Panel',
bodyPadding: 12,
layout: 'auto',
autoScroll: true,
items: [{
xtype: 'combo',
queryMode: 'local',
emptyText: 'Select Condition',
store: store,
displayField: 'type',
valueField: 'type',
width: 200,
typeAhead: true
}],
});
Ext.create('DForms', {
renderTo: Ext.getBody()
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" />
I think type in fields is case-sensitive. So try
fields :[{name : 'type', type : 'string'}]
If still not working, as Tejas1991 pointed out check the content of your json.
I have a nested JSON and I cannot seem to extract the nested array. I am not sure if I set up my store and models correctly. It seems right. As you can see at the bottom of this post, when I try to get the nested part out, it doesn't work.
JSON data:
{
"data":{
"name":"John",
"age":"23",
"gender":"Male",
"purchase":[
{
"item":"shirt",
"qty":1,
"price":10
},
{
"item":"hat",
"qty":2,
"price":25
},
{
"item":"pants",
"qty":1,
"price":15
}
]
},
"success":true,
"errorMsg":""
}
Store:
Ext.define('Pvm.store.MyStore', {
extend: 'Pvm.store.PvmBaseStore',
requires: [
'Pvm.model.Customer'
],
model: 'Pvm.model.Customer',
autoLoad: false
});
Customer Model:
Ext.define('Pvm.model.Customer', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
fields: [{
name: 'name',
type: 'auto'
}, {
name: 'age',
type: 'auto'
}, {
name: 'gender',
type: 'auto'
}],
associations: {
type: 'hasMany',
model: 'Pvm.model.Purchase',
name: 'purchase',
associationKey: 'purchase'
},
proxy: {
type: 'ajax',
actionMethods: {
create: 'POST',
read: 'POST', // changed read's method to POST (from GET) so we get the parameters as form data (not in URL, for security reasons)
update: 'POST',
destroy: 'POST'
},
url: '/pvmsvr/uiapi?cmd=readXml',
reader: {
type: 'json',
rootProperty: 'data'
}
}
});
Purchase Model:
Ext.define('Pvm.model.Purchase', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
fields: [{
name: 'item',
type: 'auto'
}, {
name: 'qty',
type: 'auto'
}, {
name: 'price',
type: 'auto'
}],
associations: {
type: 'belongsTo',
model: 'Pvm.model.Customer'
}
});
Controller Code:
onStoreLoaded: function(store, records, successful, eOpts) {
console.log(store); // works
console.log(records); // works
console.log(records[0].get('name')); // works
console.log(records[0].purchase(); // doesn't work; returns 'undefined'
}
I am idiot. I needed the child model's class name in the parent's requires...
I have a simple model, let's say:
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstname', type: 'string'},
{name: 'lastname', type: 'string'}
]
});
And a json file that looks like this:
{
"DatabaseInJSON": {
"Users": [
{
"KeyFirstName": "John",
"KeyLastName": "Doe"
},{
"KeyFirstName": "James",
"KeyLastName": "Howlett"
}
],
"OtherStuffWeDontCareAbout": [
...
]
}
}
My question is:
If I create a store like this, how can i map the attribute "firstname" from my model to "KeyFirstName" from my json ?
Ext.define('my.custom.Store', {
extend: 'Ext.data.Store',
model: 'UserModel',
proxy: {
type: 'ajax',
url: 'path/to/my/file.json',
reader: {
type: 'json',
rootProperty: 'DatabaseInJSON'
}
}
});
You need to either employ mapping or a convert function
Have a look at the demo here which demonstrates both in action.
For the sake of the demo I turned your store into a memory proxy store and you are I presume also accessing your rootProperty wrong as it should be rootProperty: 'DatabaseInJSON.Users'
Code:
Ext.application({
name: 'Fiddle',
launch: function() {
myData = {
"DatabaseInJSON": {
"Users": [{
"KeyFirstName": "John",
"KeyLastName": "Doe"
}, {
"KeyFirstName": "James",
"KeyLastName": "Howlett"
}],
"OtherStuffWeDontCareAbout": {}
}
};
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'firstname',
mapping: 'KeyFirstName',
type: 'string'
}, {
name: 'lastname',
convert: function(v, record) {
return record.data.KeyLastName;
},
type: 'string'
}]
});
Ext.define('my.custom.Store', {
extend: 'Ext.data.Store',
model: 'UserModel',
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'DatabaseInJSON.Users'
}
}
});
myStore = Ext.create('my.custom.Store', {
data: myData
});
console.log(myStore.getRange());
}
});
Generally your Json properties should match the same names of your fields so that the reader can read them properly, to map 'KeyFirstName' to 'firstname' I think your best option would be to create a mapping in the field definition on the model.
This would apply this globally for all requests and I believe it would reverse the mapping when it come to saving the data.
To use the mapping in your case, you would need something like:
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstname', type: 'string', mapping: function(data) { return data.KeyFirstName; } },
{name: 'lastname', type: 'string', mapping: function(data) { return data.KeyLastName; } }
]
});
Other than changing the format of the JSON data, the only other way I can think of would be to override the read or getResponseData method of the JsonReader
i have json data like this
{"GetStudentDetails":
{"TotalCount":5,
"RootResults":[
{"city":"West Chester","country":"USA","state":"PA ","student_id":100},
{"city":"Philly","country":"USA","state":"PA","student_id":101},
{"city":"Buffalo","country":"USA","state":"NY","student_id":102},
{"city":"Naigra City","country":"USA","state":"NY","student_id":103},
{"city":"West Chester","country":"USA","state":"PA","student_id":104}]
}
}
How to get this data into a store?
i am trying using a model like this.
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'TotalCount' }
],
hasMany: [{ model: 'RootResults', name: 'RootResult'}]
});
Ext.define("RootResults", {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'city' },
{ type: 'string', name: 'country' },
{ type: 'string', name: 'state' },
{ type: 'string', name: 'student_id' }
],
belongsTo: 'User'
});
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: 'users.json',
reader: {
type: 'json'
}
}
});
How should my model be? when i am giving some more simple json i am getting the store loaded. i think the problem is with mapping?
Define model as
Ext.define("RootResults", {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'city' },
{ type: 'string', name: 'country' },
{ type: 'string', name: 'state' },
{ type: 'string', name: 'student_id' }
],
});
And inside the reader definition add two parameters:
root: 'GetStudentDetails.RootResults'
totalProperty: 'GetStudentDetails.TotalCount'
Something like that... Main idea - don't try to bring internal JSON structure to your model - it should be reader responsibility to properly parse it.
I try to load fields config to json store via metadata. The json is:
{
"rows":[
{
"datev":"02.01.2011",
"w1":"100",
"w2":"200"
},
{
"datev":"02.01.2011",
"w1":"300",
"w2":"50"
},
{
"datev":"03.01.2011",
"w1":"10",
"w2":"450"
}
],
"metaData":{
"fields":[
{
"name":"datev"
}
],
"root":"rows"
}
}
and my store is:
var test = new Ext.data.JsonStore({
url: 'test.php'
});
test.load();
The metadata doesn't load. What is wrong with the code?
I think you need to add a JSON reader
var reader = new Ext.data.JsonReader({
fields: []
});
var store = new Ext.data.Store({
nocache : true,
reader : reader,
autoLoad : true,
remoteSort : true,
proxy : new Ext.data.HttpProxy({
url : '/getjson?queryable=featureType&featureType=Electronic%20Device',
method : 'GET'
})
or maybe
var store = new Ext.data.JsonStore({
url: 'somewhere',
fields: []
});
You are not specifying the Id Property, and neither the Root property. this is my code i hope this help
var EStore = new Ext.data.JsonStore
({
api: { read: 'getAssignedJobs',
create: 'createAssignedJobs',
update: 'updateAssignedJobs'
},
root: 'jobData',
idProperty: 'Id',
autoSave: true,
batch: false,
successProperty: 'success',
writer: new Ext.data.JsonWriter({ encode: true, writeAllFields: true }),
fields: [
{ name: 'Id', type: 'int' },
{ name: 'ResourceId', mapping: 'fitter_id', type: 'int' },
{ name: 'StartDate', type: 'date', format: 'd/m/Y G:i' },
{ name: 'EndDate', type: 'date', format: 'd/m/Y G:i' },
{ name: 'status', type: 'int' },
{ name: 'job_id', type: 'int' }
]
});