CODEWITHSUNDEEP
extjsextjs5
sum_tannie
sum_tannie

Reputation: 5

ExtJs 5.0 - appending html in Viewport

I'm trying to build a rating system on my help page using following rating widget

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

I've a viewport with following sections:

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

Now in this design, rating widget is in south region. Instead, I wish to remove south region and append rating widget at the bottom of the contents of center region after calling "getAndUpdateHelpContents" function as this function clears and updates the contents in center region whenever user clicks a link on left/west region/tree. Following is this function in jquery

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

}

Pls help as in how to append this rating at the end of center region contents (after dynamic loading)!

Thanks.

Upvotes: 0

Views: 164

Answers (1)

Saki
Saki

Reputation: 5856

Generally, you do not need any html markup in Ext to add a component to it. The required markup is generated by Ext and by the widget automatically.

When you have a container (Panel is also a container) then you can call ct.add(rating) - the widget is added to the panel as the last item.

You probably don't want to add it on each click in the listener you indicated.

Upvotes: 2

Related Questions