Блог

Главная - Вопросы по программированию - Sencha Touch: настройка автоматической загрузки для включения HTML-файла

Sencha Touch: настройка автоматической загрузки для включения HTML-файла

#sencha-touch #extjs #autoload

#sencha-touch #extjs #автозагрузка

Вопрос:

Я настроил простую панель в Sencha Touch с 2 вкладками:

 ToolbarDemo.views.Homecard = Ext.extend(Ext.TabPanel, {
    title: "home",
    iconCls: "home",
    defaults: {
        styleHtmlContent: true
    },
    items: [{
        title: 'Playlist',
        scroll: 'vertical',
        html: 'test'
    },{
        title: 'Comments',
        scroll: 'vertical',
        autoLoad: {url: 'disqus.html', scripts: true}
    }]
});

Ext.reg('homecard', ToolbarDemo.views.Homecard);

На вкладке «Комментарии» я пытаюсь включить disqus.html файл, который находится на том же уровне, что и index.html файл для моего приложения, но ничего не отображается. Из поиска в Google может показаться, что я правильно ввел код автозапуска, но, возможно, я пропустил еще один шаг?

Может ли кто-нибудь помочь мне в моем пути?

Спасибо,

Ник

Код Disqus:

 <div id="disqus_thread"></div>

    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'monthlymixup'; // required: replace example with your forum shortname

        // The following are highly recommended additional parameters. Remove the slashes in front to use.
        var disqus_identifier = 'test';
        // var disqus_url = 'http://example.com/permalink-to-page.html';

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = 'http://'   disqus_shortname   '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Ответ №1:

Свойство «Автозагрузка» доступно только в ext.js и пока недоступна в sencha-touch.

Но вы можете сделать что-то вроде этого (ваш пробег БУДЕТ отличаться):

 Ext.setup({
onReady: function() {
    var tabPanel = new Ext.TabPanel({
        fullscreen: true,
        type: 'dark',
        sortable: true,
        items: [{
            title: 'Tab 1',
            html: '1',
            cls: 'card1',
        }, {
            title: 'Tab 2',
            html: '2',
            cls: 'card2'
        },
        {
            title: 'Tab 3',
            html: '3',
            cls: 'card3'
        }]
    });
    Ext.Ajax.request({
      url: 'disqus.html',
      success: function(response, opts) {
      tabPanel.items.get(2).update(response.responseText, true);  //2nd parameter is "loadScripts"
    }
    });
  }
});

(disqus.html )

 <html>
  <head>
  </head>
  <body>Hello World.</body>
</html>

Комментарии:

1. Спасибо. Я попытался реализовать ваше решение. Когда я включаю disqus.html на том же уровне, что и index.html на вкладке 3 ничего не отображается. Перед включением я только что получил html ‘3’ на вкладке 3. Должен ли disqus.html отображается на вкладке 3?

2. Для меня это работает, вы работаете на веб-сервере или открываетесь через «file: //» из командной строки?

3. Если я запустил его из командной строки, я действительно получил 3, поэтому я получил ошибку «origin». Я тестировал с Chrome, и консоль предоставляет много информации.

4. Я запускаюсь с веб-сервера

5. Каково содержимое вашего disqus.html поле? Я добавил свое содержимое выше.

Ответ №2:

Я хотел бы привести фрагмент кода, который я использую для получения внешнего html. Как вы можете заметить, вам следует использовать обратный вызов вместо функции успеха. Не уверен, почему, часто результатом становится сбой функции.

     Ext.Ajax.request({
        url: url,
        method: 'GET',
        callback: function(options, success, response) {
            // do what you need with response.responseText
            // I'm updating a panel with styleHtmlContent: true,
        }
    });