Загрузить файл html в панель

Ответ 1

Система класса сильно изменилась в Sencha Touch 2 по сравнению с 1.x. Теперь это очень похоже на то, как 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 (ничего не нужно менять):

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

Надеюсь, это поможет.

Ответ 2

rdougan Ответ работал у меня. Если он по-прежнему не работает для вас, посмотрите этот пример из Sencha Docs, где они загружают файлы .js, используя AJAX, немного отличающийся (это было бы точно так же для файлов .html). Чтобы получить исходный код, загрузите Sencha Touch 2 SDK, и он будет находиться под examples/nestedlist.