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
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 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
I need to initial grid which will showed only 10 records, although it is more, the rest should be hidden, for example there will be a button under grid which on click, will display all the rest. Prompt way as it can be implemented. P.S. : extjs 5.0.1
Two ways of doing this. First is to specifically set a property on each record to say that it should be hidden initially, then use a filter on the store to ensure they are not shown:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone', 'hidden'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224", hidden: false },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234", hidden: false },
{ 'name': 'Homer', "email":"homer#simpsons.com", "phone":"555-222-1244", hidden: true },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254", hidden: true }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
},
filters: [{ property: 'hidden', value: false }]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
bbar: [{
xtype: 'button',
text: 'Show All Rows',
handler: function() {
store.clearFilter();
}
}]
});
}
});
Another approach is to filter on the index of the items in the store:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone', 'hidden'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224", hidden: false },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234", hidden: false },
{ 'name': 'Homer', "email":"homer#simpsons.com", "phone":"555-222-1244", hidden: true },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254", hidden: true }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
store.addFilter([
function(item) {
return store.indexOf(item) <= 1;
}
]);
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
bbar: [{
xtype: 'button',
text: 'Show All Rows',
handler: function() {
store.clearFilter();
}
}]
});
}
});
Here we use the indexOf method on the store instance to filter out anything past index 1 in the store.
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}]}
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
}]
}]
});