Question

我正在努力获得Ext.define＆amp; 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（包括此处的sencha lib）
- app.js（主档案）
- app（文件夹）
  - 控制器
    - 主要（主控制器）
  - model（如果未定义模型，则为可选）
  - store（如果未定义模型，则为可选）
  - 视图
    - Viewport.js（您的主要视口）
- 资源
  - CSS
    - style.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 ..

定义Panel并在视口中实例化它

2 个答案: