You found a bug! We've classified it as
EXTJS-8147
.
We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
-
[4.2.0 beta] Chart mask doesn't appear
REQUIRED INFORMATION
Ext version tested:
Browser versions tested against:
DOCTYPE tested against:
Description:
- Chart mask doesn't appear. Actually, it is discussed in the comments here. A workaround is setting up "enableMask: true" for the Chart as well as "mask: true". But "mask: true" should be enough, isn't?
Steps to reproduce the problem:
- Hold the mouse left button and drag
The result that was expected:
- A masking/selection box appear
The result that occurs instead:
- A masking/selection box doesn't appear
Test Case:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Chart mask doesn't appear</title>
<link rel="stylesheet" href="../resources/css/ext-all.css" />
<script src="../ext-all-debug.js"></script>
<script>
Ext.onReady(function () {
Ext.create("Ext.chart.Chart", {
renderTo: Ext.getBody(),
height: 400,
width: 400,
mask: true,
//enableMask: true, // Workaround
axes: [{
position: "bottom",
title: "X",
fields: ["x"],
type: "Numeric"
}, {
position: "left",
title: "Y",
fields: ["y"],
type: "Numeric"
}],
series: [{
title: "Chart",
xField: "x",
yField: "y",
type: "line"
}],
store: {
fields: [{
name: "x"
}, {
name: "y"
}],
data: [{
x: 0,
y: 0
}, {
x: 50,
y: 50
}, {
x: 100,
y: 100
}]
}
});
});
</script>
</head>
<body>
</body>
</html>
-
Thanks for the report! I have opened a bug in our bug tracker.
-
Sencha User
Originally Posted by
Daniil
REQUIRED INFORMATION
Ext version tested:
Browser versions tested against:
DOCTYPE tested against:
Description:
- Chart mask doesn't appear. Actually, it is discussed in the comments here. A workaround is setting up "enableMask: true" for the Chart as well as "mask: true". But "mask: true" should be enough, isn't?
Steps to reproduce the problem:
- Hold the mouse left button and drag
The result that was expected:
- A masking/selection box appear
The result that occurs instead:
- A masking/selection box doesn't appear
Test Case:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Chart mask doesn't appear</title>
<link rel="stylesheet" href="../resources/css/ext-all.css" />
<script src="../ext-all-debug.js"></script>
<script>
Ext.onReady(function () {
Ext.create("Ext.chart.Chart", {
renderTo: Ext.getBody(),
height: 400,
width: 400,
mask: true,
//enableMask: true, // Workaround
axes: [{
position: "bottom",
title: "X",
fields: ["x"],
type: "Numeric"
}, {
position: "left",
title: "Y",
fields: ["y"],
type: "Numeric"
}],
series: [{
title: "Chart",
xField: "x",
yField: "y",
type: "line"
}],
store: {
fields: [{
name: "x"
}, {
name: "y"
}],
data: [{
x: 0,
y: 0
}, {
x: 50,
y: 50
}, {
x: 100,
y: 100
}]
}
});
});
</script>
</head>
<body>
</body>
</html>
From all of my analysis finally am able to find out why zooming is not working.
Problem is with enableMask config of the chart , this is not getting set with the chart constructor and always it comes as undefined and hence whole zooming logic is disabled.
Here is the fix that i have made and it works.
Code:
Ext.define('MyAsup.view.performance.CreateChart',{
enableMask: true,
mask: true,
constructor : function(configs){
configs.enableMask = this.enableMask;
this.callParent(arguments);
}
..
..
});
Try it out
Reply With Quote
