Create an analog clock extension - Stpe by step

Step Step 1 – Choose a suitable base class

* We want to be able to use the clock inside a Panel or Window etc. 

=> Ext.Component.

* We want the clock to be able to have any size

=> Ext.BoxComponent

* We don’t really need support for toolbars, headers, buttons etc. 

=> Ext.Panel.

Introduction to Ext.BoxComponent

* Base class of most UI widgets in Ext JS (GridPanel, TabPanel, TextField etc...)

* Base class for any Component that is to be sized as a box, using width and height.

Ext.Component Life Cycle & Template Methods

* Initialization (constructor, initComponent)

       - Configuration, setup etc...

* Rendering (onRender, afterRender)

  - Add additional elements and styling here

* Destruction (onDestroy)

        - Clean up after yourself, destroy elements etc.

Step 2 – Create folders and a simple skeleton

Step 3 – Create a simple skeleton with stubs

Ext.ns('Ext.ux');

Ext.ux.Clock = Ext.extend(Ext.BoxComponent, {

    afterRender : function() {

        // Call superclass

        Ext.ux.Clock.superclass.afterRender.apply(this, arguments);

    },

    onDestroy : function() {

        // Call superclass

        Ext.ux.Clock.superclass.onDestroy.apply(this, arguments);

    }

});

Step 4 – Create simple example HTML Page

   

        

        ...

       

   

Step 5 – Create elements

afterRender : function() {   // The component is now rendered and has an ’el’

    var size = Math.min(this.getHeight(), this.getWidth());

            

    // Background image of an empty clock with no hands

    this.bgEl = this.el.createChild({

        tag : 'img',

        cls : 'ext-ux-clock-img',

        src : this.clockBgUrl,

        width : size,

        height : size

    });

    // Initialize a Raphael canvas for drawing the hands

    this.canvas = Raphael(this.el.dom, size, size);

   

    this.drawHands();

    this.on('resize', this.handleResize, this);

    this.timer = setInterval(this.drawHands.createDelegate(this), 1000);

    Ext.ux.Clock.superclass.afterRender.apply(this, arguments);

}

Step 6 – Draw hands

drawHands : function() {

    var size = Math.min(this.getHeight(), this.getWidth())

        date = new Date(),

        secs = date.getSeconds(),

        mins = date.getMinutes(),

        hrs = date.getHours(),

        canvas = this.canvas;

    canvas.clear();

    canvas.path(...);      // Draw minute hand

    canvas.path(...);      // Draw hour hand

    canvas.path(...);      // Draw second hand

}

Step 7 – Use a background image

Step 8 – Polish with CSS3

.ext-ux-clock-img

{

    border:3px solid lightgrey;

    -moz-border-radius:100%;

    -webkit-border-radius: 100%;

    -o-border-radius: 100%;

    border-radius: 100%;

    -moz-box-shadow:1px 1px 13px rgba(114, 114, 114, 0.8);

    -webkit-box-shadow:1px 1px 13px rgba(114, 114, 114, 0.8);

    -o-box-shadow:1px 1px 13px rgba(114, 114, 114, 0.8);

    box-shadow:1px 1px 13px rgba(114, 114, 114, 0.8);

    background:#222333 url(../images/glow.png) no-repeat center center;

}

Step 9 – Resize Support

handleResize : function(me, newWidth, newHeight) {

    var size = Math.min(newWidth, newHeight);

       

    this.bgEl.setSize(size, size, true);   // true to animate

    this.canvas.setSize(size, size);       // Resize Raphael canvas

    this.drawHands();       // Clears canvas and redraws

}

Step 10 – Don’t forget to clean up after yourself!

onDestroy : function() {

    clearInterval(this.timer);

   

    this.canvas.clear();

   

    Ext.destroy(this.bgImg, this.innerEl);

   

    // Call superclass

    Ext.ux.Clock.superclass.onDestroy.apply(this, arguments);

}