We Keep Coding

TreePanel: Store is not loading

It's my first time working with ExtJS 6, and i'm having some problems with a TreePanel... Here are my scripts:
TipoCausasTree.js
Ext.define('Incidencias.view.main.TipoCausasTree',
{
extend: 'Ext.tree.Panel',
xtype: 'tipoCausasTree',
alias: 'tipoCausasTree',
reference: 'tipo-causas-tree',
requires: [
'Incidencias.view.main.TipoCausasController',
'Incidencias.store.TipoCausasTreeStore',
'Ext.data.*',
'Ext.grid.*',
'Ext.tip.*',
'Ext.tree.*'
],
store: {
type: 'TipoCausasTreeStore'
},
controller: 'tipoCausas',
id: 'treepanelCausa',
displayField: 'text',
loadMask: true,
collapsed: false,
animate: false,
renderTo: Ext.getBody(),
root: {
nodeType: 'async',
text: "Tipos De Causas",
id: 'root',
expanded: true
},
listeners: {
contextmenu: 'onCtxMenu'
}
});
TipoCausasTreeStore.js
Ext.define('Incidencias.store.TipoCausasTreeStore', {
extend: 'Ext.data.TreeStore',
alias: 'store.TipoCausasTreeStore',
requires: [
'Incidencias.model.TipoCausasModel'
],
model: 'Incidencias.model.TipoCausasModel',
autoLoad: true,
lazyFill: true,
proxy: {
type: 'ajax',
url: context + 'listadoCausasTipoAdminTree.action',
reader: {
type: 'json',
root: function(o) {
return o.data || o.children
}
}
},
});
And TipoCausasModel.js
Ext.define('Incidencias.model.TipoCausasModel', {
extend: 'Ext.data.Model',
fields : [
{name:'id', type:'string'},
{name:'text', type:'string'},
{name:'iconCls', type:'string'},
{name:'cls', type:'string'}
]
});
I can see the tree root in my panel, but my store is not loading... If I check network, nobody is calling to listadoCausasTipoAdminTree action...
Can you help me? Thanks
P.S. Srry for my english...
Update: When I execute
Ext.getCmp('treepanelCausa').store.proxy.type
I get "memory" in console, and
Ext.getCmp('treepanelCausa').store.proxy.url
Is undefined...

JSonStore Error with d.read

JsOnStore Coding
Ext.define('RouteSeqModel', {
extend: 'Ext.data.Model',
fields: [{name: '_id', type: 'number'}, 'Route_Seq','Location_Name']
});
var RouteSeqStore = Ext.create('Ext.data.JsonStore', {
model: 'RouteModelSeq',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'get-routeseq.php',
api: {
create: 'insert-routeseq.php',
//read: 'http://visual04/ModuleGestion/php/Pays.php?action=read',
update: 'update-routeseq.php',
//destroy: 'http://visual04/ModuleGestion/php/Pays.php?action=destroy'
},
actionMethods: 'POST',
extraParams: {
'_id' : '0',
},
reader: {
type: 'json',
//idProperty: '_id'
},
writer: {
type: 'json',
//id: '_id'
}
}
});
this is the combo box when selected changed then pass the extraparams to get the data and show at grid panel
xtype: 'combobox',
width: 191,
store: RouteNameStore,
displayField : "Route_Code",
fieldLabel: 'Route Code',
labelWidth: 70,
allowBlank: false,
editable: false,
listeners: {
select: function( combo, records, eOpts ) {
console.log("Combo selected _id : "+records[0].get('_id'));
RouteSeqStore.load({
params:{
_id: records[0].get('_id')
}
});
}
}
and get-routeseq.php get work fine, this is firebug return JSON data from get-routeseq.php
[{"Route_ID":"1","Route_Seq":"1","Route_LocationID":"1","_id":"1","Location_ID":"1","Location_Name":"TRY","AddBy_ID":"2"},
{"Route_ID":"1","Route_Seq":"2","Route_LocationID":"2","_id":"2","Location_ID":"2","Location_Name":"ABC","AddBy_ID":"2"}]
all working fine, but firebug with this error
TypeError: d.read is not a function
...f(p==k){if(a+E+l.width>(O>=0?u.x+u.width-b:b-u.x)){p=M}}else{if(a+E>l.width){p=k...
why?

replace model: 'RouteModelSeq',
with model: 'RouteSeqModel',

EXTjs grid model json noob

What am I doing wrong? Of all the fields displayed in the grid only Working Group. EXTjs 4.2.1.
Tried different variants that have been found here, but, alas, nothing has helped understand what is wrong here.
Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'WorckGroup', type: 'string' },
{ name: 'Statistics', type: 'auto' },
{ name: 'Specialist', type: 'string', mapping: 'Statistics.Specialist' },
{ name: 'ScallCount', type: 'int', mapping: 'Statistics.SCallCount' },
{ name: 'AverageDuration', type: 'auto', mapping: 'Statistics.AverageDuration' }
]
});
var store = Ext.create('Ext.data.Store', {
model: 'myModel',
proxy: {
type: 'ajax',
url: '/omnireports/ajaxgrid',
reader: {
type: 'json',
}
},
autoLoad: true
});
var basegrid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ header: 'WG', width: 200, dataIndex: 'WorckGroup' },
{ header: 'SP', dataIndex: 'Specialist' },
{ header: 'SCC', dataIndex: 'SCallCount' },
{ header: 'AD', dataindex: 'AverageDuration' }
], });
json
[
{"WorckGroup":"3D",
"Statistics":[
{"Specialist":"В А","SCallCount":64,"AverageDuration":0.1136067},
{"Specialist":"К Т","SCallCount":170,"AverageDuration":0.1045816}]
{"WorckGroup":"SD",
"Statistics":[
{"Specialist":"B A","SCallCount":197,"AverageDuration":0.1364689}]
}
]

Your mappings don't make sense. Statistics is an array, so Statistics.Specialist doesn't map to anything.
Your root for the reader should probably be WorckGroup.Statistics and you should include the WorckGroup in each item.
reader: {
type: 'json',
root: 'WorckGroup.Statistics'
}
Then remove the mapping from each field in the model.

ExtJS store, cannot load data to grid

Console is clear. Grid is empty (only column titles are shown). How can I check if data is correctly loaded to the store? It seems to me that the store's autoLoad method is not triggered somehow. Here is the grid:
Ext.define('NameSpace.view.Clients', {
requires: [
'Ext.tree.Panel',
'Ext.grid.Panel'
],
extend: 'Ext.tab.Panel',
title: 'Clients',
alias: 'widget.viewClients',
items: [
{
xtype: 'panel',
title: 'All Clients',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'treepanel',
title: 'Tree Panel',
width: 200,
resizable: true
},
{
xtype: 'gridpanel',
title: 'Clients List',
store: Ext.getStore('storeClients'),
flex: '1',
columns: [
{ text: 'Name', dataIndex: 'first_name' },
{ text: 'Last Name', dataIndex: 'last_name' },
{ text: 'Phone Number', dataIndex: 'phone' }
]
}
]
}
],
initComponent: function () {
this.callParent(arguments);
}
});
And here is the store (Model contains nothing but extend and fields configs):
Ext.define('NameSpace.store.Clients', {
extend: 'Ext.data.JsonStore',
proxy: {
type: 'ajax',
url: 'http://test.local/client',
reader: {
type: 'json',
root: 'records'
}
},
autoLoad: true,
constructor: function (config) {
this.initConfig(config);
}
});
Ext.create('NameSpace.store.Clients', {
model: 'Clients',
storeId: 'storeClients'
});

Move
model: 'Clients',
storeId: 'storeClients'
into store definition, and get rid of store creation call. Store will be created automatically.

Why do you override the store constructor?
If you actually need to do it, you should add this.callParent(arguments) to the constructor, otherwise the original constructor (which does a lot) won't run.

You just need to change
store: Ext.getStore('storeClients')
To This :
store: 'Clients'

I think you need to write field when you create store.
i.e.
fields:[ 'first_name', 'last_name', 'phone']

ExtJs 4 Grid Paging

I'm trying to make data grid with paging using ExtJs framework, but unfortunately my code doesn't work. Maybe some of you has already settled this such problem.
Json-reply from server is:
{
"totalCount":"2",
"companies":[
{
"id":"1",
"name":"Name1",
"region":"Reg1",
"address":"Addr1",
"dealCount":"3",
"dealAmount":"19250",
"latestDealDate":"2012-01-09"
},
{
"id":"2",
"name":"Name2",
"region":"Reg2",
"address":"Addr2",
"dealCount":"2",
"dealAmount":"12150",
"latestDealDate":"2012-01-08"
}
]
}
JavaScript code, which creates store, grid, e.t.c. is:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ModelManager',
'Ext.layout.*'
]);
Ext.onReady(function(){
// Define data model
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'int'
},
'name', 'region', 'address',
{
name: 'dealCount',
type: 'int'
},
{
name: 'dealAmount',
type: 'int'
},
{
name: 'latestDealDate',
type: 'string'
}
],
idProperty: 'id'
});
// Create data store
var companies = Ext.create('Ext.data.Store', {
pageSize: 50,
model: 'Company',
proxy: Ext.create('Ext.data.proxy.Ajax', {
url: 'service/companies-data.php'
}),
reader: Ext.create('Ext.data.reader.Json', {
root: 'companies',
totalProperty: 'totalCount'
}),
sorters: [{
property: 'name',
direction: 'ASC'
}]
});
// Create data grid
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 500,
store: companies,
columns: [
{
text: 'Name',
dataIndex: 'name'
},
{
text: 'Region',
dataIndex: 'region'
},
{
text: 'Address',
dataIndex: 'address'
},
{
text: 'Deal Count',
dataIndex: 'dealCount'
},
{
text: 'Deal Amount',
dataIndex: 'dealAmount'
},
{
text: 'Latest Deal Date',
dataIndex: 'latestDealDate'
}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: companies,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
// Load first data page
companies.loadPage(1);
});
Firebug shows, that server responds with json-data, but grid remains empty. How can I fix it?

You should define reader inside proxy (at least that helped for me). Eg:
proxy: Ext.create('Ext.data.proxy.Ajax', {
url: 'service/companies-data.php',
reader: Ext.create('Ext.data.reader.Json', {
root: 'companies',
totalProperty: 'totalCount'
})
})
Working sample: http://jsfiddle.net/ycDzL/3/