Sencha Touch-- List in TabPanel not working - list

So, I just started working with Sencha Touch. I want to include a list in a TabPanel but for some reason it isn't working. Please help. Thanks!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<script src="app/app.js" type="text/javascript"></script>
<script src="app/rosterData.js" type="text/javascript"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet"type="text/css" />
<link href="app/myAppStyle.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html>
Javascript:
MyApp=new Ext.Application({
name: 'MyApp',
launch: function() {
MyApp.tabbedView= new Ext.TabPanel({
cardSwitchAnimation: 'slide',
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [{
title: "Schedule",
cls: 'card',
iconCls: 'time',
style: "background-color: #000",
},
{
title: "Roster",
layout: 'fit',
cls: 'card',
iconCls: 'team',
xtype: 'list',
store: MyApp.RosterStore,
itemTpl: '<div class="contact"><strong>{firstName}</strong> {lastName}</div>'
style: "background-color: #aaa",
},
{
title: "Info",
html: "Bye",
cls: 'card homeScreen',
iconCls: 'info',
style: "background-color: #aaa",
}
]
});
Ext.regModel('PlayerName', {
fields: ['firstName', 'lastName']
});
MyApp.RosterStore= new Ext.data.Store({
model: 'PlayerName',
data: [
{firstName: "Shivam", lastName: "Thapar"},
{firstName: "Last", lastName: "First"},
{firstName: "Bob", lastName: "Smith"}
]
});
MyApp.Viewport= new Ext.Panel({
fullscreen: true,
layout: 'fit',
style: "background-color: #fee",
items: [MyApp.tabbedView]
});
}
});


Try putting your model and store definitions above the TabPanel definition.
Model first
Store next
and then TabPanel

Related

Datasets in Chart.js stacked barchart appear overlaid instead of stacked

I'm trying to create a stacked barchart using 2 datasets with Chart.js but I find they overlay instead of stack. Is this because of the known bug with a time series for the x-axis or have I done something wrong?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chart.js test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
<div style="width:90%;margin:20px auto">
<canvas id="myChart" width="90%"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["6 Mar","7 Mar","8 Mar","9 Mar","10 Mar","11 Mar","12 Mar","13 Mar","14 Mar","15 Mar","16 Mar","17 Mar","18 Mar","19 Mar","20 Mar","21 Mar","22 Mar","23 Mar","24 Mar","25 Mar","26 Mar","27 Mar","28 Mar","29 Mar","30 Mar","31 Mar","1 Apr","2 Apr","3 Apr","4 Apr","5 Apr","6 Apr","7 Apr","8 Apr","9 Apr","10 Apr","11 Apr","12 Apr","13 Apr","14 Apr","15 Apr","16 Apr","17 Apr","18 Apr","19 Apr","20 Apr","21 Apr","22 Apr","23 Apr","24 Apr","25 Apr","26 Apr","27 Apr","28 Apr","29 Apr","30 Apr","1 May","2 May","3 May","4 May","5 May","6 May","7 May","8 May","9 May","10 May","11 May","12 May","13 May"],
datasets: [
{
label: 'dataset1',
data: [163,43,67,48,61,74,0,342,342,0,403,407,676,63,1294,1035,665,967,1427,1452,2129,2885,2546,2433,2619,3009,4324,4244,4450,3735,5903,3802,3634,5491,4344,8681,5233,5288,4342,5252,4603,4617,5599,5525,5850,4676,4301,4451,4583,5386,4913,4463,4309,3996,4076,6032,6201,4806,4339,3985,4406,6111,5614,4649,3896,3923,3877,3403,3242],
backgroundColor:'rgb(0,102,204,0.8)'
},{
label: 'dataset2',
data: [1,1,0,1,4,0,2,1,18,15,22,16,34,43,36,56,35,74,149,186,183,284,294,214,374,382,670,652,714,760,644,568,1038,1034,1103,1152,839,686,744,1044,842,1029,935,1115,498,559,1172,837,727,1005,843,420,338,909,795,674,739,621,315,288,693,649,539,626,346,268,210,627,494],
backgroundColor:'rgb(204,0,102,1)'
} ]
},
options: {
layout: {
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10
}
},
legend: {
display: true,
position: 'bottom'
},
scales: {
xAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
ticks: {
autoSkip: true,
maxTicksLimit: 20,
maxRotation: 0,
minRotation: 0,
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
scaleLabel: {
display: true,
stacked: true,
labelString: 'Number'
},
ticks: {
beginAtZero: true
}
}]
},
title: {
display: true,
text: 'Chart title'
},
responsive: true
}
});
</script>
</div>
</body>
</html>
jsfiddle
Hopefully the above jsfiddle explains the issue pictorially. The barchart shows daily data for two datasets which are supposed to be stacked, but dataset1 overlays dataset2 and therefore obscures dataset2 unless transparency is set for dataset1, and then the colour is not correct because it's a combination of one colour over another.

Simply define your yAxes as stacked also as shown below.
yAxes: [{
stacked: true,
Also try to use the latest stable version of Chart.js (currently v2.9.3)
Please have a look at your amended code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chart.js test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>
<body>
<div style="width:90%;margin:20px auto">
<canvas id="myChart" width="90%"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["6 Mar","7 Mar","8 Mar","9 Mar","10 Mar","11 Mar","12 Mar","13 Mar","14 Mar","15 Mar","16 Mar","17 Mar","18 Mar","19 Mar","20 Mar","21 Mar","22 Mar","23 Mar","24 Mar","25 Mar","26 Mar","27 Mar","28 Mar","29 Mar","30 Mar","31 Mar","1 Apr","2 Apr","3 Apr","4 Apr","5 Apr","6 Apr","7 Apr","8 Apr","9 Apr","10 Apr","11 Apr","12 Apr","13 Apr","14 Apr","15 Apr","16 Apr","17 Apr","18 Apr","19 Apr","20 Apr","21 Apr","22 Apr","23 Apr","24 Apr","25 Apr","26 Apr","27 Apr","28 Apr","29 Apr","30 Apr","1 May","2 May","3 May","4 May","5 May","6 May","7 May","8 May","9 May","10 May","11 May","12 May","13 May"],
datasets: [
{
label: 'dataset1',
data: [163,43,67,48,61,74,0,342,342,0,403,407,676,63,1294,1035,665,967,1427,1452,2129,2885,2546,2433,2619,3009,4324,4244,4450,3735,5903,3802,3634,5491,4344,8681,5233,5288,4342,5252,4603,4617,5599,5525,5850,4676,4301,4451,4583,5386,4913,4463,4309,3996,4076,6032,6201,4806,4339,3985,4406,6111,5614,4649,3896,3923,3877,3403,3242],
backgroundColor:'rgb(0,102,204,0.8)'
},{
label: 'dataset2',
data: [1,1,0,1,4,0,2,1,18,15,22,16,34,43,36,56,35,74,149,186,183,284,294,214,374,382,670,652,714,760,644,568,1038,1034,1103,1152,839,686,744,1044,842,1029,935,1115,498,559,1172,837,727,1005,843,420,338,909,795,674,739,621,315,288,693,649,539,626,346,268,210,627,494],
backgroundColor:'rgb(204,0,102,1)'
} ]
},
options: {
layout: {
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10
}
},
legend: {
display: true,
position: 'bottom'
},
scales: {
xAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
ticks: {
autoSkip: true,
maxTicksLimit: 20,
maxRotation: 0,
minRotation: 0,
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
stacked: true,
scaleLabel: {
display: true,
stacked: true,
labelString: 'Number'
},
ticks: {
beginAtZero: true
}
}]
},
title: {
display: true,
text: 'Chart title'
},
responsive: true
}
});
</script>
</div>
</body>
</html>

Why do I have the issue 'property assigment expected' when I want to display a chart on my web page using highcharts

I have an issue when I want to display a chart on my web page using django and highcharts. This is my detail.html file.
I have an error called property assignment expected on the side of my curly brackets here :
_dateList={{dateList|safe}};
_price={{price.room.actual_rate.amount}};
_availability={{availability}};
Here is the all file
<h1>{{property.name}}</h1>
<h2>{{roomtype.name}}</h2>
<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script>
_dateList={{dateList|safe}};
_price={{price.room.actual_rate.amount}};
_availability={{availability}};
Highcharts.chart('container', {
title: {
text: 'Pricing model prevision'
},
xAxis: {
categories: _dateList
},
yAxis: [{
title: {
text: 'Price',
style: {
color: Highcharts.getOptions().colors[2]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[2]
}
}
}, {
title:{
text:'Occupancy',
style:{
color: Highcharts.getOptions().colors[0]
}
},
labels:{
style:{
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'price',
data: _price
}, {
name: 'availabilty',
data: _availability
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
<ul>
{% for day in dayList %}
{% if day.availability.room %}
<li>{{day.date}}:{{day.allotment}}:{{day.pricing.room.actual_rate.amount}} </li>
{% else %}
<li>{{day.date}}:0 </li>
{% endif %}
{% endfor %}
</ul>
Can you help me with this issue?
thank you for your help,
Best

If you add quotation marks, as shown below, it should work:
_dateList='{{dateList|safe}}';
Without quotation marks, it is interpreted as a variable. With quotation marks, it is interpreted as a string.

Is there a way to put an image into the legend of a bar chart (chart.js)?

A simple stacked bar graph
<head>
<title>Stacked Bar Chart</title>
<script src="Chart.bundle.js"></script>
<script src="utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width: 75%">
<canvas id="canvas"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
<script>
chartColors = {
redborder: 'rgba(206, 0, 23, 1)',
darkredborder: 'rgba(206, 0, 23, 0.75)',
lightredborder: 'rgba(206, 0, 23, 0.5)',
};
var barChartData = {
labels: [1<img src='images/badges/Manchester United.png' alt='Manchester United.png' height='30' width='30'>,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32],
datasets: [{
label: 'Goals',
backgroundColor: window.chartColors.redborder,
data: [0,1,3,0,2,0,0,2,0,1,0,1,1,0,0,1,0,0,2,1,0,1,2,1,1,0,0,0,2,2,0,3]
}, {
label: 'Assists',
backgroundColor: window.chartColors.darkredborder,
data: [0,0,1,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,1,0,0,1]
}, {
label: 'Indirect',
backgroundColor: window.chartColors.lightredborder,
data: [0,0,1,0,0,0,0,0,1,1,0,1,0,0,1,0,0,0,1,1,0,1,2,0,0,0,1,0,0,0,0,1]
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
};
document.getElementById('randomizeData').addEventListener('click', function() {
barChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});
window.myBar.update();
});
</script>
</body>
</html>
in the x-axis labels, I am trying to get a small icon (image) to be displayed instead of a number. I have tried to put just the image tag in all possible combinations of " and ' as well as with the number. But to no avail. The chart does not render. It seems that the label needs to recognized as a value to render and the html tag knocks this out of place. I don't see why an image tag cannot be put in there, is there a way to do this?

ExtJs List not showed in a container

I have a container with three items:
ombrelloneButton = Ext.create('Ext.Button', {
id: 'btnOmbr',
iconMask: true,
iconCls: 'action',
text: 'Ombrellone'
});
lettinoButton = Ext.create('Ext.Button', {
id: 'btnLett',
iconMask: true,
iconCls: 'action',
text: 'Lettino'
});
toolbarPostazione = Ext.create('Ext.Toolbar',{
layout: {
pack: 'center'
}, // layout
ui: 'plain',
items: [ombrelloneButton,
lettinoButton]
});
Ext.define('appTrial.view.Postazione.Postazione',{
extend: 'Ext.form.Panel',
xtype: 'Postazione',
alias: 'widget.Postazione',
controllers:['AssociaAttivitaController'],
models : ['appTrial.model.AttivitaModel'],
config : {
id : 'PostazioneId',
title : 'Welcome',
resizable : false,
collapsible : true,
bodyPadding : '5',
buttonAlign : 'center',
border : false,
trackResetOnLoad : true,
items : [{
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to My New App!!!'
},
{
xtype: 'container',
name: 'mainContainer',
id: 'postazioneContainer',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
//width : '100%',
items : [{
layout: {
pack: 'center'
},
html :'<p style="color: red; text-align: center; font-size: 20px" >Complimenti!</p><br><p style="text-align: center; font-size: 16px">Sei stato associato alla attivita '+dummyAttivita.get('nomeAttivita')+'!</p>' +
'<br><p style="text-align: center; font-size: 16px">Ora associa la tua postazione:</p>',
margin: '80 0 50 0'
},
toolbarPostazione,
{
xtype: 'PostazioniList',
title:'PostazioniAssociate',
id: 'PostazioniAssociate'
}
]
}]
}
});
The first two of them are showed (html text and toolbar), while the PostazioniList is not showed.
It is done like this (List.js):
Ext.define('appTrial.view.Postazione.List', {
extend: 'Ext.List',
xtype: 'PostazioniList',
alias: 'widget.PostazioniList',
itemTpl: '<div>{tipoPostazione} num.{numPostazione}</div>',
data: [{
tipoPostazione: 'Ombrellone',
numPostazione: '5'
},
{
tipoPostazione: 'Ombrellone',
numPostazione: '37'
},
{
tipoPostazione: 'Lettino',
numPostazione: '46d'
}]
});
Could it be a html problem?
I don't understand also why I don't get any error, just it is hidden...
Thanks in advance

Sencha Touch 2 list is invisible in container

I'm trying to write simple view with list on container but i have some problems.
First of all, the List is not visible when I'm trying to do it like this:
Ext.define('App.view.News', {
extend: 'Ext.Container',
but when it's written like this:
Ext.define('App.view.News', {
extend: 'Ext.navigation.View',
it works.
The problem is that when I write it with extend of navigation.View, im getting two toolbars on top and I can't find solution to disable the second one (added by the list).
Full code:
Ext.define('App.view.News', {
extend: 'Ext.Container', //Ext.navigation.View
xtype: 'news',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],
config: {
style: ' background-color:white;',
items:
[
{
xtype: 'toolbar',
docked: 'top',
title: 'News',
minHeight: '60px',
items: [
{
ui: 'back',
xtype: 'button',
id: 'backButton',
text: 'Back',
},
{
minHeight: '60px',
right: '5px',
html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""),
},
],
},
{
xtype: 'list',
itemTpl: '{title},{author}',
store: {
autoLoad: true,
fields : ['title', 'author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
]
}
});
Help please!

You need to give your container a layout and your list a flex property. The flex is important on lists as they don't have a viewable height since they scroll. I added a couple properties to your code below. Hope this helps.
Ext.define('App.view.News', {
extend: 'Ext.Container', //Ext.navigation.View
xtype: 'news',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],
config: {
style: ' background-color:white;',
layout: 'vbox', // add a layout
items:
[
{
xtype: 'toolbar',
docked: 'top',
title: 'News',
minHeight: '60px',
items: [
{
ui: 'back',
xtype: 'button',
id: 'backButton',
text: 'Back',
},
{
minHeight: '60px',
right: '5px',
html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""),
},
],
},
{
xtype: 'list',
itemTpl: '{title},{author}',
flex: 1, // add a flex property
store: {
autoLoad: true,
fields : ['title', 'author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
]
}
});