You found a bug! We've classified it as EXTJSIV-8147 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. 3 Jan 2013 2:19 AM #1
    Daniil
    Daniil is offline
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    687
    Vote Rating
    62
    Daniil is a jewel in the rough Daniil is a jewel in the rough Daniil is a jewel in the rough Daniil is a jewel in the rough
      1  

    Default [4.2.0 beta] Chart mask doesn't appear

    [4.2.0 beta] Chart mask doesn't appear


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.2.0 beta
    Browser versions tested against:
    • IE9
    • Chrome
    DOCTYPE tested against:
    • <!DOCTYPE html>
    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>
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter
    Reply With Quote Reply With Quote
  2. 3 Jan 2013 7:53 AM #2
    mitchellsimoens
    mitchellsimoens is offline
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    St. Louis, MO
    Posts
    33,656
    Vote Rating
    435
    mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of
      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.
    Reply With Quote Reply With Quote
  3. 25 Mar 2013 8:13 PM #3
    jagadeesha
    jagadeesha is offline
    Sencha User jagadeesha's Avatar
    Join Date
    Jan 2011
    Location
    Bangalore , Trianz
    Posts
    10
    Vote Rating
    -2
    jagadeesha can only hope to improve
      0  

    Default


    Quote Originally Posted by Daniil View Post
    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.2.0 beta
    Browser versions tested against:
    • IE9
    • Chrome
    DOCTYPE tested against:
    • <!DOCTYPE html>
    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 Reply With Quote