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....
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.
I'm using extjs and I want to customize the first row texts in a table to bold and increase the font size. I didnt find any unique property for rows. Is there any way to customize?
Solution:
You may try to use viewConfig config option of Ext.grid.Panel and Ext.tree.Panel. Below are working examples.
Working example (Grid Panel):
Data: customgrid.json
[
{Id : '1', Name: 'Name 1'},
{Id : '2', Name: 'Name 2'},
{Id : '3', Name: 'Name 3'},
{Id : '4', Name: 'Name 4'},
{Id : '5', Name: 'Name 5'},
{Id : '6', Name: 'Name 6'}
]
CSS: customgrid.css
.grid-firstrow .x-grid-cell {
font-weight: bold;
font-size: 18;
}
Grid: customgrid.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./customgrid.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.define('testmodel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Id', type: 'string'},
{name: 'Name', type: 'string'}
]
});
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Test.Window', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
loadTestData: function() {
var me = this;
me.store.load();
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.store = new Ext.data.Store({
autoLoad: false,
proxy: {
url: 'customgrid.json',
type: 'ajax',
reader: {type: 'json'},
writer: {type: 'json'}
},
model: 'testmodel'
});
me.grid = Ext.create('Ext.grid.Panel', {
autoScroll: true,
stripeRows: true,
width: 420,
height: 200,
store: me.store,
columnLines: false,
columns : [
{header : 'Id', sortable : true, width : 50, dataIndex : 'Id'},
{header : 'Name', sortable : true, width : 100, dataIndex : 'Name'}
],
viewConfig: {
getRowClass: function(record, index) {
var css = '';
if (index == 0) {
css = 'grid-firstrow';
} else {
css = '';
}
return css;
}
}
});
me.add(me.grid);
me.loadTestData();
}
});
var win = new Test.Window({
});
win.show();
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
Working example (Tree Panel):
CSS: customtree.css
.tree-node .x-grid-cell-inner {
font-weight: bold;
font-size: 18px;
}
Tree: customtree.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./customtree.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Test.Window', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.store = new Ext.data.TreeStore({
proxy: {
type: 'memory',
reader: {
type: 'json'
}
},
model: 'usersw_model'
});
me.tree = new Ext.tree.Panel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: false,
width: '100%',
flex: 1,
border: false,
rootVisible: false,
allowChildren: true,
store: me.store,
root: {
expanded: true,
text: 'Ext JS',
draggable: false,
id: 'root'
},
viewConfig: {
getRowClass: function(record, index) {
var css = '';
if (index == 0) {
css = 'tree-node';
} else {
css = '';
}
return css;
}
}
});
me.add(me.tree);
var rootnode = me.tree.getRootNode();
var parent1node = rootnode.appendChild({
text: 'Parent1',
leaf: false
});
parent1node.appendChild({
text: 'Child1',
leaf: true
});
parent1node.appendChild({
text: 'Child2',
leaf: true
});
parent1node.appendChild({
text: 'Child3',
leaf: true
});
var parent2node = rootnode.appendChild({
text: 'Parent2',
leaf: false
});
parent2node.appendChild({
text: 'Child1',
leaf: true
});
parent2node.appendChild({
text: 'Child2',
leaf: true
});
parent2node.appendChild({
text: 'Child3',
leaf: true
});
var parent3node = rootnode.appendChild({
text: 'Parent3',
leaf: false
});
}
});
var win = new Test.Window({
});
win.show();
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
You'd use CSS for that:
tr:first-child {
font-weight: bold;
font-size: x-large;
}
or output the first row cells as th instead of td and style it this way:
th {
font-weight: bold;
font-size: x-large;
}
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.
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.
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>