Sencha – Part 2

Folks,

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.

Ext.setup({
    onReady: function() {
        Ext.Viewport.add({
            xtype: 'component',
            html: 'Hello world!'
        });
    }
});

For properties and methods(prefer to check) : http://docs.sencha.com/touch/2.3.1/#!/api/Ext

Quick reference of above link:

Properties

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

Methods

( config )

Loads Ext.app.Application 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 Ext.data.StoreManager.lookup. …

( [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 Ext.dom.Query.select …

( 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: http://docs.sencha.com/architect/3/tutorials/example_projects.html
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s