我如何使用＆＃34; var = new Ext.Panel＆＃34;并且只有视口或Ext.define？ （sencha touch 2）

Question

我如何使用“var = new Ext.Panel”并且只使用viewport或Ext.define？

Hello World！

我对sencha touch 2中的视图，模型和控制器有些怀疑。

我可以这样工作吗？

app.js

Ext.Viewport.add(menu);

应用程序/视图/ 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
  ]
});

我使用PHP时没有问题，因为我的Ext嵌入在PHP文件中并包含不同的文件。但是当我使用js文件并且我想将MVC与sencha cmd一起使用时，我不知道如何指示Ext包含我的视图文件而不在每个文件中声明Ext.define。

总而言之，如何在不使用xtype？的情况下引用视图，控制器和模型，只需调用js文件中创建的变量。

最好的问候。

Answer 1

你可以这样做。您是否使用Sencha CMD构建了初始项目？

我相信你仍然需要使用Ext.define（...来利用ST中的MVC结构。

您可以执行类似

的操作

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'});