Question

I’m writing an application on qooxdoo. I have a class, which should return table with data and widget with clicked by user on row information (similar interface as in email client).

However information in html embedded widget is initialized only once at loading, after it not changing. How to rewrite code for showing user clicked row in html widget?
This is my code:

qx.Class.define("bank.InvoiceListBuilder",
{
  extend : qx.core.Object,
  statics:
  {
    createList : function(folder) {

        var box = new qx.ui.layout.VBox();
        box.setSpacing(0);

        var container = new qx.ui.container.Composite(box);
        container.setPadding(0);

        // table construction
            var data = new qx.data.Array;
            var invoice = new qx.data.Array;
            var tableModel = new qx.ui.table.model.Simple();
            tableModel.setColumns([ "id", "status", "name", "surname", "date", "email", "amount", "payexp", "description" ]);
            var rpc = new qx.io.remote.Rpc(
                "http://192.1.1.102/rpc",
                "mylist"
            );
            var handler = function(result, exc) {
              if (exc == null) 
              { 
                data = qx.lang.Json.parse(result);
                tableModel.setData(data);
              } else {
                alert("Exception during async call: " + exc);
              }
            };
            rpc.callAsync(handler, "listings", folder);
            var table = new qx.ui.table.Table(tableModel);
            var rowcontent = function(e)
            {
                var row = table.getFocusedRow();
                invoice = tableModel.getRowData(row);
                console.log(invoice);
            };
            table.addListener('cellClick', rowcontent, this);           
            table.getTableColumnModel().setColumnVisible(1, false);                 
            table.setShowCellFocusIndicator(false);
            table.setHeight(300);
            container.add(table);

            // invoice content view
            var rich = new qx.util.StringBuilder();

            if (invoice[2] == null)
            {
                rich.add("<b>Text</b>");
            } else {
                rich.add("<b>",invoice[2],"</b>");
            }
            var richWidget = new qx.ui.embed.Html(rich.get());
            console.log(rich.get());
            console.log(invoice[3]);
            richWidget.setOverflow("auto", "auto");
            richWidget.setDecorator("main");
            richWidget.setBackgroundColor("white");
            richWidget.setWidth(200);
            richWidget.setHeight(300);          
            container.add(richWidget);

            return(container);
    }
  }

Answer 1

for the richWidget to change its content, you actually have to update it. Just changing the value of an array does not have any effect here … (it could, if the array was a qooxdoo Array object and you were using data bindings …). In any event, in the same way you are calling setData in your rpc callback, you have to call setHtml on your rich widget in the second callback:

var richWidget = new qx.ui.embed.Html();
var rowcontent = function(e) {
    var row = table.getFocusedRow();
    var invoice = tableModel.getRowData(row);
    var rich = new qx.util.StringBuilder();
    if (invoice[2] == null) {
         rich.add("<b>Text</b>");
    } else {
         rich.add("<b>",invoice[2],"</b>");
    }
    richWidget.setHtml(rich.get());
};

There is more though. Instead of creating a static function, I would suggest to base your implementation on the qx.ui.container.Composite widget and then use new bank.InvoiceList() to instantiate your code. (this will not influence the functionality, but it is ‘the right thing’.