Javascript 初始设置后如何参考Sencha Touch中的(子)组件?
我正在尝试用sencha创建一个webapp。我已经修改了很多例子,框架对我来说是有意义的。不过,我经常碰到两件大事 一,。 考虑下面的代码:Javascript 初始设置后如何参考Sencha Touch中的(子)组件?,javascript,function,scope,sencha-touch,instance-variables,Javascript,Function,Scope,Sencha Touch,Instance Variables,我正在尝试用sencha创建一个webapp。我已经修改了很多例子,框架对我来说是有意义的。不过,我经常碰到两件大事 一,。 考虑下面的代码: var application; var left = new Ext.Panel({ fullscreen: false, style: "background-color:#039CF9;color:white;", dock: 'left', html: 'left', width:320 });
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”将“left”和“right”添加到应用程序中,它会按预期的方式执行,但如果我稍后尝试添加它,控制台会说application.viewport中没有“addDocked”函数。我真的很想在myapp.js中创建应用程序,并将我页面的主体代码添加到该设置中。由于CMS限制,我无法将此新代码插入现有代码
二,。
其次Sencha Touch引用和文档不清楚在构建应用程序时使用什么语法。一些人说Ext.Setup,另一些人说Ext.Setup是用来设置应用程序的,还有一些人告诉你扩展一个组件,并以此作为起点。哪一个是“正常”的?出现该错误的原因是语句的执行顺序。应用程序的launch()方法在框架和应用程序全部加载并准备就绪后执行(类似于onReady事件)。这意味着addDocked调用发生在调用launch方法之前,因此application.viewport尚未定义 如果在launch方法中添加一个console.log,并且在addDocked调用之前添加一个,您将看到订单发生 您应该移动application.viewport.addDocked(左)启动()方法中的行: 在回答你的其他问题时 当前的最佳实践是沿着外部应用程序路线,根据MVC(模型-视图-控制器)体系结构构建应用程序。关于如何应用这一点,目前还没有大量的可用资源,但Twitter和Kiva示例应用程序确实使用了它,这是一个很好的起点
我会100%地建议扩展组件并将它们保存在自己的文件中,并使用这些构建块构建应用程序(这些基本上将成为MVC中的V)。它使维护变得更加容易,并使事情保持结构化和组织化。问题是我正在尝试建立一个自定义Sencha设置。。。它构建在常规CMS之上,没有在现有代码中插入自定义javascript的选项。相反,我可以加载整个页面,我可以在头部填充javascript(sencha设置)。这样做的问题是,在头代码之后将生成一个菜单。有没有办法在一个文件中进行常规设置,并在正文中使用其他代码来设置嵌套列表或面板并将其添加到应用程序中?
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);
}
});