如何使用视图通过 MVC 在 Sencha Touch 2.0 中放置一个按钮

Posted 2023-02-25

【中文标题】如何使用视图通过 MVC 在 Sencha Touch 2.0 中放置一个按钮

【英文标题】：How to put a button in Sencha Touch 2.0 via MVC using a view

【发布时间】：2011-11-10 14:30:59

【问题描述】：

我已经尝试过像 How to properly activate an MVC View in Sencha Touch V2 这样的简单 MVC 示例。 没关系，但假设我想使用视图在面板中添加一个按钮。

我已经尝试过以下操作..

app.js：

Ext.Loader.setConfig(enabled: true);
Ext.application(
    name: 'rpc',
    appFolder: 'app',
    controllers: ['Home'],
    launch: function () 

        Ext.create('Ext.tab.Panel',
            fullscreen: true,     
            tabBarPosition: 'bottom',
            items:[
                title: 'Home',
                iconCls: 'home',
                html: '<img src="http://staging.sencha.com/img/sencha.png" />'
            ,
                title: 'Compose',
                iconCls: 'compose',
                xtype: 'mybutton'
            ]          
        );     
    
);

控制

    Ext.define('rpc.controller.Home', 
    extend: 'Ext.app.Controller',
    views: ['home.Button'],
    init: function()     

        console.log('Home controller init method...');
    
);

查看

    Ext.define('rpc.view.home.Button', 
    extend: 'Ext.Panel',    
    alias: 'widget.mybutton',
    initialize: function() 
        this.items = [
            
            xtype: 'button',
            cls  : 'demobtn',
            flex : 1
            ]
        ;

        this.callParent();  
    
);

我收到的结果是：

未捕获的类型错误：无法读取未定义的属性“长度”

错误在哪里？在 Sencha Touch 2.0 中使用带有 MVC 的视图添加按钮的正确方法是什么？

谢谢。

【参考方案1】：

尝试更改定义 rpc.view.home.Button 视图的方式，我不会在视图中调用 initialize()，我只是这样做：

Ext.define('rpc.view.home.Button', 
extend: 'Ext.Panel',
xtype: 'mybutton',
config: 
    items = [
        
        xtype: 'button',
        cls  : 'demobtn',
        flex : 1
        
    ]    

);