EXTjs treegrid - correct model - json

A very simple example, but it does not work. List of Working Groups looped. What am I doing wrong? How to correct write a model for this json. Docs
http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.data.reader.Reader
Below is a screenshot result.
https://ps.vk.me/c537518/u155966612/doc/2ee8ec3e7718/1234.png
JS code.
Ext.define('WorckGroup', {
extend: 'Ext.data.Model',
fields: [
{ name: 'text', type: 'string', mapping: 'WorckGroup' },
],
hasMany: { name: 'children', model: 'UserReport', associationKey: 'UserReport' }
});
Ext.define('UserReport', {
extend: 'Ext.data.Model',
fields: [
{ name: 'text', type: 'string', mapping: 'Specialist' },
],
belongsTo: 'WorckGroup'
});
var store = new Ext.data.TreeStore({
model: 'WorckGroup',
proxy: {
type: 'ajax',
url: '/omnireports/ajaxgrid'
},
autoLoad: true,
folderSort: true
});
Ext.define('basegrid', {
extend: 'Ext.tree.Panel',
xtype: 'tree-grid',
title: 'Core Team Projects',
height: 300,
useArrows: true,
rootVisible: false,
multiSelect: true,
singleExpand: false,
initComponent: function () {
this.width = 500;
Ext.apply(this, {
store: store,
columns: [{
xtype: 'treecolumn',
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'text'
},]
});
this.callParent();
}
});
json
[{"WorckGroup":"Группа поддержки 3D",
"UserReport":[
{"Specialist":"Вагин Александр Константинович","SCallCount":64,"AverageDuration":0.1136067,"leaf":true},
{"Specialist":"Кистерева Татьяна Алексеевна","SCallCount":171,"AverageDuration":0.1058641,"leaf":true},
{"Specialist":"Лысенко Алексей Валентинович","SCallCount":71,"AverageDuration":0.4269940,"leaf":true}]},
{"WorckGroup":"Группа поддержки сервиса КСУП",
"UserReport":[
{"Specialist":"Болгов Руслан Евгеньевич","SCallCount":62,"AverageDuration":0.1093749,"leaf":true},
{"Specialist":"Костин Алексей Алексеевич","SCallCount":17,"AverageDuration":0.1125816,"leaf":true},
{"Specialist":"Мироненко Анна Владимировна","SCallCount":172,"AverageDuration":0.0632347,"leaf":true},
{"Specialist":"Ползиков Мирослав Александрович","SCallCount":315,"AverageDuration":0.0945766,"leaf":true},
{"Specialist":"Тахтенков Николай Владимирович","SCallCount":7,"AverageDuration":0.2342261,"leaf":true}]}

Related

Populate Combo box with JSON file, ExtJs 4.x.x

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.

json data is not loading in Ext.tree.panel

I have defined Ext.tree.Panel and on change of combo value, I am calling
tree.getStore().load();
Here is my treepanel code
Ext.define('InboxTreePanel', {
extend: 'Ext.tree.Panel',
xtype: 'inboxtreepanel',
height: 250,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
store: Ext.create('Ext.data.TreeStore', {
fields: [{
name: 'id',
type: 'string'
}, {
name: 'text',
type: 'string'
}],
autoLoad: false,
proxy: {
type: 'jsonajax',
url: app_global.serviceExtn + 'browseS3.do',
reader: {
type: 'json',
root: 'results'
}
},
root: {
loaded: false
}
}),
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1,
text: 'Nodes',
editor: 'textfield'
}]
});
me.callParent(arguments);
}
});
In return I am getting json data but data is not loading in treepanel
{"success":true,
"code":null,
"message":null,
"data":[{"id":"root/Date-2015-08-30","text":"Date-2015-08-30","leaf":false},
{"id":"root/Date-2015-08-31","text":"Date-2015-08-31","leaf":false},
{"id":"root/Date-2015-09-08","text":"Date-2015-09-08","leaf":false},
{"id":"root/Date-2015-09-09","text":"Date-2015-09-09","leaf":false}],
"totalCount":0}
Can anyone help why data is not loading in treepanel? What is wrong in my code

Null values in Chart

I have problem with null values in store which I give to the chart.
I want to break series when the value is null and continue line when values come back to numbers.
I did it in extJs3.
DataPoint:
Ext.define('DataPoint', {
extend: 'Ext.data.Model',
fields: [
{name: 'time', type: 'date', dateFormat: 'Y-m-d H:i'},
{name: 'val',mapping:'value', type: 'float', useNull:true, convert: function(v, record){ if(v == null){return undefined}return parseInt(v)}}, ],
idProperty: 'time',
persistenceProperty: 'data'
});
Store:
store = Ext.create('Ext.data.Store', {
model: 'DataPoint',
proxy:{
type: 'ajax',
url: linePanel.url,
reader: {
type: 'json',
root: 'data'
}
},
sorters: [{
property: 'time'
}],
format: 'json',
idProperty: 'time',
root: 'data'
});
Chart:
Ext.create('Ext.chart.Chart', {
renderTo: linePanel.columnChart.body.dom,
store: store,
axes: [
{
type: 'Category',
position: 'bottom',
fields: ['time'],
},
{
title: linePanel.unit,
type: 'Numeric',
position: 'left',
minimum: 0,
maximum: 100,
majorTickSteps: 1
}
],
series: [
{ xField: 'time',
yField: 'val',
type: 'line',
highlight : true,
smooth: true,
style: {
stroke: '#00b300',
'stroke-width': 5,
color: '#00b300',
},
markerConfig: {
type: 'circle',
stroke: '#00b300',
color: '#00b300'
}
}
]
});
I get answer from sencha, here is the solution

Sencha Touch 1.1 nested list associations

I have the following problem, I can not fetch the data from the sublist, I am doing wrong?
my code:
//file lstCabDet.txt
{"root":[
{
"NumeroPedido":"0000000001",
"CodigoCliente":"100000",
"NombreCliente":"hskjdnd",
"NIF":"43065236",
"Detalle":[{
"DocumentoVenta":"0000000001",
"Posicion":"000010",
"CodigoMaterial":"000000000010000002",
"Material":"Prueba material 1"}]},
{
"NumeroPedido":"0000000002",
"CodigoCliente":"100000",
"NombreCliente":"hskdsnb",
"NIF":"43065236",
"Detalle":[{
"DocumentoVenta":"0000000002",
"Posicion":"000010",
"CodigoMaterial":"000000000010000002",
"Material":"Prueba material 1"}]
}]}
//Model
Ext.regModel('listaDocumentosModel', {
fields: [
{name: 'NumeroPedido', type: 'string'},
{name: 'CodigoCliente', type: 'string'},
{name: 'NombreCliente', type: 'string'},
{name: 'NIF', type: 'string'}
],
associations:[
{type: 'hasMany',
model: 'listaDocumentoDetalleModel', name: 'listaDocumentoDetalleModel'}
]
});
Ext.regModel('listaDocumentoDetalleModel',
{
fields:[
{name: 'DocumentoVenta', type: 'string'},
{name: 'Posicion', type: 'string'},
{name: 'CodigoMaterial', type: 'string'},
{name: 'Material', type: 'string'}
],
associations:[
{type: 'belongsTo', model: 'listaDocumentosModel'}
]
});
//Store
var listaDocumentosStore = new Ext.data.Store (
{
autoLoad: true,
model: 'listaDocumentosModel',
proxy:
{
id: 'listaDoc',
type: 'rest',
url: 'data/lstCabDet.txt',
reader:
{
type: 'json',
root : 'root'
}
}
});
//View Detail
var disDetDoc =
'<div>'+
'<div>'+
'<div>{NumeroPedido}</div>'+
'<div>{Posicion}</div>'+
'<div>{CodigoMaterial}</div>'+
'<div>{Material}</div>'
'</div>'+
'</div>';
detalleDocumento = Ext.extend(Ext.Panel,
{
layout: 'card',
initComponent: function()
{
this.dockedItems = [
{
xtype: 'toolbar',
dock: 'top',
title: 'Detalle documento',
items: [
{
ui: 'back',
text: 'Volver',
scope: this,
handler: function()
{
this.ownerCt.setActiveItem(this.prevCard,
{
type: 'slide',
reverse: true,
scope: this,
after: function()
{
this.destroy();
}
});
}
}]
}];
this.detalleDocPanel = new Ext.Panel(
{
layout: 'fit',
items: [
{
scroll: 'vertical',
data: this.record.data,
tpl: disDetDoc
}]
});
this.items = this.detalleDocPanel;
detalleDocumento.superclass.initComponent.call(this);
}
});
Ext.reg('detalleDocumento', detalleDocumento);
//View Master
var listDoc =
'<div class="materialItem">'+
'<div class="list-codigo">'+
'{NumeroPedido}'+
'{CodigoCliente}'+
'{NIF}'+
'{NombreCliente}'+
'</div>'
'</div>';
var lblRef = [{
xtype: 'fieldset',
defaults:
{
labelAlign: 'left',
labelWidth: '30%'
},
items: [
{
xtype: 'textfield',
label: 'Referencia',
useClearIcon: true
}]
}];
var buttonVolver = [{
ui: 'back',
text: 'Volver',
handler: function()
{
window.open("consultaDoc.html","_self");
}
},
{
xtype: 'spacer'
}
]
var dockedItems = [{
xtype: 'toolbar',
title: 'Lista de documentos',
dock: 'top',
ui: 'dark',
items: buttonVolver
}]
listaDocumentoView = Ext.extend(Ext.Panel,
{
fullscreen: true,
layout: 'card',
initComponent: function()
{
this.lDoc = new Ext.List({
id: 'listaDoc',
grouped: false,
itemTpl: listDoc,
loadingText: false,
store: listaDocumentosStore
});
this.lDoc.on('selectionchange', this.onSelect, this);
this.listaDocumentosPanel = new Ext.Panel(
{
layout: 'fit',
dockedItems: dockedItems,
items: this.lDoc,
listeners:
{
activate:
{
fn: function()
{
this.lDoc.getSelectionModel().deselectAll();
Ext.repaint();
},
scope: this
}
}
});
this.items = this.listaDocumentosPanel;
listaDocumentoView.superclass.initComponent.call(this);
},
onSelect: function(selectionmodel, records)
{
if (records[0] !== undefined)
{
var detalleDocCard = new detalleDocumento(
{
prevCard: this.listaDocumentosPanel,
record: records[0]
});
this.setActiveItem(detalleDocCard, 'slide');
}
}
});
Ext.reg('listaDocumentoView', listaDocumentoView);
I`m dealing with the same issue. Maybe this help you to get closer to a solution:
In Accessing nested objects in JSON feed - Sencha Touch answer:
Ext.regModel('MODEL', {
fields: [{name:'position', mapping:'NIF.postion'}]
});
Change your model to
Ext.regModel('listaDocumentosModel', {
fields: [
{name: 'NumeroPedido', type: 'string'},
{name: 'CodigoCliente', type: 'string'},
{name: 'NombreCliente', type: 'string'},
{name: 'NIF', type: 'string'}
],
hasMany:[
{ model: 'listaDocumentoDetalleModel', name: 'listaDocumentoDetalleModel', , associationKey: 'listaDocumentoDetalleModel'}
]});
and remove this line from sub-model
associations:[
{type: 'belongsTo', model: 'listaDocumentosModel'}
]
This modifications solve my same problem, hope this helps to you

JSON data not showing when grid in dynamic tab?

My grid isnt showing data when put to tab. This grid, store, model, JSON are working when renderd to body or div, or as a part of a viewport. Only not showing when put in tab, that is also created using JSON and Tree! This is a (sometimes)working example. I cant figure it out, maybe scope bug ... Please help!
Ext.Loader.setConfig({ enabled: true });
Ext.require(['*']);
Ext.require('app.kontakt');
Ext.require('app.ponude');
Ext.require('app.gridStore');
Ext.onReady(function() {
Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'north',
collapsible: false,
split: true,
height: 60
},{
region: 'west',
collapsible: false,
title: 'IZBORNIK',
split: true,
width: 200,
layout: 'fit',
items:[
myTree
]
},{
region: 'center',
layout: 'fit',
border: false,
items: [{
xtype:'tabpanel',
id:'mainTabPanel'
}]
}]
});
});
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'app/myTree.json',
},
reader: {
type: 'ajax',
root: 'nodes',
record: 'leaf'
}
});
var myTree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
border: false,
listeners:{
itemclick: function(view,record,item,index,e){
if(record.isLeaf() && record.raw.tabCls){
var tabId=record.raw.tabId;
var mainPanel = Ext.getCmp('mainTabPanel');
var existingTab = Ext.getCmp(tabId);
if(existingTab){
mainPanel.setActiveTab(existingTab);
}else{
mainPanel.add(Ext.create(record.raw.tabCls,{id:tabId})).show();
}
}
}
}
});
Ext.define("app.kontakt",{
extend:"Ext.panel.Panel",
name:"kontakt",
title:"Kontakt",
layout:"border",
closable:true,
border: false,
items:[
{
region: 'north',
collapsible: false,
split:true,
layout:"fit",
height: 100,
border: false,
buttons: [{
text: 'Load1',
handler:function(){
myStore.load({
scope : this,
url : 'app/kontaktGrid.json'
});
}
},{
text: 'Load2',
handler:function(){
myStore.load({
scope : this,
url : 'app/kontaktGrid1.json'
});
}
}]
},{
region: "center",
xtype:"grid",
id:"kontaktGrid",
layout: "fit",
store: myStore,
border: false,
columns: [
{header: 'name', dataIndex: 'name',flex:1},
{header: 'email', dataIndex: 'email', flex:1},
{header: 'phone', dataIndex: 'phone', flex:1}
]
}
]
});
Ext.define('app.gridStore', {
extend: 'Ext.data.Model',
fields: [
'name', 'email', 'phone'
]
});
var myStore =Ext.create('Ext.data.Store', {
model: 'app.gridStore',
proxy: {
type: 'ajax',
url : '',
reader:{
type:'json',
root: 'items'
}
},
autoLoad:false
});
JSON for TREE
{
children: [
{ text:"KLIJENTI", expanded: true,
children: [{ text:"Kontakt", leaf: true , tabId : "tab1", tabCls: "app.kontakt"}]
}
]
}
JSON for GRID
{'items':[
{"name":"Lisa", "email":"lisa#simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart#simpsons.com", "phone":"555--222-1234"}
]}
ok... i have tes your code just by copy paste to my firebug (of course with edit the json urls),
and i got an error.... This is because the program flow...
if it was your script, and put them in a single file, you specify a grid before the store
here code works for me no error...
Ext.onReady(function () {
Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'north',
collapsible: false,
split: true,
height: 60
}, {
region: 'west',
collapsible: false,
title: 'IZBORNIK',
split: true,
width: 200,
layout: 'fit',
items: [myTree]
}, {
region: 'center',
layout: 'fit',
border: false,
items: [{
xtype: 'tabpanel',
id: 'mainTabPanel'
}]
}]
});
});
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'myTree.json',
},
reader: {
type: 'ajax',
root: 'nodes',
record: 'leaf'
}
});
var myTree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
border: false,
listeners: {
itemclick: function (view, record, item, index, e) {
if (record.isLeaf() && record.raw.tabCls) {
var tabId = record.raw.tabId;
var mainPanel = Ext.getCmp('mainTabPanel');
var existingTab = Ext.getCmp(tabId);
if (existingTab) {
mainPanel.setActiveTab(existingTab);
} else {
mainPanel.add(Ext.create(record.raw.tabCls, {
id: tabId
})).show();
}
}
}
}
});
Ext.define('app.gridStore', {
extend: 'Ext.data.Model',
fields: ['name', 'email', 'phone']
});
var myStore = Ext.create('Ext.data.Store', {
model: 'app.gridStore',
proxy: {
type: 'ajax',
url: '',
reader: {
type: 'json',
root: 'items'
}
},
autoLoad: false
});
Ext.define("app.kontakt", {
extend: "Ext.panel.Panel",
name: "kontakt",
title: "Kontakt",
layout: "border",
closable: true,
border: false,
items: [{
region: 'north',
collapsible: false,
split: true,
layout: "fit",
height: 100,
border: false,
buttons: [{
text: 'Load1',
handler: function () {
myStore.load({
scope: this,
url: 'grid.json'
});
}
}, {
text: 'Load2',
handler: function () {
myStore.load({
scope: this,
url: 'grid1.json'
});
}
}]
}, {
region: "center",
xtype: "grid",
id: "kontaktGrid",
layout: "fit",
store: myStore,
border: false,
columns: [{
header: 'name',
dataIndex: 'name',
flex: 1
}, {
header: 'email',
dataIndex: 'email',
flex: 1
}, {
header: 'phone',
dataIndex: 'phone',
flex: 1
}]
}]
});