Question

I am very new to sencha and probably do not know how everything you need. I’m trying to extract some contents of an HTML page using ajax. For example, the text in a div with id = “content”.

I want to put this content extracted in a panel or container Sencha.

This is the view that I have:

Ext.define("myapp.view.Main", {
   extend: 'Ext.tab.Panel',

   requires: ['Ext.TitleBar'],

   config: {
       tabBarPosition: 'bottom',

       items: [
          {
            title: 'Welcome',
            iconCls: 'home',

            styleHtmlContent: true,
            scrollable: true,

            html: FUNCTION_TO_GET_CONTENT   .join("")
         }
      ]
   }
});

I would like to know if there is any way to get the contents of the HTML page displayed in a panel, but I do not know how. Can someone please help me understand this and how I can best address this?

UPDATE:

Basically what I would like to do is to replicate the result of this JQuery statement:

 $("#mylocaldiv").load("sourcePage.html #mainDiv");

and then append the result to the html property in the tab panel.

Answer 1

First, add an alias to your view (make sure it’s preceded by widget.

Ext.define("myapp.view.Main", {
    extend: 'Ext.tab.Panel',
    alias: 'widget.Main',
    ...
});

Then get your view by doing either:

myView = Ext.Viewport.down('Main');

or

myView = Ext.ComponentQuery.query('Main');

Now you can access your items like so:

myView.items.items

And since your panel is the only item, it will be item zero. You can then use it’s setHtml method to append html:

myView.items.items[0].setHtml('your html here');

In terms of loading an html file into the panel, I believe Sencha removed Ext.dom.Element.load(). I would use a simple Ajax request and then append the result into the panel in the success callback. See here: load an html file into a panel