官术网_书友最值得收藏!

  • Sencha Touch Cookbook
  • Ajit Kumar
  • 405字
  • 2021-08-20 15:56:07

Initializing your application

So far, we have been using Ext.setup to enter into our application, where the entry point is provided by the onReady method, which is invoked when the document is ready. However, in an enterprise setup, an application is much more complex and needs more configurations that that which Ext.setup provides. For example, if you would like to configure your application with the history support, rather than doing it for individual pages or components, you may like your application to configure it based on the target platform and many more. These kinds of needs are addressed by Sencha Touch by providing a dedicated class.

Sencha Touch provides an Ext.Application class to create an application. This is a convenient way to create an application. Besides configuring your application, this class also allows you to structure your complete application in the form of Model-View-Controller and initialize it using a convenient method. The class allows the user to implement a function, which can be called when the application is launched. In this recipe, we will see how to create and initialize an application using the Ext.Application class.

How to do it...

Carry out the following steps:

  1. Create and open a new file ch01_04.js in the ch01 folder and paste the following code into it:
    new Ext.Application({
      name: 'MyApp',
    
      launch: function() {
        this.viewport = new Ext.Panel({
          fullscreen: true,
          items : [
            {
               html: 'Welcome to My App!'
            }
          ]
        });
      }
    });
  2. Remove the following line from index.html:
    <script type="text/javascript" charset="utf-8" src="ch01/ch01_03.js"></script>
  3. Include the following line in index.html:
    <script type="text/javascript" charset="utf-8" src="ch01/ch01_04.js"></script>
  4. Deploy and run the application.

How it works...

Ext.Application provides various configuration options, which can be specified while constructing the Application instance. The name property provides the application name, which is also used as the namespace for the application being initialized. In addition, by default, the following namespaces are registered using the name property value:

  • MyApp.models
  • MyApp.views
  • MyApp.controllers
  • MyApp.stores

Another property is launch. The launch function creates the application's viewport and runs any actions the application needs to perform when it boots up. The launch function is run once. In the preceding code, we are creating a panel in the full screen mode which will show Welcome to My App! in its body.

Note

If you are using PhoneGap, aviod using the app and phonegap namespaces, as they are used by PhoneGap and usage of them may throw up errors.

See also

The recipe named Setting up browser-based development environment in this chapter.

主站蜘蛛池模板: 二手房| 平罗县| 天台县| 广水市| 岫岩| 江达县| 屯门区| 皋兰县| 营口市| 佛学| 全州县| 浏阳市| 万州区| 彰化市| 兴仁县| 桓台县| 理塘县| 方城县| 岳阳县| 肇州县| 吴川市| 宁陵县| 河北省| 清水县| 锡林浩特市| 遂平县| 南乐县| 南昌市| 遵义县| 鸡西市| 寻乌县| 探索| 建湖县| 镇江市| 淮南市| 渭源县| 尼玛县| 庆城县| 博罗县| 枣庄市| 贵溪市|