Below is the code corresponding to the screenshot that I added. If you refer to the data fields at the beginning of the code, you will see that the Labels on the Y-axis shows wrong.
and importing these libs, which is the same import in the sample chars that I found in this official chart preview link (the zip file is at the end of the article, and the bar chart in it is also wrong!!!):
<link rel="stylesheet" type="text/css" href="../../resources/css/ext.css" />
<script type="text/javascript" src="../../ext-core.js"></script>
<script type="text/javascript" src="../../ext-chart.js"></script>
<script type="text/javascript" src="Bar3.js"></script>
Then I imported the following libs (the same libs that they import in this sample):
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="Bar3.js"></script>
I got the correct result.
Ext.onReady(function () {
var chart;
var store1 = new Ext.data.JsonStore({
fields:['name', 'data1'],
data: [
{name:'Jan', data1: 2000},{name:'Feb', data1: 1800},
{name:'Mar', data1: 1500},{name:'Apr', data1: 1000}
]});
chart = new Ext.chart.Chart({
renderTo: Ext.get('graphDiv'),
width: 600,
height: 400,
animate: true,
shadow: true,
store: store1,
autoScroll: true,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits'
}, {
type: 'Category',
position: 'left',
fields: ['name'],
reverse: true,
title: 'Month of the Year'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle',
contrast: true
},
xField: 'name',
yField: 'data1'
}]
});
});
A known bug of extjs 4.0.0! Just an upgrade to 4.1.x will solve the problem.
Related
I am having an error when I use an example from the Sencha Docs website. The example is a grid which you can find here
So I tried to copy all the code, but for some reason it does not work for me.
app.js
const test = Ext.define('KitchenSink.view.grid.CellEditing', {
extend: 'Ext.grid.Panel',
requires: [
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'KitchenSink.model.grid.Plant'
],
xtype: 'cell-editing',
title: 'Edit Plants',
frame: true,
initComponent: function() {
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.apply(this, {
width: 680,
height: 350,
plugins: [this.cellEditing],
store: new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,
model: KitchenSink.model.grid.Plant,
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'resources/data/grid/plants.xml',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
type: 'xml',
// records will have a 'plant' tag
record: 'plant'
}
},
sorters: [{
property: 'common',
direction:'ASC'
}]
}),
columns: [{
header: 'Common Name',
dataIndex: 'common',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Light',
dataIndex: 'light',
width: 130,
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: [
['Shade','Shade'],
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
['Sunny','Sunny']
]
})
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxValue: 100000
}
}, {
header: 'Available',
dataIndex: 'availDate',
width: 95,
renderer: Ext.util.Format.dateRenderer('M d, Y'),
editor: {
xtype: 'datefield',
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
}
}, {
xtype: 'checkcolumn',
header: 'Indoor?',
dataIndex: 'indoor',
width: 90,
stopSelection: false
}, {
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: 'resources/images/icons/fam/delete.gif',
tooltip: 'Delete Plant',
scope: this,
handler: this.onRemoveClick
}]
}],
selModel: {
selType: 'cellmodel'
},
tbar: [{
text: 'Add Plant',
scope: this,
handler: this.onAddClick
}]
});
this.callParent();
this.on('afterlayout', this.loadStore, this, {
delay: 1,
single: true
})
},
loadStore: function() {
this.getStore().load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: this.onStoreLoad
});
},
onStoreLoad: function(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
},
onAddClick: function(){
// Create a model instance
var rec = new KitchenSink.model.grid.Plant({
common: 'New Plant 1',
light: 'Mostly Shady',
price: 0,
availDate: Ext.Date.clearTime(new Date()),
indoor: false
});
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
},
onRemoveClick: function(grid, rowIndex){
this.getStore().removeAt(rowIndex);
}
})
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: [{
items: test
}]
})
}
})
index.html:
<html>
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <link rel='shortcut icon' href='./imatges/icones/petits/login.png' type='image/png'> -->
<title>Sencha</title>
<!-- CDN 4.2.1- NEPTUNE -->
<link href="http://cdn.sencha.io/ext/gpl/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>
<link href="http://cdn.sencha.io/ext/gpl/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<!-- JScript -->
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
I keep getting this error when I open it on the browser:
Why is it not working and how to solve this?
Thanks
You're defining the CellEditing and model.grid.Plant with the app name of KitchenSink:
const test = Ext.define('KitchenSink.view.grid.CellEditing',{
//rest of your code
requires: [
//other requires
'KitchenSink.model.grid.Plant'
]
store: new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,
model: KitchenSink.model.grid.Plant,
//rest of store
onAddClick: function(){
// Create a model instance
var rec = new KitchenSink.model.grid.Plant({
//rest of model configs
But in the Ext.application, you define the name of the application as "MyApp":
Ext.application({
name: 'MyApp',
//other configs
Change the name of the application to KitchenSink or define the CellEditing, the requires and the models like:
const test = Ext.define('MyApp.view.grid.CellEditing',{
//rest of your code
And see if it works.
When creating bar chart on sencha touch I get this exception.
06-25 12:59:57.245: E/Web Console(28577): Uncaught TypeError: Cannot read property 'CartesianChart' of undefined at file:///android_asset/www/index.html:9
My index file is:
<!DOCTYPE HTML>
<html>
<head>
<title> Phone gap & sencha </title>
<link rel="stylesheet" type="text/css" href="lib/touch/resources/css/sencha-touch.css"></link>
<script type="text/javascript" src="lib/touch/sencha-touch-all.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script >
var store = new Ext.data.JsonStore({
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
{'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
{'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
{'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
{'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
]
});
new Ext.chart.Chart({
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: ['data1']
}]
});
</script>
</head>
<body>
</body>
</html>
Any idea?
I had a similar problem a few weeks ago. CartesianChart.js was missing.
Ensure CartesianChart.js is in the charts folder.
I am trying to find out the events listeners in ExtJs on Charts tooltips.
I have column chart and by default, it has tooltip with the respective values.
I have to display those tooltip values in alert box when i'll click on bars or columns of the chart.
Thanks!!
here is the javascript code for Area chart:
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.onReady(function () {
var chart = Ext.create('Ext.chart.Chart', {
id: 'chartCmp',
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: store1,
legend: {
position: 'bottom'
},
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
title: 'Number of Hits',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
style: {
opacity: 0.93
}
}]
});
var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
shadow: false,
maximizable: true,
title: 'Area Chart',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
store1.loadData(generateData());
}
}, {
enableToggle: true,
pressed: true,
text: 'Animate',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
}
}],
items: chart
});
});
and this is the html code:
<html>
<head>
<title>Area Chart Example</title>
<link rel="stylesheet" type="text/css" href="../../css/ext-all.css">
<script type="text/javascript" src="../../js/ext-debug.js"></script>
<script type="text/javascript" src="../../js/ext-all.js"></script>
<script type="text/javascript" src="../../js/example-data.js"></script>
<script type="text/javascript" src="areachart.js"></script>
</head>
<body>
</body>
</html>
When u'll run this code, u'll have area chart and tooltip having values by default but my requirement is when i'll click on the chart then the value should be displayed in alert box which is displaying in tooltip currently....
I have following code i want that window opened uses Ext.layout.BorderLayout and also on the left side of the window has Ext.tree.TreePanel... I tried it but when I use BorderLayout the page does not open? Can anyone help me with this?
Ext.onReady(function() {
var window = Ext.create('Ext.Window', {
title: 'Hello',
height: 100,
width: 100
});
window.show();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>
Some addition to bmoeskau's answer. I recomend you to not use JavaScript reserved words like window, document, number etc.
Here's an official example showing a window with a BorderLayout. It's not enough just to add layout:'border' you have to add panels to the layout container and also configure the layout regions properly.
E.g.:
var window = Ext.create('Ext.Window', {
title: 'Hello',
width: 100,
height: 100,
layout: 'border',
items: [{
region: 'west',
title: 'Sidebar',
width: 200,
split: true,
collapsible: true,
floatable: false
}, {
region: 'center',
html: 'Some content'
}]
});
Simply give your window a border layout and set the regions for the immediate children. Each child will have its own layout and child items.
Ext.onReady(function() {
var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "Wake up",
leaf: true
}, {
text: "Go to Work",
expanded: true,
children: [{
text: "Eat Lunch",
leaf: true
}, {
text: "Finish Report",
leaf: true
}]
}, {
text: "Go to Sleep",
leaf: true
}]
}
});
var myWindow = Ext.create('Ext.Window', {
title: 'Hello World',
width: 480,
height: 220,
layout: 'border',
items: [{
layout: 'fit',
region: 'west',
title: 'Tasks',
width: 180,
split: true,
collapsible: true,
floatable: false,
items: [{
xtype: 'treepanel',
store: treeStore,
rootVisible: false,
}]
}, {
layout: 'fit',
region: 'center',
items: [{
xtype: 'textarea',
value: new Lorem().createText(6, Lorem.TYPE.SENTENCE),
flex: 1
}]
}]
});
myWindow.show();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>
<script src="https://cdn.rawgit.com/f/loremjs/master/lorem.js"></script>
I downloaded Ext JS 4.0.2a and I'm trying to do the Ext JS tutorial. I go the "essentials" example working, so I'm pretty sure I'm set up right. I'm trying to do the grid example here ...
http://www.sencha.com/learn/legacy/Tutorial:Getting_Productive
... but I can't get the grid to display.
My ExtStart.html looks like this:
<html>
<head>
<title>Introduction to Ext 2.0: Starter Page</title>
<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="ExtStart.js"></script>
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ExtStart.css">
</head>
<body>
<div id="grid-example"></div>
</body>
</html>
and my ExtStart.js is exactly like on the tutorial site like this:
Ext.onReady(function() {
// sample static data for the store
var myData = [['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
// create the data store
var ds = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
// manually load local data
ds.loadData(myData);
// create the colum Manager
var colModel = new Ext.grid.ColumnModel([
{header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: ds,
colModel: colModel,
height: 300,
width: 600,
title: 'My First Grid'
});
// render the grid to the specified div in the page
grid.render('grid-example');
});
Any ideas what I could be doing wrong? Sadly stumped. :(
rob
You are using ExtJS4 but are referring to a legacy documentation.
There have been quite a few changes to the components and how they need to be wired together between the version that document was written for and version 4 that you are using.
Here is the array grid (and other) example(s) for ExtJS 4. -
HTML
Javascript code
For example, you are using Ext.grid.GridPanel. This is no longer valid. (Use Ext.grid.Panel instead)