Question

I have created a basic Sencha Touch Application. It is running normally on my web browser.

But I don’t know how to make it run on my cell ?
Does anyone know how to do it ?

Thanks

DragPanel.as

package myComponents
{
    import mx.containers.Panel;
    import mx.core.UIComponent;
    import mx.core.SpriteAsset;
    import mx.events.FlexEvent;
    import flash.events.MouseEvent;
    import flash.events.Event;

    public class DragPanel extends Panel
    {
        // Add the creationCOmplete event handler.
        public function DragPanel()
        {
            super();
            addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
        }

        // Expose the title bar property for draggin and dropping.
        [Bindable]
        public var myTitleBar:UIComponent;

        private function creationCompleteHandler(event:Event):void
        {
            myTitleBar = titleBar;          
            // Add the resizing event handler.  
            addEventListener(MouseEvent.MOUSE_DOWN, resizeHandler);
        }

        protected var minShape:SpriteAsset;
        protected var restoreShape:SpriteAsset;

        override protected function createChildren():void
        {
                super.createChildren();

            // Create the SpriteAsset's for the min/restore icons and 
            // add the event handlers for them.
            minShape = new SpriteAsset();
            minShape.addEventListener(MouseEvent.MOUSE_DOWN, minPanelSizeHandler);
            titleBar.addChild(minShape);

            restoreShape = new SpriteAsset();
            restoreShape.addEventListener(MouseEvent.MOUSE_DOWN, restorePanelSizeHandler);
            titleBar.addChild(restoreShape);
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            // Create invisible rectangle to increase the hit area of the min icon.
            minShape.graphics.clear();
            minShape.graphics.lineStyle(0, 0, 0);
            minShape.graphics.beginFill(0xFFFFFF, 0.0);
            minShape.graphics.drawRect(unscaledWidth - 35, 12, 8, 8);

            // Draw min icon.
            minShape.graphics.lineStyle(2);
            minShape.graphics.beginFill(0xFFFFFF, 0.0);
            minShape.graphics.drawRect(unscaledWidth - 35, 18, 8, 2);

            // Draw restore icon.
            restoreShape.graphics.clear();
            restoreShape.graphics.lineStyle(2);
            restoreShape.graphics.beginFill(0xFFFFFF, 0.0);
            restoreShape.graphics.drawRect(unscaledWidth - 20, 12, 8, 8);
            restoreShape.graphics.moveTo(unscaledWidth - 20, 15);
            restoreShape.graphics.lineTo(unscaledWidth - 12, 15);

            // Draw resize graphics if not minimzed.                
            graphics.clear()
            if (isMinimized == false)
            {
                graphics.lineStyle(2);
                graphics.moveTo(unscaledWidth - 6, unscaledHeight - 1)
                graphics.curveTo(unscaledWidth - 3, unscaledHeight - 3, unscaledWidth - 1, unscaledHeight - 6);                     
                graphics.moveTo(unscaledWidth - 6, unscaledHeight - 4)
                graphics.curveTo(unscaledWidth - 5, unscaledHeight - 5, unscaledWidth - 4, unscaledHeight - 6);                     
            }
        }

        private var myRestoreHeight:int;
        private var isMinimized:Boolean = false; 

        // Minimize panel event handler.
        private function minPanelSizeHandler(event:Event):void
        {
            if (isMinimized != true)
            {
                myRestoreHeight = height;   
                height = titleBar.height;
                isMinimized = true; 
                // Don't allow resizing when in the minimized state.
                removeEventListener(MouseEvent.MOUSE_DOWN, resizeHandler);
            }               
        }

        // Restore panel event handler.
        private function restorePanelSizeHandler(event:Event):void
        {
            if (isMinimized == true)
            {
                height = myRestoreHeight;
                isMinimized = false;    
                // Allow resizing in restored state.                
                addEventListener(MouseEvent.MOUSE_DOWN, resizeHandler);
            }
        }

        // Define static constant for event type.
        public static const RESIZE_CLICK:String = "resizeClick";

        // Resize panel event handler.
        public  function resizeHandler(event:MouseEvent):void
        {
            // Determine if the mouse pointer is in the lower right 7x7 pixel
            // area of the panel. Initiate the resize if so.

            // Lower left corner of panel
            var lowerLeftX:Number = x + width; 
            var lowerLeftY:Number = y + height;

            // Upper left corner of 7x7 hit area
            var upperLeftX:Number = lowerLeftX-7;
            var upperLeftY:Number = lowerLeftY-7;

            // Mouse positionin Canvas
            var panelRelX:Number = event.localX + x;
            var panelRelY:Number = event.localY + y;

            // See if the mousedown is in the lower right 7x7 pixel area
            // of the panel.
            if (upperLeftX <= panelRelX && panelRelX <= lowerLeftX)
            {
                if (upperLeftY <= panelRelY && panelRelY <= lowerLeftY)
                {       
                    event.stopPropagation();        
                    var rbEvent:MouseEvent = new MouseEvent(RESIZE_CLICK, true);
                    // Pass stage coords to so all calculations using global coordinates.
                    rbEvent.localX = event.stageX;
                    rbEvent.localY = event.stageY;
                    dispatchEvent(rbEvent); 
                }
            }               
        }       
    }
}

RubberBandComp.as

package myComponents
{
    import mx.core.UIComponent;

    public class RubberBandComp extends UIComponent
    {
        public function RubberBandComp()
        {
            super();
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            // Draw rubber band with a 1 pixel border, and a grey fill.                 
            graphics.clear();                               
            graphics.lineStyle(1);
            graphics.beginFill(0xCCCCCC, 0.5);
            graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
        }

    }
}

CanvasDD.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:myComp="myComponents.*"
    creationComplete="creationCompleteHandler();">

    <mx:Script>
        <![CDATA[
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;
            import mx.containers.Canvas;
            import mx.containers.Panel;
            import myComponents.DragPanel;

            // Define static constant for event type.
            public static const RESIZE_CLICK:String = "resizeClick";

            // Creation complete event handler adds the resizing event. 
            // resizeButtonClicked is a custom event type for this application.
            protected function creationCompleteHandler():void
            {
                addEventListener(RESIZE_CLICK, resizeHandler);
            }

//
// D&D event handlers.
//

            // Creation complete handler for each panel to add the 
            // mouseMove event handler to the title bar. 
            // Clicking the mouse button, then moving the mouse on the title bar
            // initiates the d&d operation. 
            private function myPanelCCHandler(event:Event):void 
            {
                event.currentTarget.myTitleBar.addEventListener(MouseEvent.MOUSE_DOWN, tbMouseMoveHandler);
            }

            // Variables used to hold the mouse pointer's location in the title bar.
            // Since the mouse pointer can be anywhere in the title bar, you have to 
            // compensate for it when you drop the panel. 
            public var xOff:Number;
            public var yOff:Number;

            // Function called by the canvas dragEnter event; enables dropping
            private function doDragEnter(event:DragEvent):void 
            {
                DragManager.acceptDragDrop(Canvas(event.target));
            }

            // Drag initiator event handler for
            // the title bar's mouseMove event.
            private function tbMouseMoveHandler(event:MouseEvent):void 
            {
                var dragInitiator:Panel=Panel(event.currentTarget.parent);
                var ds:DragSource = new DragSource();
                ds.addData(event.currentTarget.parent, 'panel'); 

                // Update the xOff and yOff variables to show the
                // current mouse location in the Panel.  
                xOff = event.currentTarget.mouseX;
                yOff = event.currentTarget.mouseY;

                // Initiate d&d. 
                DragManager.doDrag(dragInitiator, ds, event);                    
            }            

            // Function called by the Canvas dragDrop event; 
            // Sets the panel's position, 
            // "dropping" it in its new location.
            private function doDragDrop(event:DragEvent):void 
            {
                // Compensate for the mouse pointer's location in the title bar.
                var tempX:int = event.currentTarget.mouseX - xOff;
                event.dragInitiator.x = tempX;

                var tempY:int = event.currentTarget.mouseY - yOff;
                event.dragInitiator.y = tempY;

                // Put the dragged panel on top of all other components.
                v1.setChildIndex(Panel(event.dragInitiator), v1.numChildren-1);         
            }

//
// Resizing event handlers.
//

            // Save panel being resized.
            protected var resizingPanel:Panel;
            // Global coordinates of lower left corner of panel.
            protected var initX:Number;
            protected var initY:Number;

            // Resize area of panel clicked.
            protected function resizeHandler(event:MouseEvent):void
            {
                resizingPanel = Panel(event.target);
                initX = event.localX;
                initY = event.localY;

                // Place the rubber band over the panel. 
                rbComp.x = event.target.x;
                rbComp.y = event.target.y;
                rbComp.height = event.target.height;
                rbComp.width = event.target.width;

                // Make sure rubber band is on top of all other components.
                v1.setChildIndex(rbComp, v1.numChildren-1);
                rbComp.visible=true;

                // Add event handlers so that the SystemManager handles 
                // the mouseMove and mouseUp events. 
                // Set useCapure flag to true to handle these events 
                // during the capture phase so no other component tries to handle them.
                systemManager.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, true);
                systemManager.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true);
            }

            // Resizes the rubber band as the user moves the cursor 
            // with the mouse key down.
            protected function mouseMoveHandler(event:MouseEvent):void
            {
                    event.stopImmediatePropagation();       

                    rbComp.height = rbComp.height + event.stageY - initY;  
                    rbComp.width = rbComp.width + event.stageX - initX;

                    initX = event.stageX;
                    initY = event.stageY;                       
            }

            // Sizes the panel to the size of the rubber band when the 
            // user releases the mouse key. 
            // Also removes the event handlers from the SystemManager.
            protected function mouseUpHandler(event:MouseEvent):void
            {
                event.stopImmediatePropagation();       

                // Use a minimum panel size of 150 x 50.
                if (rbComp.height <= 50)
                {
                    resizingPanel.height = 50;  
                }
                else
                {
                    resizingPanel.height = rbComp.height;               
                }               

                if (rbComp.width <= 150)
                {
                    resizingPanel.width = 150;              
                }
                else
                {
                    resizingPanel.width = rbComp.width;             
                }               

                // Put the resized panel on top of all other components.
                v1.setChildIndex(resizingPanel, v1.numChildren-1);

                // Hide the rubber band until next time.
                rbComp.x = 0;
                rbComp.y = 0;
                rbComp.height = 0;
                rbComp.width = 0;
                rbComp.visible = false;

                systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, true);
                systemManager.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true );
            }
        ]]>
    </mx:Script>

    <!-- The Canvas is the drag target --> 
    <mx:Canvas id="v1" 
        width="500" height="500"  
        borderStyle="solid" 
        backgroundColor="#DDDDDD"
        dragEnter="doDragEnter(event);" 
        dragDrop="doDragDrop(event);">

    <myComp:DragPanel  id="dp1" title="Drag Panel 1"
        paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"
        x="19" y="10"
        creationComplete="myPanelCCHandler(event);">
        <mx:TextArea text="Location in Canvas: x = {String(dp1.x)}, and y = {String(dp1.y)}" width="90%"/> 
    </myComp:DragPanel>

    <myComp:DragPanel  id="dp2"  title="Drag Panel 2" 
        paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"
        x="149" y="149"
        creationComplete="myPanelCCHandler(event);">
        <mx:TextArea text="Location in Canvas: x = {String(dp2.x)}, and y = {String(dp2.y)}" width="90%"/>                  
    </myComp:DragPanel>

    <myComp:DragPanel id="dp3"  title="Drag Panel 3"
        paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"
         x="241" y="283"
        creationComplete="myPanelCCHandler(event);">
        <mx:TextArea text="Location in Canvas: x = {String(dp3.x)}, and y = {String(dp3.y)}" width="90%"/>                  
    </myComp:DragPanel>

    <!--<myComp:RubberBandComp id="rbComp" x="0" y="0" height="0" width="0" visible="true"/>-->

    </mx:Canvas>
</mx:Application>

Answer 1

You can make use of some emulators so that you can test multiple mobile devices. Here is a list of such tools.

The other option is to deploy your application on a web server so that you can access it. Should should have your application running on a web server from a PC /Laptop. Then, using your wifi or network, you should be able to access the web application from your phone like http://hostname:port/appname.