extjs - 如何根据html代码在特定位置添加extjs面板

Question

我想创建一个 EXT 面板并添加到特定位置。这个地方是<div class= "group-list"></div>。
这是html代码的一部分：

<header>
            <h1><span>Project 2</span>Chat Group List</h1>
        </header>
        <div class= "group-list"></div>
        <div class= "form">
            <form id= "toolform" onsubmit= "">
                <input id="name" name="name" placeholder="group name or email" type="text">
                <input class="buttom" id="submit" name="submit" value="CreateGroup" type="button" onclick="creategroup();">
                <input class="buttom" id="submit" name="submit" value="DeleteGroup" type="button" onclick="deletegroup();">
                <input class="buttom" id="submit" name="submit" value="InviteMember" type="button" onclick="invite();">
            </form>
        </div>

我的问题是：ext js是否可以根据html代码创建一个面板并将面板放置到指定的位置？

Answer 1

Yes.

See the renderTo config option.

new Ext.panel.Panel({
    width: 200,
    height: 200,
    title: 'Foo',
    renderTo: Ext.getBody().down('.group-list') // Grab the first element that matches .group-list
});