Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Understanding the Role of Ext.Viewport

Page of 168

The purpose of a viewport is to occupy the entire visible area of the browser as well as suppress the browser's native panning and zooming features. Ext.application() automatically instantiates an Ext.Viewport instance.

In Sencha Touch MVC, all views are defined using a class-based architecture. Classes are defined using the Ext.define() method where the first argument is the name of the class. The namespace of your class is determined by your application's name and the directory/filename in which the class has been defined. You should only define one class per file.

The second argument to Ext.define() is a configuration object that describes whether the custom class should extend a pre-existing class, an identifier (xtype) used to instantiate a class instance, and other configuration properties.

A basic example is illustrated below:

Ext.define('HelloWorld.view.Hello', {
   extend: 'Ext.Container',
   xtype: 'hello'
   config: {
	  html: 'Hello World'
   }	
});
Note: You will learn more about the Sencha Touch class system in the following section.

Typically, you will configure the initial view of your application by adding views to your viewport from inside of the launch() function by calling the Ext.Viewport.add() method as illustrated below:

Ext.application({
	name: 'HelloWorld',

	/* load initial view class */
	views: ['Main'],

   	launch: function(){
	  Ext.Viewport.add([
 	   {xtype: 'hello'}
	  ]);
   }
});
Page of 168
comments powered by Disqus