How could I work with "var = new Ext.Panel" and only viewport or Ext.define? (sencha touch 2)

Question

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

Ext.Viewport.add(menu);

app/view/Menu.js

  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.

Trozdol Trozdol · Accepted Answer · 2015-03-03T14:54:12

You could do it that way. Did you build the initial project using Sencha CMD?

I believe you will still need to use Ext.define(... to make use of the MVC structure in ST.

You could do something like

MyApp/view/MyView.js
var menu = new Ext.List({...etc...});

Ext.define('MyApp.view.Nav', {
    extend: 'Ext.NavigationView',

    items: [{
        list //maybe me.list or this.list if scope is out.
    }, {
        //another nav view card
    }
});

//app.js
Ext.Viewport.add(MyApp.view.Menu);

// if you provide an xtype you can use 
Ext.Viewport.add({xtype: 'myxtype'});

How could I work with "var = new Ext.Panel" and only viewport or Ext.define? (sencha touch 2)

1 Answers