我正在尝试创建一个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"添加"左"one_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)。