Results 1 to 4 of 4

Thread: Progressbar in span/div is not correct

  1. #1
    Sencha User
    Join Date
    Jun 2015
    Posts
    19
    Answers
    3

    Default Answered: Progressbar in span/div is not correct

    Hello!
    I want to render component progress-bar in my span and insert it in text/tooltip/cell or etc.
    Then I render progressbar in body:

    Code:
                Ext.create("Ext.ProgressBar", {
                    renderTo: Ext.getBody(),
                    value: chartCase.key / 100,
                    width: 100
                });
    Style for "x-progress-text" taking the width of component (100px in this case), so it centered.

    Then I render it in element:
    Code:
                var span = $("<span>").attr("id", this.getId()).css("float", position);
                Ext.create("Ext.ProgressBar", {
                    renderTo: span[0],
                    value: chartCase.key / 100,
                    width: 100
                });
    Style "width" of x-progress-text disappears, and text "value%" pressed to the left.
    How can I solve this problem without forced setting style for class ".x-progress-text"?
    Thanks!

  2. If we want to render extjs widget in costum DOM-element, necessary use option "renderTo" to exist DOM-element in DOM-tree.
    For example:

    Code:
    var span = $("<span>").attr("id", this.getId());
    $(span[0]).appendTo("exist-element");
    Code:
    Ext.create("Ext.ProgressBar", {
        renderTo: $("#" + id)[0],
        value: chartCase.key / 100,
        width: 100
    });

  3. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Seems to work here:
    https://fiddle.sencha.com/#fiddle/ohd

    Are you able to recreate the issue you are seeing?

  4. #3
    Sencha User
    Join Date
    Jun 2015
    Posts
    19
    Answers
    3

    Default

    Quote Originally Posted by Gary Schlosberg View Post
    Seems to work here:
    https://fiddle.sencha.com/#fiddle/ohd

    Are you able to recreate the issue you are seeing?
    Then I create element:
    Code:
    var span = $("<span>").attr("id", this.getId()).css("float", position).width(100);
    Render progress bar in this:
    Code:
    Ext.create("Ext.ProgressBar", {
                            renderTo: span[0],
                            value: .5,
    width: 100
                        });
    And try to get this html to add in my context, so style of "x-progress-text" is lost:
    Code:
    console.log(span[0].outerHTML);
    1) span[0]:
    Code:
    <span id="wr-86" style="float: left;"><div class="x-progress x-progress-default x-border-box" style="width:100px;" id="progressbar-1025"><div class="x-progress-text x-progress-text-back" id="ext-element-12" style="width: 100px;">0%</div><div id="progressbar-1025-bar" data-ref="bar" class="x-progress-bar x-progress-bar-default" role="presentation" style="width:0%"><div class="x-progress-text" id="ext-element-11" style="width: 100px;"><div>0%</div></div></div></div></span>
    2) span[0].outerHTML
    Code:
    <span id="wr-109" style="float: left;"><div class="x-progress x-progress-default x-border-box" style="width:100px;" id="progressbar-1026"><div class="x-progress-text x-progress-text-back">50%</div><div id="progressbar-1026-bar" data-ref="bar" class="x-progress-bar x-progress-bar-default" role="presentation" style="width:50%"><div class="x-progress-text"><div>50%</div></div></div></div></span>
    And I don't know how to get full html of element in this context.

  5. #4
    Sencha User
    Join Date
    Jun 2015
    Posts
    19
    Answers
    3

    Default

    If we want to render extjs widget in costum DOM-element, necessary use option "renderTo" to exist DOM-element in DOM-tree.
    For example:

    Code:
    var span = $("<span>").attr("id", this.getId());
    $(span[0]).appendTo("exist-element");
    Code:
    Ext.create("Ext.ProgressBar", {
        renderTo: $("#" + id)[0],
        value: chartCase.key / 100,
        width: 100
    });

Similar Threads

  1. How To Create a SPAN tag without a DIV?
    By billtricarico in forum Ext: Q&A
    Replies: 7
    Last Post: 6 Aug 2012, 2:41 PM
  2. Correct way to access Ext.WIndow from span
    By blex2010 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 2 Feb 2011, 9:27 AM
  3. Grid with col span and row span
    By Efrat Arvats in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 15 Nov 2010, 1:25 AM
  4. Possible bug when using fadeIn on a span
    By raccardi in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 2 Jul 2009, 10:00 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •