qx.data.controller.Table [qx]

gistfile1.txt

qx.Class.define("qx.data.controller.Table", {
  extend : qx.core.Object,

  construct : function(model, target, columns, columnsPaths) {
    this.base(arguments);
    
    if (model) {
      this.setModel(model);
    }
    
    if (target) {
      this.setTarget(target);
    }
    
    if (columns) {
      this.setColumns(columns);
    }
    
    if (columnsPaths) {
      this.setColumnsPaths(columnsPaths);
    }
  },


  properties : {
    model : {
      check : "qx.data.IListData",
      event : "changeModel",
      nullable : true,
      apply : "_applyModel"
    },
    
    target : {
      check : "qx.ui.table.Table",
      event : "changeTable",
      nullable : true,
      apply : "_applyTarget"
    },
    
    columns : {
      check : "qx.data.IListData",
      event : "changeColumns",
      nullable : true,
      apply : "_applyColumns"
    },
            
    columnsPaths : {
      check : "qx.data.IListData",
      event : "changeColumnsPaths",      
      nullable : true,
      apply : "_applyColumnsPaths"
    }
  },
  
  members : {
    _applyModel : function(value, old) {
      if (old) {
        old.removeListener("change", this.__renewContent, this);
        old.removeListener("changeBubble", this.__renewContent, this);
      }
      
      if (value) {
        value.addListener("change", this.__renewContent, this);
        value.addListener("changeBubble", this.__renewContent, this);
        
      }
  
      this._setUp();
    },
    
    _applyTarget : function(value, old) {
      if (old) {
        old.removeListener("dataEdited", this.__onTargetEdited, this);        
      }
      
      if (value) {
        value.addListener("dataEdited", this.__onTargetEdited, this);
      }
      
      this._setUp();
    },
    
    _applyColumns : function(value, old) {
      if (old) {
        old.removeListener("change", this.__renewColumns, this);
      }
      
      if (value) {
        value.addListener("change", this.__renewColumns, this);        
      }

      this._setUp();
    },
    
    
    _applyColumnsPaths : function(value, old) {
      this._setUp();      
    }, 
    
    
    
    _setUp : function() {
      // do nothing if not all data available
      if (this.getModel() == null || this.getTarget() == null || this.getColumns() == null || this.getColumnsPaths() == null) {
        return; 
      }

      if (!this._tableModel) {
        this._tableModel = new qx.ui.table.model.Simple();        
      }

      this.__renewColumns();
      this.__renewContent();
      this.getTarget().setTableModel(this._tableModel);
    },
    
    
    _getData : function() {
      var data = [];
      var model = this.getModel();
      var columnsPaths = this.getColumnsPaths();
      
      for (var i = 0; i < model.getLength(); i++) {
        var row = model.getItem(i);
        data[i] = [];
        for (var j = 0; j < columnsPaths.getLength(); j++) {
          var path = columnsPaths.getItem(j);
          var target = qx.data.SingleValueBinding.getTargetFromChain(row, path);

          if (target != null) {
            // get the name of the last property
            var lastProperty = path.substring(
              path.lastIndexOf(".") + 1, path.length
            );
            // check for an array and set the value to null
            if (lastProperty.charAt(lastProperty.length - 1) == "]") {
              var id = lastProperty.substring(1, lastProperty.length -1);
              if (id == "last") {
                id = target.getLength() - 1;
              }
              data[i][j] = target.getItem(id);
            } else {
              data[i][j] = target.get(lastProperty)
            }
          }
        } 
      }
      
      
      return data;
    },
    
    
    __renewColumns : function(e) {
      if (this._tableModel) {
        this._tableModel.setColumns(this.getColumns().toArray());
      }
    },
    
    __renewContent : function(e) {
      this._tableModel.setData(this._getData());
    },
    
    
    __onTargetEdited : function(e) {
      var data = e.getData();
      this.getModel().getItem(data.row).setItem(data.col, data.value);
    },
    
    
    getTableModel : function() {
      return this._tableModel; 
    }
  }
});




// DEMO CODE
var table = new qx.ui.table.Table().set({width: 302, height: 300});
this.getRoot().add(table);

var data = [
  ["a", "b", "c"],
  ["1", "2", "3"],
  ["x", "y", "z"]  
];
var model = model1 = qx.data.marshal.Json.createModel(data, true);

data = [{one: "a", two: "b", three: "c"}];
var model2 = qx.data.marshal.Json.createModel(data, true);

var columns = new qx.data.Array(["one", "two", "three"]);
var columnsPaths = new qx.data.Array(["[0]", "[2]", "[1]"]);
var columnsPaths2 = new qx.data.Array(["one", "two", "three"]);
var c = new qx.data.controller.Table(model, table, columns, columnsPaths);

c.getTableModel().setColumnEditable(0, true);

// tests
var button = new qx.ui.form.Button("change column content");
this.getRoot().add(button, {left: 330});
button.addListener("execute", function() {
  columns.setItem(0, "ONE");
}, this);

button = new qx.ui.form.Button("chagne content");
this.getRoot().add(button, {left: 330, top: 25});
button.addListener("execute", function() {
  model1.getItem(0).setItem(0, "A");
  model1.getItem(1).setItem(1, "II");
  model1.getItem(2).setItem(2, "Z");
  
  model2.getItem(0).setOne("ONE");
  model2.getItem(0).setTwo("TWO");
  model2.getItem(0).setThree("THREE");
}, this);

button = new qx.ui.form.Button("push row");
this.getRoot().add(button, {left: 330, top: 50});
button.addListener("execute", function() {
  model1.push(new qx.data.Array([1,2,3]));
  model2.push(qx.data.marshal.Json.createModel({one: "x", two: "y", three: "z"}));
}, this);

button = new qx.ui.form.Button("shift row");
this.getRoot().add(button, {left: 330, top: 75});
button.addListener("execute", function() {
  model.shift();
}, this);

button = new qx.ui.form.Button("flip model");
this.getRoot().add(button, {left: 330, top: 100});
button.addListener("execute", function() {
  c.setModel(null);
  if (c.getColumnsPaths() == columnsPaths) {
    c.setColumnsPaths(columnsPaths2);
    c.setModel(model2);
  } else {
    c.setColumnsPaths(columnsPaths);
    c.setModel(model1);
  }
  model = c.getModel();
}, this);