ExtJs 5.0-在视口中追加html

我正试图在我的帮助页面上使用以下评级小部件建立一个评级系统

我有一个包含以下部分的视口：

/********* WEST REGION *********/
var helpTree = Ext.create('Ext.tree.Panel', {
    id                : 'helpTree',
    useArrows         : true,
    region            : 'west',
    collapsible       : true,
    listeners         :{
        itemclick : function(node, record, item, index, e){ 
            // Get contents using AJAX and update it in center region of viewport.
            getAndUpdateHelpContents(record.get('id'));
        }
    },
});

/******** CENTER REGION ********/
var helpTab = Ext.create ('Ext.tab.Panel', {
    id : 'helpTab',
    region:'center',
    activeTab:0,

    items:{
       id : 'helpItemTab',
       title: 'Contents',
       html: '<h4>Welcome to Help System<h4>',
    },
});

var rating = new Ext.ux.widget.Rating({
    id : 'ratingField',
    fieldLabel  :   'Rating',
    allowBlank  : false,
    value       : 2.5,
    titles: {
        '0': 'poor', 
        '1.4': 'medium',
        '3': 'excellent',
        '5': 'perfect'
    },
});

/******** SOUTH REGION ********/
var ratingTab = Ext.create ('Ext.form.Panel', {
    id : 'ratingTab',
    region:'south',
    layout : 'anchor',
    margins: '5 5 5 0', 
    items:[rating]
});

/******** VIEWPORT ********/
Ext.create('Ext.container.Viewport', {
  renderTo: Ext.getBody(),
  layout: 'border',

  items: [
    helpTree,
    helpTab,
    ratingTab
  ] 
});

/*******西部地区*********/
var helpTree=Ext.create（'Ext.tree.Panel'{
id:'帮助树'，
是的，
地区：'西部'，
可折叠的：是的，
听众：{
itemclick：函数（节点、记录、项、索引、e）{
//使用AJAX获取内容并在视口的中心区域进行更新。
getAndUpdateHelpContents（record.get（'id'））；
}
},
});
/********中心区********/
var helpTab=Ext.create（'Ext.tab.Panel'{
id:“帮助选项卡”，
地区：'中心'，
活动选项卡：0，
项目：{
id:“helpItemTab”，
标题：“目录”，
html:“欢迎使用帮助系统”，
},
});
var rating=新的Ext.ux.widget.rating({
id:“ratingField”，
fieldLabel:“评级”，
allowBlank:false，
价值：2.5，
标题：{
“0”：“差”，
“1.4”：“中等”，
"3":"非常好",，
“5”：“完美”
},
});
/********南方地区********/
var ratingTab=Ext.create（'Ext.form.Panel'{
id:'额定值选项卡'，
地区：'南'，
布局：“锚定”，
边距：“5 0”，
项目：[评级]
});
/********视区********/
Ext.create（'Ext.container.Viewport'{
renderTo:Ext.getBody（），
布局：“边框”，
项目：[
帮助树，
帮助选项卡，
比率表
] 
});

现在在这个设计中，评级小部件位于南部地区。相反，我希望在调用“getAndUpdateHelpContents”函数后删除south region并将rating小部件附加到中心区域内容的底部，因为每当用户单击左/西区域/树上的链接时，该函数都会清除并更新中心区域中的内容。以下是jquery中的此函数

function getAndUpdateHelpContents(id, text) {
  htmlContents = "<p>This is Test</p>";
  $("#helpItemTab").html(htmlContents);

函数GetAndUpdateHelpContent（id，文本）{ htmlContents=“这是测试”

”； $（“#helpItemTab”）.html（HTMLContent）； }

请帮助我们如何在中心区域内容末尾添加此评级（动态加载后）

---

谢谢。

一般来说，在Ext中添加组件不需要任何html标记。所需的标记由Ext和小部件自动生成

当您有一个容器（面板也是一个容器）时，您可以调用

ct.add（rating）

-小部件作为最后一项添加到面板中

您可能不想在指定的侦听器中的每次单击中添加它