将 HTML 转换为 Sencha

Posted 2023-02-25

【中文标题】将 HTML 转换为 Sencha

【英文标题】：Convert HTML to Sencha

【发布时间】：2012-07-16 21:47:59

【问题描述】：

我对煎茶很陌生，可能不知道你需要什么。我正在尝试使用 ajax 提取 html 页面的一些内容。例如，id = "content" 的 div 中的文本。

我想把这个提取出来的内容放到一个面板或者容器Sencha中。

这是我的观点：

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("")
         
      ]
   
);

我想知道是否有任何方法可以让 HTML 页面的内容显示在面板中，但我不知道如何。有人可以帮助我理解这一点以及如何最好地解决这个问题吗？

更新：

基本上我想做的是复制这个 JQuery 语句的结果：

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

然后将结果附加到选项卡面板中的 html 属性中。

【参考方案1】：

首先，为您的视图添加一个别名（确保其前面有 widget.

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

然后通过以下任一方式获取您的视图：

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

或

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

现在您可以像这样访问您的项目：

myView.items.items

并且由于您的面板是唯一的项目，因此它将是零项目。然后你可以使用它的setHtml 方法来附加html：

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

在将html文件加载到面板方面，我相信Sencha删除了Ext.dom.Element.load()。我会使用一个简单的 Ajax 请求，然后在成功回调中将结果附加到面板中。见这里：load an html file into a panel

【讨论】：

谢谢埃德加。我正在尝试在 SenchaTouch 中使用我自己的自定义标记构建自定义组件。我看到我可以使用上面的 setHTML() 方法将任何自定义标记或 DOM 元素设置为面板的“HTML 内容”。但是：- 1）有没有办法在内容中嵌入变量以在运行时被数据替换？ 2）如果我的自定义组件是一个“容器”，是否有任何生命周期方法我可以覆盖来控制我的子组件的呈现。有没有关于如何在 Sencha Touch 中构建自定义组件的教程可以参考。

@Nikhil_Katre 1) 您可能应该查看 XTemplates (docs.sencha.com/touch/2-0/#!/api/Ext.XTemplate) 2) 您可以扩展 Container，然后覆盖其事件 (docs.sencha.com/touch/2-0/#!/api/Ext.Container)

【参考方案2】：

sencha 不是构建大型应用程序的好工具，所以最好选择另一个。我试过了，它浪费了我的时间，根本没有用，windows 面板和更多使用不使用 css 的图像开发的。如果我们用它构建大型应用程序，我们可能会降低应用程序的性能。

【讨论】：

感谢 cmets，但这不是我的选择。

【参考方案3】：

观看此video。

这将有助于您的问题，并让您对 Sencha Touch 有更深入的了解。

【讨论】：

我已经观看了几次视频并且也复制了该应用程序。我想我需要一个更具体的答案。