ext加载一个html文件夹,将html文件加载到面板中

rdougan..

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,配置也并不需要成为配置对象之内.

您可以通过阅读本指南了解有关新课程系统的更多信息.还有关于如何从1.x中迁移到2.x一个很大的指导这里.

所以,让我们让你的代码工作.

index.html(没有必要改变):

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);

}

});

}

});

希望这会有所帮助.