使用 Sencha ExtJS 增强现有的 Web 应用程序？答案

【问题标题】：Enhance existing web app with Sencha ExtJS?使用 Sencha ExtJS 增强现有的 Web 应用程序？
【发布时间】：2011-07-15 04:59:04
【问题描述】：

我有一个现有的 Web 应用程序，它使用标准的 jQuery 驱动的数据网格，但确实可以做一些更花哨的事情。

Sencha 网站上的所有 ExtJS 示例都使用它们的布局创建器以及如何在浏览器中复制桌面应用程序。我想知道 - 按照标准 web 应用程序在“普通”HTML 页面中使用 ExtJS 组件/小部件是否可能（并且可行）？

【问题讨论】：

标签： web-applications widget extjs

【解决方案1】：

是的，当然。您可以在页面中包含 ExtJS 库，就像 jQuery 一样，并执行各种操作 - 操作 DOM、添加/删除页面上的 HTML 元素、在标记中的任何位置插入 ExtJS 组件等。

例如，如果您有一个 id 为“my-ext-widget”的元素，那么您可以创建一个 ext 组件（如面板）并将其插入该元素中，如下所示：

Ext.onReady(function() {
    myPanel = new Ext.Panel({
        title:'Sample Panel',
        height:300,
        width:200,
        html:'This is a sample panel'
    });

    myPanel.render("my-ext-widget");
});

你到底想做什么？

【讨论】：

您也可以使用 renderTo 配置并省略 .render() 调用作为单独的行。
谢谢，这正是我想知道的！我想使用 ExtJS 数据网格组件作为 jQuery 选项，虽然是功能性的，但不要在功能或视觉外观方面进行比较。数据需要在服务器端进行排序（由于数量），有一个链接到数据网格的搜索框，此外还可以按一列的值进行过滤。我的印象是 ExtJS 是一个独立的 RIA 工具包，不能用于增强基于 HTML 的 webapp。

【解决方案2】：

您所要求的内容是可能的，并且不会对您当前的代码库造成太大影响。即，您可以加载现有的 DOM，然后在页面加载后执行 Sencha 魔法（在 onReady 中，正如 Jonathan 解释的那样），无论您能想到什么（在 ExtJS 边界范围内）。

此外，并非所有示例都使用它们的布局创建器。
这是您尝试了解的概念的完美示例- How to create a grid from an existing, unformatted HTML table

【讨论】：

谢谢 amol，我错过了那个演示！
新网址是docs.sencha.com/extjs/4.0.7/#!/example/grid/transform-dom.html