如何在初始设置后引用(子)Sencha Touch中的组件

how to reference (sub)components in Sencha Touch after a initial setup?

本文关键字：Sencha Touch 组件 引用 设置      更新时间：2023-09-26

我正在尝试创建一个sencha web应用程序。我已经调整了很多例子，这个框架开始对我有意义了。我经常碰到两件事。

1。考虑下面的代码:

var application;
var left = new Ext.Panel({
    fullscreen: false,
    style: "background-color:#039CF9;color:white;",
    dock: 'left',   
    html: 'left',
    width:320
});
var right = new Ext.Panel({
    fullscreen: false,
    style: "background-color:#ffffff;color:black;",
    dock: 'right',    
    html: 'right',
});
application = new Ext.Application({
    name: 'xaddict',
    launch: function() {
        this.viewport = new Ext.Panel({
            fullscreen: true,
            id    : 'mainPanel',
            layout: {type:'hbox',align:'stretch',pack:"center"},
            dockedItems :[right]
        });
    }
});
application.viewport.addDocked(left);

不知何故，如果你通过属性"dockedItems"添加"左"answers"右"到应用程序，它就像它应该的那样，但如果我稍后尝试添加它，控制台说在application.viewport中没有"addDocked"功能。我真的很想在myapp.js中创建应用程序，并将我的页面的主体代码添加到此设置中。由于CMS的限制，我无法将这段新代码插入到现有代码中。

2。其次。Sencha Touch的参考资料和文档都不清楚在构建应用程序时使用什么语法。有些说是Ext.Setup，有些是设置应用程序，还有一些告诉你扩展组件并将其作为起点。哪一个是"正常"的?

你得到这个错误的原因是你的语句执行的顺序。应用程序的launch()方法在框架和应用程序全部加载并准备就绪后执行(类似于onReady事件)。这意味着addDocked调用发生在启动方法调用之前，因此应用程序。尚未定义视口

如果在启动方法中添加一个console.log，并在addDocked调用之前添加一个console.log，您将看到顺序发生。

你应该移动application.viewport.addDocked(left);行到你的launch()方法中:

application = new Ext.Application({
    name: 'xaddict',
    launch: function() {
        this.viewport = new Ext.Panel({
            fullscreen: true,
            id    : 'mainPanel',
            layout: {type:'hbox',align:'stretch',pack:"center"},
            dockedItems :[right]
        });
        application.viewport.addDocked(left);
    }
});

关于你的其他问题…

当前的最佳实践是沿着Ext.Application路线走下去，并根据MVC(模型-视图-控制器)架构构建应用程序。没有大量的资源可以详细说明如何应用它，但是Twitter和Kiva的示例应用程序确实使用了它，并且是一个很好的起点。

我100%推荐扩展组件并将它们保存在自己的文件中，并使用这些构建块构建应用程序(这些基本上将成为MVC中的V)。

相关文章：