ExtJs 5.0 - добавление html в область просмотра

Я пытаюсь создать систему рейтинга на своей странице справки, используя следующий виджет рейтинга

https://github.com/christophe-g/Ext.ux.widget.Rating

У меня есть окно просмотра со следующими разделами:

/********* 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
  ] 
});

Теперь в этом дизайне виджет рейтинга находится в южном регионе. Вместо этого я хочу удалить южную область и добавить виджет рейтинга внизу содержимого центральной области после вызова функции «getAndUpdateHelpContents», поскольку эта функция очищает и обновляет содержимое в центральной области всякий раз, когда пользователь щелкает ссылку в левой/западной области/дереве. . Ниже приведена эта функция в jquery.

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

}

Пожалуйста, помогите, как добавить этот рейтинг в конец содержимого центральной области (после динамической загрузки)!

Спасибо.


person sum_tannie    schedule 27.11.2014    source источник


Ответы (1)


Как правило, вам не нужна html-разметка в Ext, чтобы добавить к нему компонент. Необходимая разметка генерируется Ext и виджетом автоматически.

Когда у вас есть контейнер (Panel тоже контейнер), то вы можете вызвать ct.add(rating) — виджет будет добавлен на панель как последний элемент.

Вы, вероятно, не хотите добавлять его при каждом щелчке в указанном вами слушателе.

person Saki    schedule 27.11.2014