How to make a circle in a customized view class?

Question

I am trying to draw a circle using Sencha's Ext.draw.Component in my customized view class but it is not showing any circle in it. I have pasted the code for reference.

I also tried to define the variable of type component in my Main class but upon doing so the compiler gave an error saying that the type component is unknown.

// Main Class

Ext.define('GS0.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video',
        'Ext.Carousel',
        'Ext.Container',
        'Ext.draw.Component',
        'Ext.Img'
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                iconCls: 'home',
                xtype: 'carousel',
                ui     : 'dark',
                direction: 'horizontal',

                items: [
                    {
                        xtype: 'draw',
                        type: 'circle',
                        radius: 50,
                        x: 100,
                        y: 100,
                        fill: '#2d2d2d'
                    },
                    {
                        xtype: 'img',
                        src: 'images/nm.jpg'
                    }
                ]
            }
        ]
    }
});


// Circle Class
Ext.define('GS0.view.CC', {
    extend: 'Ext.draw.Component',
    xtype: 'cc',

    config: {
        type: 'circle',
        cx: 100,
        cy: 100,
        r: 25,
        fillStyle: 'blue'
    }
});

score 0 · Answer 1 · answered May 26 '13 at 02:38

0

Try modifying you items in the GSO.view.Main

items: [{
    iconCls: 'home',
    xtype: 'carousel',
    ui     : 'dark',
    direction: 'horizontal',
    items: [{
        xtype: 'draw',
        items:[{
            type: 'circle',
            fill: '#79BB3F',
            radius: 100,
            x: 100,
            y: 100
        }]
    },{
        xtype: 'img',
        src: 'images/nm.jpg'
    }]
}]

The circle code should be added as an item to the xtype=draw block.

answered May 26 '13 at 02:38

blessanm86

31,439
14
68
79

Anh I did that but it shows me the following error: Uncaught TypeError: Expecting a function in instanceof check, but got # – Mridul May 26 '13 at 13:25
Hmm something else might be causing the issue. Here is a fiddle to a working example http://jsfiddle.net/blessenm/fmu9P/ – blessanm86 May 26 '13 at 13:55
Anh the fiddle is perfect but still cant get it running. Btw, which sencha version are u using? feels like this is a version issue. I am using sencha 2.2.1 open source version. Circle.js lies inside Sprite folder in draw package. – Mridul May 27 '13 at 17:48
I tried to do exactly what u have done in the fiddle but still not able to. really confused over the possible solution. – Mridul May 27 '13 at 18:11
Are the source files of the Ext.draw.Component in your Sencha Touch Folder? I think you have to download and add it manually – Lukas K. Jun 11 '13 at 13:25

score 0 · Answer 2 · answered May 27 '13 at 18:30

I think the way I am loading the Main is a problem. here is the code. Can you spot any error. PS please see line Ext.viewport.add(Ext.create(GS0.view.main))

Ext.Loader.setPath({
    'Ext': 'touch/src',
    'GS0': 'app'
});
//</debug>

Ext.application({
    name: 'GS0',

    requires: [
        'Ext.MessageBox'
    ],

    views: [
        'Main'
    ],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('GS0.view.Main'));
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

How to make a circle in a customized view class?

2 Answers2