我是sencha touch 2.0的新手。我有一个html文件。我正在尝试将此html文件(或内容)加载到面板中。我只是使用ajax调用,但它不起作用。以下是代码。
这是我在浏览器中运行的html文件。
的index.html :
<script type="text/javascript" src="touch/sencha-touch-debug.js"></script>
<script type="text/javascript" src="HTMLPanel.js"></script>
<script type="text/javascript" src="app.js"></script>
这是 app.js :
Ext.setup({
name : 'SampleLoad',
requires : ['HTMLPanel'],
launch : function () {
var HTMLPanel = new HTMLPanel({
scroll : 'vertical',
title : 'My HTML Panel',
url : 'sample.html'
});
}
});
这是 HTMLPanel.js :
//HTMLPanel = Ext.extend(Ext.Panel, { //gives error
var HTMLPanel = Ext.define('HTMLPanel',{
extend : 'Ext.Panel',
constructor : function( config ) {
HTMLPanel.superclass.constructor.apply(this, arguments);
// load the html file with ajax when the item is
// added to the parent container
this.on(
"activate",
function( panel, container, index ) {
if( this.url && (this.url.length > 0) )
{
Ext.Ajax.request({
url : this.url,
method : "GET",
success : function( response, request ) {
//console.log("success -- response: "+response.responseText);
panel.update(response.responseText);
},
failure : function( response, request ) {
//console.log("failed -- response: "+response.responseText);
}
});
}
},
this
)
},
url : null
});
我只想在面板中显示html内容。有人可以帮忙吗?
答案 0 :(得分:31)
与1.x相比,Sencha Touch 2中的班级系统发生了很大的变化。它现在与ExtJS 4非常相似。这些变化背后的想法是让它更容易理解,更快地开发和更具活力。
一些变化:
new HTMLPanel({})
。相反,请使用Ext.create
,即Ext.create('HTMLPanel', {})
。Ext.extend
来定义自定义类。相反,请将Ext.define
与extend
属性一起使用。HTMLPanel.superclass.constrctor.apply(this, arguments)
来呼叫父母。相反,您可以使用this.callParent(arguments)
您应该很少覆盖constructor
。这是不好的做法。相反,您应该使用config
块:
Ext.define('HTMLPanel', {
extend: 'Ext.Panel',
config: {
html: 'This is the html of this panel.'
}
});
请注意,使用config
定义新课程时,配置仅在Ext.define
块内。如果要使用Ext.create
,new ClassName
或使用带有xtype的对象创建类的新实例,则配置不需要位于配置对象中。
您可以通过阅读this guide了解有关新课程系统的更多信息。关于如何从1.x迁移到2.x here还有很好的指南。
所以,让我们让你的代码工作。
index.html (无需更改):
<script type="text/javascript" src="touch/sencha-touch-debug.js"></script>
<script type="text/javascript" src="HTMLPanel.js"></script>
<script type="text/javascript" src="app.js"></script>
<强> app.js 强>:
// You should use Ext.application, not Ext.setup
Ext.application({
name: 'SampleLoad',
requires: ['HTMLPanel'],
launch: function () {
var HTMLPanel = Ext.create('HTMLPanel', {
// this is now `scrollable`, not `scroll`
//scroll: 'vertical',
scrollable: 'vertical',
url: 'sample.html'
});
// Add the new HTMLPanel into the viewport so it is visible
Ext.Viewport.add(HTMLPanel);
}
});
<强> HTMLPanel.js 强>:
// You do not need to save a reference to HTMLPanel when you define your class
//var HTMLPanel = Ext.define('HTMLPanel', {
Ext.define('HTMLPanel', {
extend: 'Ext.Panel',
// We are using Ext.Ajax, so we should require it
requires: ['Ext.Ajax'],
config: {
listeners: {
activate: 'onActivate'
},
// Create a new configuration called `url` so we can specify the URL
url: null
},
onActivate: function(me, container) {
Ext.Ajax.request({
// we should use the getter for our new `url` config
url: this.getUrl(),
method: "GET",
success: function(response, request) {
// We should use the setter for the HTML config for this
me.setHtml(response.responseText);
},
failure: function(response, request) {
me.setHtml("failed -- response: " + response.responseText);
}
});
}
});
希望这有帮助。
答案 1 :(得分:5)
rdougan
的回答对我有用。如果它仍然不适合你,请查看this example from the Sencha Docs他们使用AJAX加载.js文件的方式略有不同(对于.html文件来说完全相同)。要获取来源download the Sencha Touch 2 SDK,它将位于examples/nestedlist
。