Convert HTML to Sencha

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.

score 3 · Accepted Answer · edited May 23 '17 at 12:04

3

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

edited May 23 '17 at 12:04

Community

1
1

answered Jul 20 '12 at 13:42

paz

520
1
4
11

Thanks Edgar. I am trying to build a custom component out of my own custom markup in SenchaTouch. I see that I can use the above setHTML() method to set any custom markup or DOM Element as the "HTML content" of a panel. However :- 1) Is there a way to embed variables within the content to be replaced by data at runtime ? 2) If my custom component is a "container", are there any lifecycle methods I can override to control the rendering of my child components. Is there any tutorial that we can refer to on how to build custom components in Sencha Touch. – Nikhil_Katre Aug 03 '12 at 11:29
@Nikhil_Katre 1) You should probably look into XTemplates (http://docs.sencha.com/touch/2-0/#!/api/Ext.XTemplate) 2) You can extend Container and then override its Events (http://docs.sencha.com/touch/2-0/#!/api/Ext.Container) – paz Aug 15 '12 at 14:03

score 1 · Answer 2 · answered Jul 17 '12 at 04:42

1

sencha is not a good tool for building large applications, so better to choose another one. I was tried it and it sucks my time and no use at all, the windows panels and many more developed using images not with css. if we build large apps with that we may decline the performance of app.

answered Jul 17 '12 at 04:42

kongaraju

9,344
11
55
78

Thanks for the comments but that is not an option for me. – locorecto Jul 17 '12 at 13:03

Convert HTML to Sencha

2 Answers2