Results 1 to 2 of 2

Thread: How could I work with "var = new Ext.Panel" and only viewport or Ext.define?

  1. #1
    Sencha User
    Join Date
    Dec 2014
    Posts
    3

    Default How could I work with "var = new Ext.Panel" and only viewport or Ext.define?

    Hello World!

    I have some doubts about views, models and controllers in sencha touch 2.

    Could I work like this way?

    app.js
    Code:
    Ext.Viewport.add(menu);
    app/view/Menu.js
    Code:
    var list = new Ext.List({
      title: 'Menu',
      itemTpl: [
        '<img src="resources/menu/{icon}" align="center"/>',
        '<span style="margin-left:15px;">{title}</span>'
      ],
      data: [
        {title: 'Sell', icon: 'sell.png'},    {title: 'Warehouse', icon: 'warehouse.png'},
        {title: 'Transfers', icon: 'transfers.png'},
         {title: 'Reports', icon: 'reports.png'}
      ]
    });
    var menu = new Ext.navigation.View({
      useTitleForBackButtonText: true,
      layout: 'card',
      items: [
        list
      ]
    });
    I don't have problems when I work with PHP because my Ext is embedded in the PHP file and includes different files. But when I work with js files and I want to use MVC with sencha cmd I don't know how to indicate to Ext to include my view files without declare Ext.define in each file.

    To sum up, how to refer to the view, controller and models without using xtype?, just call the variable created in the js file.

    best regards.

  2. #2
    Sencha Premium User
    Join Date
    May 2011
    Location
    Gainesville, FL
    Posts
    228

    Default

    JavaScript is very flexible, and that naturally extends to Sencha Touch, but there are conventions that have developed over time. I'd suggest you read through some of the guides to get a sense of best practices. Here's a typical scenario:

    Code:
    // app.js
    Ext.application({
      name: 'MyApp',
      controllers: ['Users'],
      stores: ['Users'],
      models: ['User'],
      views: [
        'user.Form',
        'user.List'
      ],
      // ...
    });
    
    // app/controller/Users.js
    Ext.define('MyApp.controller.Users', {
      // ...
    });
    
    // app/store/Users.js
    Ext.define('MyApp.store.Users', {
      // ...
    });
    
    // app/model/User.js
    Ext.define('MyApp.model.User', {
      // ...
    });
    
    // app/view/user/Form.js
    Ext.define('MyApp.view.user.Form', {
      extend: 'Ext.form.Panel',
      xtype: 'userform',
    
      config: {
        // ...
      }
    });
    
    // app/view/user/List.js
    Ext.define('MyApp.view.user.Form', {
      extend: 'Ext.List',
      xtype: 'userlist',
    
      config: {
        // ...
      }
    });
    Almost every file starts with Ext.define, since it's 1 class 1 file - maintainability. The directory structure matches your class names - predictability. Classes are required in at app.js, in those arrays, or by your controllers (if you want to be more modular) - read by Sencha Cmd. Typically, you extend the framework classes, creating your own classes, which you can then instantiate - code reuse / keeping things DRY. There are cases where you may instantiate framework classes directly, but instantiating one of your own classes is more typical. View files get a custom xtype - easy targeting for events. There are a lot of other conventions you'll pick up, and I'm not impying these things are written in stone, but they're what is taught in Sencha training classes.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •