Model
Ext.define('MyDesktop.model.mail.MailFoldersModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.String'
],
fields: [
{
type: 'string',
name: 'id'
},
{
type: 'string',
name: 'idParent'
},
{
type: 'string',
name: 'text'
}
]
});
My TreeStore
Ext.define('MyDesktop.store.mail.MailFoldersStore', {
extend: 'Ext.data.TreeStore',
requires: [
'MyDesktop.model.mail.MailFoldersModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MailFoldersStore',
model: 'MyDesktop.model.mail.MailFoldersModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'http://url/mail/folders',
reader: {
type: 'json',
rootProperty: 'items',
successProperty: 'success'
}
},
root: {
text: 'root',
iconCls: 'mail-folders-owner'
}
}, cfg)]);
}
});
Store is autoloaded, all works correctly, store contains 11 records.
var MailFoldersStore = Ext.create('MyDesktop.store.mail.MailFoldersStore', {
storeId: 'MailFoldersStore'
});
If I set autoLoad to false and trying to load by manually - store is empty, 0 records.
var MailFoldersStore = Ext.create('MyDesktop.store.mail.MailFoldersStore', {
storeId: 'MailFoldersStore'
});
MailFoldersStore.load({
callback : function(records, operation, success) {
console.log(records);
}
});
What can be a reason for this behaviour?
I also has same problem. I am using Extjs 5.1. After googling I found one complex solution which needs us to modify the framework.
See the below link if it can help you.
http://www.sencha.com/forum/showthread.php?154823-listeners-quot-exception-quot-in-proxy.ajax-on-TreeStore-do-not-work
Related
So I have upgraded from extjs4 to extjs6 and this store always have this error:
No type specified for writer.create
This code has two uses:
For getting the data for the initial page
For getting the data for whenever a button is clicked.
Whenever I comment out the proxy.writer code portion, it will produce the data for the initial page.
But whenever I won't comment it out, it will not get the data for the initial page.
And it will also return this error whenever I clicked a button:
Uncaught TypeError: items.slice is not a function
So my question is, is the writer portion have wrong syntax or something since it is updated to extjs6?
P.S. I tried to change the
this.callOverridden to this.callParent since it states that the this.callOverridden is already deprecated, still has the same error.
Ext.define('Stm.store.stmpdate', {
extend: 'Extends.data.Store',
requires: [
'Cstm.Setting',
'Stm.model.stmpdate'
],
model: 'Stm.model.stmpdate',
pageSize: Stm.Const.controller.dataCountLimit,
remoteSort: true,
proxy: {
type: 'ajax',
url: Cstm.Setting.getEntryUrl() + '/stm/stm-update/stm-update',
reader: {
type: 'json',
rootProperty: 'data'
},
writer: Ext.data.writer.Json.override({
getRecordData: function() {
var data = this.callOverridden(arguments);
var record = arguments[0];
if ( record.associations.length > 0 ) {
Ext.Array.each(record.associations.keys, function(key) {
data[key] = [];
var assocStore = record[key]();
Ext.Array.each(assocStore.data.items, function(assocItem) {
data[key].push(assocItem.data);
});
});
}
return data;
}
}),
api: {
create: Cstm.Setting.getEntryUrl() + '/stm/stm-update/application',
update: Cstm.Setting.getEntryUrl() + '/stm/stm-update/approval'
},
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
}
},
sorters: [
{property: 'aplDatetime', direction: 'DESC'},
{property: 'siteDomain', direction: 'ASC'},
{property: 'pageName', direction: 'ASC'}
]
});
Model:
Ext.define('Stm.model.stmpdate', {
extend: 'Ext.data.Model',
fields: [
{name: 'siteId', type: 'integer'},
{name: 'siteName', type: 'string'},
{name: 'siteUrl', type: 'string'},
{name: 'tmpId', type: 'integer', defaultValue: 1},
{name: 'updType', type: 'string'}
],
hasMany: [{
model: 'Stm.model.ServerInfo',
name: 'servers',
associationKey: 'servers',
reference: 'tmpId'
}]
});
Yes, you are using override in a way that may have worked in ExtJS 4 but is AFAIK unsupported across all versions of ExtJS.
What you want to do is define your custom writer as a new class:
Ext.define('MyApp.app.data.MyCustomJsonWriter', {
extend: 'Ext.data.writer.Json',
alias: 'writer.mycustomjson',
getRecordData: function() {
var data = this.callParent(arguments);
var record = arguments[0];
if ( record.associations.length > 0 ) {
Ext.Array.each(record.associations.keys, function(key) {
data[key] = [];
var assocStore = record[key]();
Ext.Array.each(assocStore.data.items, function(assocItem) {
data[key].push(assocItem.data);
});
});
}
return data;
}
});
require that class from your store:
requires: [
'MyApp.app.data.MyCustomJsonWriter'
]
and then instantiate it by alias:
writer: {
type: 'mycustomjson'
}
I'm using Sencha Touch 2.4, with Sencha Cmd 6.1.x (so I believe I'm using Ext JS 6). I've got the following model and store:
Ext.define('App.model.User', {
extend: 'Ext.data.Model',
fields: [{
name: 'organizationId',
type :'int',
reference: {
type: 'Organization',
association: 'UsersByOrganization',
role: 'organization',
inverse: 'users'
}
}, {
"name": "matricola",
"type": "int"
}]
});
and
Ext.define('App.model.Organization', {
extend: 'Ext.data.Model',
fields: ['name']
});
I load my stores (with a 'sql' proxy) using the usual way, but I cannot find my reference anywhere. I simply get the records and I cannot call "users" or its inverse.
Any idea?
Sencha Touch 2.4 and ExtJS 6 are two different toolkits. Syntax for creating models and stores are similar in both, but not in all cases.
I believe what you are looking for is the StoreManager. If you have defined a store like so:
Ext.define('App.store.User', {
extend: 'Ext.data.Store',
storeId: 'User',
model: 'User'
});
Then you can reference the store like so:
// Return a list of users
Ext.getStore('User').getRange();
The code below works for me on Ext JS 6. Maybe you can model yours after this example:
Ext.define('App.model.Customer', {
extend: 'Ext.data.Model',
idProperty: 'customerNumber',
fields: [
{ name: 'customerNumber', type: 'int' },
{ name: 'customerName', type: 'string' },
{ name: 'contactLastName', type: 'string' },
{ name: 'contactFirstName', type: 'string' }
],
proxy: {
type: 'ajax',
url: '../../../api/CustomersAssociationsReference',
reader: {
type: 'json',
rootProperty: 'customers',
totalProperty: 'count'
}
}
});
Ext.define('App.model.Order', {
extend: 'Ext.data.Model',
idProperty: 'orderNumber',
fields: [
{ name: 'orderNumber', type: 'int' },
{
name: 'customerNumber', reference: {
type: 'App.model.Customer',
inverse: 'orders'
}
},
{ name: 'orderDate', type: 'string' },
{ name: 'status', type: 'string' }
],
proxy: { // Note that proxy is defined in the Model, not the Store
type: 'ajax',
url: '../../../api/OrdersAssociationsReference',
reader: {
type: 'json',
rootProperty: 'orders',
totalProperty: 'count'
}
}
});
Ext.application({
name: 'App',
models: ['Customer', 'Order'],
stores: ['Customers', 'Orders'],
launch: function () {
var customersStore = Ext.getStore('Customers');
customersStore.load(function (records, operation, success) {
var customer = records[0],
orders = customer.orders(),
order;
orders.load(function (records, operation, success) {
console.log('Orders for ' + customer.get('customerName') + ':\n-------------------------------------------------------');
for (i = 0, len = records.length; i < len; i++) {
order = records[i];
console.log('orderNumber: ' + order.get('orderNumber'));
console.log('orderDate: ' + order.get('orderDate'));
console.log('status: ' + order.get('status'));
console.log('-------------------------------');
}
})
});
}
});
as a learning project for sencha-touch2 i'm trying to populate a store with data from https://www.hnsearch.com/api
i have created the model and store as follow and in the inspector view i can see that data is received and correctly mapped.
the problem i cannot figure out is, how to show a sencha xtype:list element with the actual result items nested in the json (Model: SearchResultItem). i tried the following, which will give me a list with ONE list item with the results in it, but i would like to have a list item for each search result.
models:
Ext.define('senchaHackerNews.model.Search', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'hits',
type: 'int'
}],
associations: {
type: 'hasMany',
name: 'results',
model: 'senchaHackerNews.model.SearchResults',
associationKey: 'results'
}
}
});
Ext.define('senchaHackerNews.model.SearchResults', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'score',
type: 'float'
}],
associations: {
type: 'hasOne',
name: 'item',
model: 'senchaHackerNews.model.SearchResultItem',
associationKey: 'item'
}
}
});
Ext.define('senchaHackerNews.model.SearchResultItem', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'username',
type: 'string'
}, {
name: 'title',
type: 'string'
}, {
name: 'points',
type: 'int'
}, {
name: 'url',
type: 'string'
}, {
name: 'domain',
type: 'string'
}]
}
});
store:
Ext.define('senchaHackerNews.store.Search', {
extend: 'Ext.data.Store',
requires: ['senchaHackerNews.model.Search'],
config: {
storeId: 'hnSearchStore',
model: 'senchaHackerNews.model.Search',
autoload: false,
proxy: {
type: 'jsonp',
// url: 'http://api.thriftdb.com/api.hnsearch.com/items/_search?q=ipad',
reader: {
type: 'json',
rootProperty: ''
},
callbackKey: 'callback'
}
}
});
view:
Ext.define('senchaHackerNews.view.Search', {
extend: 'Ext.navigation.View',
alias: 'widget.hnSearch',
xtype: 'hnSearch',
requires: ['Ext.field.Search'],
initialize: function() {
var xtpl = new Ext.XTemplate('<tpl for="results">{item.username} ---- {item.title} | <br></tpl>');
this.add([
{
xtype: 'container',
title: 'Search HN',
layout: 'vbox',
items: [{
xtype: 'searchfield',
placeHolder: 'Search HN News (at least 3 chars)',
listeners: {
scope: this,
clearicontap: this.onSearchClearIconTap,
keyup: this.onSearchKeyUp
}
}, {
xtype: 'list',
flex: 1,
itemTpl: xtpl,
store: 'hnSearchStore',
emptyText: 'No Matching Items',
}]
}
]);
this.callParent(arguments);
},
onSearchKeyUp: function(field) {
if(field.getValue() != '' && field.getValue().length > 3) {
var store = Ext.StoreMgr.get('hnSearchStore');
store.setProxy({
url: 'http://api.thriftdb.com/api.hnsearch.com/items/_search?q='+field.getValue()
});
store.load();
} else if(field.getValue() == '') {
Ext.StoreMgr.get('hnSearchStore').removeAll();
}
},
onSearchClearIconTap: function() {
Ext.StoreMgr.get('hnSearchStore').removeAll();
}
});
Example JSON is here http://api.thriftdb.com/api.hnsearch.com/items/_search?q=facebook&pretty_print=true
AFAIK if you are looking for array of items to be displayed the you should use items model in store and rootProperty pointing to item so
Ext.define('senchaHackerNews.store.Search', {
extend: 'Ext.data.Store',
requires: ['senchaHackerNews.model.SearchResults'],
config: {
storeId: 'hnSearchStore',
model: 'senchaHackerNews.model.SearchResults',
autoload: false,
proxy: {
type: 'jsonp',
// url: 'http://api.thriftdb.com/api.hnsearch.com/items/_search?q=ipad',
reader: {
type: 'json',
rootProperty: 'results'
},
callbackKey: 'callback'
}
}
});
Note the change in model & rootProperty attribute
I need to Extjs Tree panel with dynamic remote data(JSON) for file listing.
and the date field name is not fit to Extjs tree store field. so I need to re-mapping to make fit, like adding leaf field and text field.
the return JSON data is like this:
[{
"id":1,
"yourRefNo":"A91273",
"documentName":"Test Document",
"documentFileName":"login_to_your_account-BLUE.jpg",
"updatedBy":"root root",
"updatedAt":"\/Date(1343012244000)\/"
}]
and this is the tree panel:
Ext.define('App.view.Document.DocumentList', {
extend :'Ext.tree.Panel',
rootVisible : false,
alias: 'widget.Document_list',
store: 'DocumentList_store'
});
and this is the store:
Ext.define('App.store.DocumentList_store', {
extend: "Ext.data.TreeStore",
model: 'App.model.DocumentList_model',
proxy: {
type: 'ajax',
url: '/Document/GetDocumentList/',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: '' // there is no root
},
pageParam: undefined,
startParam: undefined,
pageParam: undefined
},
root: {
children: []
},
autoLoad: false,
listeners: {
append: function (thisNode, newChildNode, index, eOpts) {
console.log(newChildNode.get('documentName')); // 'Test Document'
newChildNode.set('leaf', true);
newChildNode.set('text', newChildNode.get('documentName'));
// it does not add to tree panel.
}
}
});
after load data from server, and it call the append function well. but after that, nothing show up in tree panel.
What I am doing wrong? please advice me.
Thanks
[EDIT]
This is the model,
Ext.define("App.model.DocumentList_model", {
extend: "Ext.data.Model",
fields: [
'id','yourRefNo','documentName','documentFileName','updatedBy','updatedAt'
]
});
I'm fusing your code with a piece of working code of mine. Try see if this works:
Model:
Ext.define("App.model.DocumentList_model", {
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'yourRefNo'},
{name: 'documentName' },
{name: 'documentFileName'},
{name: 'updatedBy'},
{name: 'updatedAt', convert: function(v) { return v;} }, // Notice you can do field conversion here
{name: 'leaf', type: 'boolean', defaultValue: false, persist: false},
],
proxy: {
type: 'ajax',
url: '/Document/GetDocumentList/',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: 'children'
},
},
});
Store:
Ext.define('App.store.DocumentList_store', {
extend: "Ext.data.TreeStore",
model: 'App.model.DocumentList_model',
root: {
text: 'Root',
id: null,
expanded: true
},
autoLoad: false,
});
JSON Response:
{
"success":true,
"children":[{
"id":1,
"yourRefNo":"A91273",
"documentName":"Test Document",
"documentFileName":"login_to_your_account-BLUE.jpg",
"updatedBy":"root root",
"updatedAt":"\/Date(1343012244000)\/",
"leaf":false
}]
}
i made an app in architect. My store is this
Ext.define('MyApp.store.storeMain', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.modelMain'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
storeId: 'storeMain',
model: 'MyApp.model.modelMain',
pageSize: 50,
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'Main',
totalProperty: 'Main.totalCount'
}
}
}, cfg)]);
}});
This is my button:
{
xtype: 'button',
text: 'Submit',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
and this is the function
onButtonClick: function(button, e, options) {
storeMain.load({
url:'test.json'
})
}
},
But it is not loading the store. Instead it is giving this error: storeMain is not defined. I have a viewport.js and other files like the storeMain.js
There is no variable storeMain anywhere. You need to call Ext.getStore('storeMain') to get store reference.