定義一個面板並在視口中實例化

Question

我試圖讓Ext.define & Ext.create在Sencha touch 2中工作，這樣我就可以在我的庫中定義所有東西，並且只是創建預配置的東西。

但是，Ext.define沒有達到我所期望的效果。

爲什麼下面的代碼不在視口中創建一個帶有字段標籤「Tame」的面板？

Ext.define('mobi.form.Login',{ 
    extend:'Ext.form.Panel', 
    items: [{ 
      xtype: 'textfield', 
      name: 'Tame', 
      label: 'Tame' 
     } 
    ] 
}); 
Ext.application({ 
    viewport: { 
     layout:'fit'   
    }, 
    launch: function(){ 
     var form = Ext.create('Ext.form.Panel', { 
      items: [{ 
        xtype: 'textfield', 
        name: 'name', 
        label: 'Name' 
       } 
      ] 
     }); 
     Ext.Viewport.add(Ext.create('mobi.form.Login')); // This doesnt add anything to the viewport 
     Ext.Viewport.add(form); //magically this works 
    } 
}) 

Answer 1

當使用Ext.define，所有配置必須去config塊內。所以，你的代碼應該是這樣的：

Ext.define('mobi.form.Login',{ 
    extend:'Ext.form.Panel', 

    config: { 
     items: [{ 
       xtype: 'textfield', 
       name: 'Tame', 
       label: 'Tame' 
      } 
     ] 
    } 
}); 

一般來說唯一的例外是：

• 擴展
• 需要
• 的xtype
• 單
• alternateClassName

其他內容應在config對象內，但請記住，只有時使用Ext.define。

Answer 2

它看起來像你試圖使用sencha MVC的概念，但這是錯誤的，如果這是你唯一的一段代碼。

首先創建以下文件夾結構：

• MyAppFolder
  • 的index.html（包括這裏的煎茶LIB）
  • app.js（主文件）
  • 應用程序（文件夾）
    • 控制器
      • Main（main co ntroller）
    • 模型（可選，如果沒有模型定義）
    • 存儲（可選，如果沒有模型定義）
    • 視圖
      • Viewport.js（你的主視）
  • 資源
    • css
      • 風格。CSS（自定義樣式）
    • 圖像（你的圖標，如果你有圖片）

然後在你的app.js您將定義是這樣的：

// enable loader for dynamic loading of .js classes 
Ext.Loader.setConfig({ 
    enabled : true, 
    paths : { 
    } 
}); 

/** 
* Better performance is achived when knowing which .js classes we need to load prior to execution of this class. 
*/ 
Ext.require([ 
]); 

/** 
* This is the definition of our mobile application. 
* The name of this app is MVCTest. 
*/ 
Ext.application({ 
    name  : 'MVCTest', 

    controllers : ['Main'], 
    views  : ['Viewport'], 

    launch  : function() { 
     Ext.create('MVCTest.view.Viewport'); 
    } 
}); 

然後你的主控制器：

Ext.define('MVCTest.controller.Main', { 
    extend : 'Ext.app.Controller', 

    config : { 
     refs : { 
       viewport : 'mvctest-viewport' 
      } 
    } 
}); 

然後你就視這個樣子，根據你的例子：

Ext.define('MVCTest.view.Viewport', { 
    extend : 'Ext.Container', 
    xtype : 'mvctest-viewport', 

    config : { 
     fullscreen : true, 
     layout  : 'card', 
     items: 
     [ 
      { 
       xtype: 'textfield', 
       name: 'name', 
       label: 'Name' 
      }, 
      { 
       xtype: 'mvctest-tame' 
      } 
     ] 
    } 
}); 

通過指定的xtype mvctest-tame它將搜索這個的xtype並添加爲新的項目來此卡。因此，你需要馴服的觀點：

Ext.define('MVCTest.view.Login',{ 
extend:'Ext.form.Panel', 
xtype: 'mvctest-tame', 
items: [{ 
     xtype: 'textfield', 
     name: 'Tame', 
     label: 'Tame' 
    } 
] 
}); 

而且不要忘記將Login視圖添加到app.js ..