CODEWITHSUNDEEP
javascriptscrollthemesqooxdoo
Phyo Arkar Lwin
Phyo Arkar Lwin

Reputation: 6891

Trying to make a widget with Non-Native , qooxdoo-Themed scrollbars for qx.ui.embed.Html

I am trying to implement qx.ui.embed.Html with Qooxdoo themed scroll-bars. I wanted to implement it inside vitrual list . All i need is a qx.ui.embed.Html widget with Custom (qx themed) scroll-bars because it is so ugly in native scrolls.

Here is my test :

http://tinyurl.com/kcouvj2

It works in playground.

But I tried to make it a widget:

(i am not an expert in doing so):

qx.Class.define("phwabe.view.ChatView.PostItem",
{
  extend : qx.ui.container.Scroll,
  properties :
  {
    /** Any text string which can contain HTML, too */
    html :
    {
      check : "String",
      apply : "_applyHtml",
      event : "changeHtml",
      nullable : true
    }
  },

  members :
  {
    construct : function()
    {
        this.base(arguments)
    },
    _createChildControlImpl : function(id)
    {
      var control;
      switch(id)
      {
        //case "icon":
        //  control = new qx.ui.basic.Image(this.getIcon());
        //  control.setAnonymous(true);
        //  this._add(control, {row: 0, column: 0, rowSpan: 2});
        //  break;
        case "html":
          control = new qx.ui.embed.Html()
          control.setAllowGrowX(true);
          control.setOverflowY('hidden');
          control.setAllowShrinkY(false)
          this.add(control)
      }
    },
    _applyHtml : function(value, old)
    {
      var post = this.getChildControl("html");
      // Workaround for http://bugzilla.qooxdoo.org/show_bug.cgi?id=7679
      // Insert HTML content
      post.setHtml(value||"");
    }
  }
})

But that is failing hard with :

Error: Exception while creating child control 'html' of widget phwabe.view.ChatView.PostItem[446-0]: Unsupported control: pane

I am doing it wrong obviously. Any Proper way of implementing it in qooxdoo?

Upvotes: 0

Views: 241

Answers (1)

Cajus Pollmeier
Cajus Pollmeier

Reputation: 312

You need to return the created control - and if none matched (in your case "pane"), return the base class method:

// overridden
_createChildControlImpl : function(id)
{
  var control;

  ...

  return control || this.base(arguments, id);
}

Here is a changed playground example: http://tinyurl.com/loljtz6

You need to add a mechanism to adjust the content size of the qx.ui.embed.Html widget automatically if the height is unknown since there is no automatic resizing.

Upvotes: 1

Related Questions