Sencha bluescreen error

For Webmatrix:

I just came across this issue myself.  In order to solve it, I had to go into applicationhost.config (C:/Users/<username>/Documents/IISExpress/config/applicationhost.config) and add the following lines:

In <dynamicTypes>

<add mimeType="application/json"

And in <staticContent>

<mimeMap fileExtension=".json"

I realize this post is over a year old, but I hate seeing topics without solutions.  Hopefully this solves the issue.


Sencha Project


From prev example in last article. Have some small notes with little more explanation.

31-07-2014 13-11-01

From the above pic initially i created a sample named project in c drive. Prior to that i have copied sencha touch files to c drive and specified the path clearly as shown above.

While creating a registration view:

Sencha generate form Registration “name1:text”,“name2:text” registrationform.

In step4. point2-> replace the code in Registration view with sample code.

In step4.point4-> create a data folder in your project folder and have a file name with Server.json.

Finally folder structure will be like this..

31-07-2014 13-33-38

31-07-2014 13-33-50

Note: Once all the above procedure done and when you run your application you will be shown with the following image

31-07-2014 15-12-43

this will be shown in generally if application get stuck while running. you should find errors in console log. My error is package.json is not loading..for this very simple solution is :

31-07-2014 15-14-09

or try sencha app build

Still if you find the errors? try exploring below sites:

You can even try this:

Create, Build & Package Sencha Touch project using Sencha Cmd


Problem Statement

In a typical Sencha Touch based enterprise project, we create various JS+CSS files and it becomes cumbersome to manage them during the development because they need to be listed in the proper order in the index.html file and for every addition of a file, we need to add it to the index.html, as well. After the development is done, we minify all the JS and CSS files to have better loading performance, and go back and modify the index.html file to use the minified files rather than individual files. After introduction of the new Class System in ExtJS this tedious task has been taken care by the framework and the developer is not required to do all that, anymore. This is a big relief. However, the new Class System expects a specific folder structure so that it can load the classes, dynamically, and is based on the MVC…

View original post 896 more words

Sencha – Part 2


Hope you went thru the first article on sencha i.e., create hello world app. Now we will go in deeper to understand the code clearly.You should maintain the following structure of files for better understanding and structure.

The following listing provides a short description of each file and directory, the complete list of the generated files can be found in the Sencha Cmddocumentation:

  • app – The directory containing the Models, Views, Controllers, and Stores for your app.
  • app.js – The main JavaScript entry point for your app.
  • app.json – The configuration file for your app.
  • index.html – The HTML file for your app.
  • packager.json – The configuration file used by Sencha Cmd for creating native packages for your application.
  • resources – The directory containing the CSS and the images for your app

Open app.js, the main entry point for your app, in your editor.

The launch function is the entry point to your application. In the default application, hide the application loading indicator, and create an instance of our Main view and add it to the Viewport.

The Viewport is a Card layout to which you can add application components. The default app adds the Main view to the viewport so it becomes visible on the screen.

Coming to the code part in app.js..

Ext is the global namespace for the whole Sencha Touch framework. Every class, function and configuration for the whole framework exists under this single global variable. The Ext singleton itself contains a set of useful helper functions (like apply, min and others), but most of the framework that you use day to day exists in specialized classes (for example Ext.Panel, Ext.Carousel and others).

A method that is crucial to beginning your application is Ext.setup. Please refer to it’s documentation,

as a reference on beginning your application.

    onReady: function() {
            xtype: 'component',
            html: 'Hello world!'

For properties and methods(prefer to check) :!/api/Ext

Quick reference of above link:


A reusable empty function

An array containing extra enumerables for old browsers.

This indicate the start timestamp of current cycle. …

The version of the framework

Defined By


( config )

Loads class and starts it up with given configuration after the page is ready. …

( object, config, [defaults] ) : Object

Copies all the properties of config to the specified object. …

( object, config ) : Object

Copies all the properties of config to object if they don’t already exist. …

( fn, [scope], [args], [appendArgs] ) : Function

Create a new function from the provided fn, change this to the provided scope, optionally overrides arguments for the…

( callback, [scope], [args], [delay] )

Calls function after specified delay, or right away when delay == 0. …

( item ) : Object

Clone almost any type of variable including array, object, DOM nodes and Date without keeping the old reference. …

( dest, source, names, [usePrototypeKeys] ) : Object

Copies a set of named properties from the source object to the destination object. …

( name, args ) : Object

Instantiate a class by either full name, alias or alternate name. …

( alias, args ) : Object

Convenient shorthand, see Ext.ClassManager.instantiateByAlias. …

( json, [safe] ) : Object/null

Shorthand for Ext.JSON.decode. …

( fn, millis, [scope], [args], [appendArgs] ) : Number

Calls this function after the number of milliseconds specified, optionally in a specific scope. …

( className, data, [createdFn] ) : Ext.Base

Defines a class or override. …

( args )

Attempts to destroy any objects passed to it by removing all event listeners, removing them from the DOM (if applicab…

( iterable, fn, [scope], [reverse] ) : Boolean

Iterates an array or an iterable value and invoke the given callback function for each item. …

Shorthand for Ext.JSON.encode. …

( excludes ) : Object

Convenient shortcut to Ext.Loader.exclude. …

( config, classReference, [instance], [aliasNamespace] )

A global factory method to instantiate a class from a config object. …

( element, [named] ) : Ext.dom.Element

Gets the globally shared flyweight Element, with the passed node as the active element. …

( element ) : Ext.dom.Element

Retrieves Ext.dom.Element objects. …

Returns the current document body as an Ext.Element. …

Convenient shorthand, see Ext.ClassManager.getClass. …

( object ) : String

Convenient shorthand for Ext.ClassManager.getName. …

This is shorthand reference to Ext.ComponentMgr.get. …

( [object] ) : String

Returns the display name for object. …

Returns the current HTML document object as an Ext.Element. …

( el ) : HTMLElement

Return the dom node for the passed String (id), dom node, or Ext.Element. …

Returns the current document head as an Ext.Element. …

Shortcut to …

( [el], [prefix] ) : String

Generates unique ids. …

( target ) : Boolean

Returns true if the passed value is a JavaScript Array, false otherwise. …

( value ) : Boolean

Returns true if the passed value is a Boolean. …

( object ) : Boolean

Returns true if the passed value is a JavaScript Date object, false otherwise. …

( value ) : Boolean

Returns true if the passed value is defined. …

( value ) : Boolean

Returns true if the passed value is an HTMLElement. …

( value, [allowEmptyString] ) : Boolean

Returns true if the passed value is empty, false otherwise. …

( value ) : Boolean

Returns true if the passed value is a JavaScript Function, false otherwise. …

( value ) : Boolean

Returns true if the passed value is iterable, false otherwise. …

( value ) : Boolean

Returns ‘true’ if the passed value is a String that matches the MS Date JSON encoding format …

( value ) : Boolean

Returns true if the passed value is a number. …

( value ) : Boolean

Validates that a value is numeric. …

( value ) : Boolean

Returns true if the passed value is a JavaScript Object, false otherwise. …

Returns true if the passed value is a JavaScript ‘primitive’, a string, number or Boolean. …

( value ) : Boolean

Returns true if the passed value is a string. …

( value ) : Boolean

Returns true if the passed value is a TextNode. …

( object, fn, [scope] )

Iterates either an array or an object. …

A convenient alias method for Ext.Object.merge. …

( namespace1, namespace2, etc ) : Object

Creates namespaces to be used for scoping variables and classes so that they are not global. …

( )

Convenient alias for Ext.namespace. …

( fn, [scope], [options] )

Adds a listener to be notified when the document is ready and all dependencies are loaded. …

( fn, args, [scope] ) : Function

Create a new function from the provided fn, the arguments of which are pre-set to args. …

( selector, [root] ) : HTMLElement[]

Shorthand of …

( id, config )

Creates a new store for the given id and config, then registers it with the Store Manager. …

( node )

Removes this element from the document, removes all DOM event listeners, and deletes the cache reference. …

Repaints the whole page. …

( expressions, [fn], [scope], [excludes] )

Convenient alias of Ext.Loader.require. …

Selects elements based on the passed CSS selector to enable Element methods to be applied to many related elements in…

( config )

Ext.setup() is the entry-point to initialize a Sencha Touch application. …

( expressions, [fn], [scope], [excludes] )

Synchronous version of require, convenient alias of Ext.Loader.syncRequire. …

( iterable, [start], [end] ) : Array

Converts any iterable (numeric indices and a length property) into a true array. …

( value ) : String

Returns the type of the given variable in string format. …

( value, defaultValue, [allowBlank] ) : Object

Returns the given value itself if it’s not empty, as described in isEmpty; returns the default value (second argument…

( name ) : Object

Convenient shorthand to create a widget by its xtype, also see Ext.ClassManager.instantiateByAlias var button = Ext….
Example Projects:

Sencha Touch – create your first app


This tutorial is completely based on what and how i learned in creating sencha environment and my first app in sencha. This completely i followed the documentation of sencha docs and summarised in an easy manner with simple explanation. Hope its clear now.


You can browse this article or see the installation procedure with sencha cmd from here (or) else you can try in a simple way as how i mentioned in steps.

I am going to create a simple hello world in sencha..

Download and unzip Sencha Touch. You can unzip the software to any directory.

Sencha Touch requires Chrome or Safari. ( hope you are aware of using emulator in chrome. if not pls check here)

Downloading Sencha Touch

If you haven’t already done so, download the Sencha Touch SDK. The distribution includes extensive documentation, example applications, build resources, and, most importantly, the JavaScript libraries and CSS stylesheets required to run Sencha Touch applications.

The SDK may seem like a large download, but the requirements for a production Sencha Touch application are only two files within it: the framework’s JavaScript library and the CSS stylesheet. By default, these are named sencha-touch-all.js and sencha-touch.css respectively, and you should easily be able to find them in the SDK.

Application structure
For the sake of this article, create a new folder called hello-world, and place an empty file calledindex.html within it. Copy (or symlink) your Sencha Touch SDK as a subdirectory calledlib/touch, next to it, so that the file structure looks like this:


The HTML file

Sencha Touch applications are bootstrapped with an HTML5 document, which contains references to JavaScript and CSS resources. These will include the two core files above, but also the application code that you’ll develop yourself. Open up index.html in your favorite editor and add the following:

<!DOCTYPE html> 
        <meta charset="utf-8"> 
        <title>Hello World</title> 
        <script src="lib/touch/sencha-touch-all.js" type="text/javascript"></script> 
        <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /> 

The application code

Normally, you’ll be developing your applications’ JavaScript in a separate file (or files) and then linking to them in the same way that we have done for the Sencha Touch library, above. But for the very simplest of applications (like this one), it is also possible to embed our application’s JavaScript into the HTML itself, inside a <script> tag within the document’s <head>:

<script type="text/javascript"> 
        launch: function () {
            Ext.create('Ext.Panel', {
                fullscreen: true,
                html: 'Hello World!'


Now execute it and you can see like below..

30-07-2014 16-04-19


For more:


Note: You even can add the script file in app.js file in your project folder and finally include like this..

<script src=”app.js”></script>

This will also work same 🙂

Sencha Touch – Build Mobile Web Apps with HTML5

What is Sencha Touch?

Sencha Touch, a high-performance HTML5 mobile application framework, is the cornerstone of the Sencha HTML5 platform. Built for enabling world-class user experiences, Sencha Touch is the only framework that enables developers to build powerful apps that work on iOS, Android, BlackBerry, Windows Phone, and more.

Sencha Cmd is the cornerstone to build your Sencha application. From scaffolding a new project, to minifying and deploying your application to production, Sencha Cmd provides a full set of lifecycle management features to compliment your Sencha project. With a rich command line syntax and Ant integration, Cmd is perfect to integrate into your enterprise build environment or use standalone for your application.

Getting started??


Question arises?? I hope you to got same question like me..will this sencha touch supports both mobiles and desktops?? Unfortunately, no is the answer for now. Sencha touch supports only mobiles and tablets where as sencha ext js supports tablets,laptops and desktop browsers. Feeling sad :(. Why sencha cant maintain a single package which supports all :'(.

My Necessity: As far my concern is on mobile development app, i choosed sencha touch for now. Pls follow the tutorials for better understanding how to start with.

Willing to start with this framework? then you have to explore this must. you can find api documentation,guides and examples as shown in below pic

30-07-2014 12-45-04


Learn sencha touch here

You can find all docs related to sencha here. Browse to your required docs like shown

30-07-2014 12-54-22

Please find the tutorial on how to start and create an sencha app in next articles..


CDN links for sencha:

<link href=”; rel=”stylesheet” type=”text/css” />
<script src=”; type=”text/javascript”></script>


Sencha Ext Js – Javascript Application Framework


Really confused completely. Right now i am in a state of illusion :(. Trying to know which js framework will be best suited to my application. We will try to learn something about sencha today. By the way first you should understand what it is and what differs from other frameworks?

What is Sencha?

Ext JS 4.2 is a pure JavaScript application framework that works on all modern browsers from IE6 to the latest version of Chrome. It enables you to create the best cross-platform applications using nothing but a browser, and has a phenomenal API.

What differs from other frameworks?

Lets compare with most popular Angularjs..

Getting started // old version //new version


My Understanding: According to my understanding, this sencha ext js is not supported for mobiles. It only supports to desktops,laptops and tablets for now. Hence  i am switching over to sencha touch. Plz check my articles to start up with sencha touch.