Develop Reference

I'm getting an error when drawing a chart using echarts JS

When I try to draw a graph, I get an error:echarts.min.js:45 Uncaught TypeError: Bind must be called on a function at bind (<anonymous>) at Bd (echarts.min.js:45:130031)
My echarts-init.js:
let domTemp = document.getElementById("main");
let mytempChart = echarts.init(domTemp, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
runDaysDatas(sens_data_result, sens_name_list);
function runDaysDatas(sens_data_result, sens_name_list) {
const sens_names = sens_name_list;
const datasetWithFilters = [];
const seriesList = [];
echarts.util.each(sens_names, function (sens) {
var datasetId = 'dataset_' + sens;
datasetWithFilters.push({
id: datasetId,
fromDatasetId: sens_data_result,
transform: {
type: 'filter',
config: {
and: [
{ dimension: 'Uid', '=': sens }
]
}
}
});
seriesList.push({
type: 'line',
datasetId: datasetId,
showSymbol: false,
name: sens,
endLabel: {
show: true,
formatter: function (params) {
return params.value[3] + ': ' + params.value[0];
}
},
labelLayout: {
moveOverlap: 'shiftY'
},
emphasis: {
focus: 'series'
},
encode: {
x: 'Date',
y: 'Temperature',
label: ['Name', 'Temperature'],
itemName: 'Date',
tooltip: ['Temperature']
}
});
});
option = {
animationDuration: 10000,
dataset: [
{
id: 'dataset_sens_names',
source: sens_data_result
},
...datasetWithFilters
],
title: {
text: 'Temperature for Day'
},
tooltip: {
order: 'valueDesc',
trigger: 'axis'
},
xAxis: {
type: 'category',
nameLocation: 'middle'
},
yAxis: {
name: 'Temperature'
},
grid: {
right: 140
},
series: seriesList
};
mytempChart.setOption(option);
}
In sens_data_result i pass data from api.
In sens_name_list i pass names of the sensors.
The console does not send errors to my script, it swears at the library. I took an example from the official site and remade it for my task, displaying the temperature by time of day with the name of the sensor. There can be N number of graphs on one chart.
Thnx for help!

Okey, i'm a solved the problem, this is decision:
let url = '/api/sensdata';
let domTemp = document.getElementById("main");
let mytempChart = echarts.init(domTemp, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
$.get(
url,
sensors_uid,
(_rawData) => {
runDaysDatas(_rawData, sens_name_list);
}
);
function runDaysDatas(_rawData, sens_names) {
const datasetWithFilters = [];
const seriesList = [];
_rawData.unshift(['Name', 'Date', 'Humidity', 'Temperature']);
echarts.util.each(sens_names, function (sens) {
var datasetId = 'dataset_' + sens;
datasetWithFilters.push({
id: datasetId,
fromDatasetId: 'dataset_raw',
transform: {
type: 'filter',
config: {
and: [
{ dimension: 'Name', '=': sens }
]
}
}
});
seriesList.push({
type: 'line',
datasetId: datasetId,
showSymbol: false,
name: sens,
endLabel: {
show: true,
formatter: function (params) {
return 'Uid ' + params.value[0] + ': ' + params.value[3] + '°C';
}
},
labelLayout: {
moveOverlap: 'shiftY'
},
emphasis: {
focus: 'series'
},
encode: {
x: 'Date',
y: 'Temperature',
label: ['Name', 'Temperature'],
itemName: 'Temperature',
tooltip: ['Temperature']
},
});
});
console.log(seriesList);
option = {
toolbox: {
show : true,
feature : {
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {},
dataset: [
{
id: 'dataset_raw',
source: _rawData
},
...datasetWithFilters
],
tooltip: {
order: 'valueDesc',
trigger: 'axis'
},
xAxis: {
type: 'time',
nameLocation: 'middle',
axisLabel: {
formatter: (function(value){
moment.locales('RU_ru');
return moment(value).format('MM/DD HH:mm');
})
}
},
yAxis: [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}
],
grid: {
right: 140
},
series: seriesList
};
mytempChart.clear();
mytempChart.setOption(option);
}
window.addEventListener('resize', mytempChart.resize);

Assigning tpl with values for DOM manipulation in extjs

I have filter checkbox one after the other as below:
Now I want to change it to:
My approach to this problem is:
I am selecting the DOM and looping through it to select all the check boxes:
var x = $("table .x-form-type-checkbox")
$(x).each(function (index, value){
console.log(value.children)
});
OUTPUT:
I am creating the extjs combobox dropdown as:
Ext.application({
name: 'timefilter',
launch: function() {
Ext.widget({
xtype: 'combobox',
renderTo: Ext.get('newfilter1'),
fieldLabel: 'Time Frame',
labelAlign: 'right',
displayField: 'name',
editable: false,
multiSelect: false,
tpl: new Ext.XTemplate('<tpl for=".">', '<div class="x-boundlist-item">', '<input type="radio" />', '{name}', '</div>', '</tpl>'),
store: Ext.create('Ext.data.Store', {
fields: [{
type: 'string',
name: 'name'
}],
data: [{
"name": "Today"
}, {
"name": "This week"
}, {
"name": "This month"
}, {
"name": "Next week"
}, {
"name": "Next month"
}, {
"name": "All time"
}]
}),
queryMode: 'local',
listeners: {
select: function(combo, records) {
var node;
Ext.each(records, function(rec) {
node = combo.getPicker().getNode(rec);
Ext.get(node).down('input').dom.checked = true;
});
},
beforedeselect: function(combo, rec) {
var node = combo.getPicker().getNode(rec);
Ext.get(node).down('input').dom.checked = false;
}
}
});
}
});
OUTPUT:
Now I am tring to loop and map the value.children that contains each checkbox input to tpl as below:
var x = $("table .x-form-type-checkbox")
$(x).each(function(index, value) {
Ext.application({
name: 'timefilter',
launch: function() {
Ext.widget({
xtype: 'combobox',
renderTo: Ext.get('newfilter1'),
fieldLabel: 'Activity Status',
labelAlign: 'right',
displayField: 'name',
editable: false,
multiSelect: false,
tpl: value.innerHTML,
queryMode: 'local',
listeners: {
select: function(combo, records) {
var node;
Ext.each(records, function(rec) {
node = combo.getPicker().getNode(rec);
Ext.get(node).down('input').dom.checked = true;
});
},
beforedeselect: function(combo, rec) {
var node = combo.getPicker().getNode(rec);
Ext.get(node).down('input').dom.checked = false;
}
}
});
}
});
console.log(value.children)
});
But I am not getting expected OUT its:
Please let me know where I am doing wrong or is there a better approach.

You can implement this functionality using store.filter() method inside of combobox select event.
In this Fiddle, I have created a demo using same store.filter() method and select event of combo.
Node this is just an example you can change based on your requirement.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('ComboCheckbox', {
extend: 'Ext.form.field.ComboBox',
xtype: 'combocheckbox',
fieldLabel: 'Status',
tpl: new Ext.XTemplate('<tpl for=".">', '<div class="x-boundlist-item">', '<input type="checkbox" {checked} />', '{text}', '</div>', '</tpl>'),
store: Ext.create('Ext.data.Store', {
fields: ['text', 'value', {
name: 'checked',
defaultValue: ''
}],
data: [{
text: "All Statuses"
}, {
text: "Not Started"
}, {
text: "In Progress"
}, {
text: "Completed"
}, {
text: "Overdue"
}]
}),
queryMode: 'local',
listeners: {
select: function (combo, rec) {
rec.set('checked', 'checked');
},
beforedeselect: function (combo, rec) {
rec.set('checked', '');
}
}
});
Ext.define('GridStore', {
extend: 'Ext.data.Store',
alias: 'store.gridstore',
autoLoad: true,
fields: [{
name: 'issue',
mapping: 'issuetype',
convert: function (v) {
return v.toLowerCase();
}
}],
proxy: {
type: 'ajax',
url: 'task.json',
reader: {
type: 'json',
rootProperty: 'task'
}
}
});
Ext.create({
xtype: 'grid',
renderTo: Ext.getBody(),
title: 'Demo Grid',
store: {
type: 'gridstore'
},
height: 400,
width: '100%',
tbar: [{
xtype: 'combocheckbox',
listeners: {
select: function (combo, rec) {
var store = combo.up('grid').getStore();
store.clearFilter();
if (rec.get('text').toLowerCase() !== 'all statuses') {
store.filter('issue', rec.get('text').toLowerCase());
}
}
}
}],
columns: [{
text: 'Status',
width: 120,
dataIndex: 'issuetype',
renderer: function (value, metaData, record, rowIndex) {
let cls = 'notstarted';
switch (value.toLowerCase()) {
case 'in progress':
cls = 'inprocess';
break;
case 'completed':
cls = 'completed';
break;
case 'overdue':
cls = 'overdue';
break;
}
return `<span class="issuetype ${cls}">${value}</span>`;
}
}, {
text: 'Summary',
flex: 1,
dataIndex: 'summary'
}],
selModel: {
selType: 'checkboxmodel',
mode:'SIMPLE'
}
})
}
});

Grid Updates (Row Editing) in Extjs takes more time when Number of records in the grid increases

As the number of records in the grid increases the time taken to update one row also increases.
Initially when I fetch 25 records the time taken to update is 2-3 seconds.
When I fetch 500 records on the same page time taken is 8-9 seconds.
Can anyone help me please so that I can avoid this. It is degrading the performance of the system.
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*'
]);
Ext.onReady(function(){
// Define our data model
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
'name',
'email',
{ name: 'start', type: 'date', dateFormat: 'n/j/Y' },
{ name: 'salary', type: 'float' },
{ name: 'active', type: 'bool' }
]
});
// Generate mock employee data
var data = (function() {
var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
lastLen = lasts.length,
firstLen = firsts.length,
usedNames = {},
data = [],
eDate = Ext.Date,
now = new Date(),
s = new Date(now.getFullYear() - 4, 0, 1),
end = Ext.Date.subtract(now, Ext.Date.MONTH, 1),
getRandomInt = Ext.Number.randomInt,
generateName = function() {
var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
if (usedNames[name]) {
return generateName();
}
usedNames[name] = true;
return name;
};
while (s.getTime() < end) {
var ecount = getRandomInt(0, 2);
for (var i = 0; i < ecount; i++) {
var name = generateName();
data.push({
start : eDate.add(eDate.clearTime(s, true), eDate.DAY, getRandomInt(0, 27)),
name : name,
email: name.toLowerCase().replace(' ', '.') + '#sencha-test.com',
active: getRandomInt(0, 1),
salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
});
}
s = eDate.add(s, eDate.MONTH, 1);
}
return data;
})();
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Employee',
proxy: {
type: 'memory'
},
data: data,
sorters: [{
property: 'start',
direction: 'DESC'
}]
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
width: 135,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}, {
xtype: 'numbercolumn',
header: 'Salary',
dataIndex: 'salary',
format: '$0,0',
width: 130,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
}, {
xtype: 'checkcolumn',
header: 'Active?',
dataIndex: 'active',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}],
tbar: [{
text: 'Add Employee',
iconCls: 'employee-add',
handler : function() {
rowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new#sencha-test.com',
start: Ext.Date.clearTime(new Date()),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'removeEmployee',
text: 'Remove Employee',
iconCls: 'employee-remove',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}
},
disabled: true
}],
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
grid.down('#removeEmployee').setDisabled(!records.length);
}
}
});
new Ext.window.Window({
width: 900,
height: 500,
title: 'Employee Salaries',
items: grid,
layout: 'fit',
closable: false
}).show();
});

How to add a Release filter on the PortfolioItem/Feature object

Using AppSDK 2.0, how can I see the "Release" field in the PortfolioItem/Feature when I create a store?

Release needs to be among the fetched fields in WsapiDataStore:
fetch: ['FormattedID','Name','UserStories','Release']
But then in a Rally.data.custom.Store, to account for Features that are not assigned to a release, this condition is used:
Release: (release && release.Name) || 'None'
Here is the code:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.WsapiDataStore', {
model: 'PortfolioItem/Feature',
fetch: ['FormattedID','Name','UserStories','Release'],
pageSize: 100,
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_createGrid: function(features) {
this.add({
xtype: 'rallygrid',
store: Ext.create('Rally.data.custom.Store', {
data: features,
pageSize: 100
}),
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name', dataIndex: 'Name'
},
{
text: 'Release', dataIndex: 'Release'
},
{
text: 'Story Count', dataIndex: 'StoryCount'
},
{
text: 'User Stories', dataIndex: 'UserStories',
renderer: function(value) {
var html = [];
Ext.Array.each(value, function(userstory){
html.push('' + userstory.FormattedID + '')
});
return html.join(', ');
}
}
]
});
},
_onDataLoaded: function(store, data){
var features = [];
var pendingstories = data.length;
//debugger;
Ext.Array.each(data, function(feature) {
var release = feature.get('Release');
var f = {
FormattedID: feature.get('FormattedID'),
Name: feature.get('Name'),
Release: (release && release.Name) || 'None',
_ref: feature.get("_ref"),
StoryCount: feature.get('UserStories').Count,
UserStories: []
};
var stories = feature.getCollection('UserStories');
stories.load({
fetch: ['FormattedID'],
callback: function(records, operation, success){
Ext.Array.each(records, function(story){
var number = story.get('DirectChildrenCount');
if (number == 0) {
f.UserStories.push({_ref: story.get('_ref'),
FormattedID: story.get('FormattedID')
});}
}, this);
--pendingstories;
if (pendingstories === 0) {
this._createGrid(features);
}
},
scope: this
});
features.push(f);
}, this);
}
});

extjs 4: list view select image id and display the image on other panel

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*'
]);
Ext.onReady(function(){
Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'ImageModel',
proxy: {
type: 'ajax',
url: 'get-images.php',
reader: {
type: 'json',
root: 'images'
}
}
});
store.load();
var listView = Ext.create('Ext.grid.Panel', {
width:425,
height:250,
collapsible:true,
title:'Simple ListView <i>(0 items selected)</i>',
renderTo: Ext.getBody(),
store: store,
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},
columns: [{
text: 'File',
flex: 50,
dataIndex: 'name'
},{
text: 'Last Modified',
xtype: 'datecolumn',
format: 'm-d h:i a',
flex: 35,
dataIndex: 'lastmod'
},{
text: 'Size',
dataIndex: 'size',
tpl: '{size:fileSize}',
align: 'right',
flex: 15,
cls: 'listview-filesize'
}]
});
// little bit of feedback
listView.on('selectionchange', function(view, nodes){
var l = nodes.length;
var s = l != 1 ? 's' : '';
listView.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>');
});
});
i have create 2 panel, one is left panel,second is right panel.
the list view are created in the left panel,and the right panel will read the page showimage.php
list view are display file detail,when user select the list view will passing the file name as a parameter "name" to showimage.php, and the right panel will show the image by name are passed from list view select event.(actually the name field are stored file's ID)
Question
1)how to create the select list view event,when select a list view passing parameter name to showimage.php,and right panel refresh the page and display the image.

//===========================LIST VIEW===============================
Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: ['PicID', 'PicUploadedDateTime','PicData']
});
var ImgStore = Ext.create('Ext.data.JsonStore', {
model: 'ImageModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'get-image.php',
baseParams: { //here you can define params you want to be sent on each request from this store
mainid: 'value1',
startdate: 'value2',
enddate: 'value3'
},
reader: {
type: 'json',
root: 'images'
}
}
});
var listView = Ext.create('Ext.grid.Panel', {
region: 'west',
id : 'imagelist',
title: 'Select Image',
width: 200,
split: true,
collapsible: true,
floatable: false,
title:'Select Image',
store: ImgStore,
multiSelect: false,
viewConfig: {
emptyText: 'No images to display'
},
columns: [
{
text: 'Date Time Uploaded',
//xtype: 'datecolumn',
//format: 'Y-m-d H:i:s',
flex: 65,
width: 100,
dataIndex: 'PicUploadedDateTime'
}]
});
function hexToBase64(str) {
return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}
listView.on('selectionchange', function(view, nodes){
/*
var nodeIdDisplay = "";
for(var i = 0; i < nodes.length; i++)
{
if(nodeIdDisplay.length > 0)
nodeIdDisplay += ",";
nodeIdDisplay += nodes[i].get("PicID");
}
*/
if (nodes[0].get("PicID") > 0){
//alert(nodes[0].get("PicData"));
image=Ext.getCmp('displayimage');
image.setSrc("data:image/jpeg;base64,"+hexToBase64(nodes[0].get("PicData")));
//console.log(nodes[0].get("PicData"));
}
});
this code method is post to the get-image.php,and get all the image in store and then,
list view on select change event get the image id and display the image on type : 'image' component