OK, I could not find a way to listen to the model directly, however, with the
code below I get a nice and clean separation of concerns to implement a mvc
approach:
// View model
// Create a model for the combo
var comboModel = qx.data.marshal.Json.createModel([]);
// Create a model for the select
var selectModel = qx.data.marshal.Json.createModel([
{
label: 'Select 1', data: '1'
},
{
label: 'Select 2', data: '2'
}
]);
// Create a model for the form
var formModel = qx.data.marshal.Json.createModel({
text: null,
combo: null,
select: null
});
// Create the view
// Create a combo list
var combo = new qx.ui.form.ComboBox();
// Create a textfield
var textf = new qx.ui.form.TextField();
// Create a select list
var select = new qx.ui.form.SelectBox();
// Create the form to hold the fields
// Add listeners to the items to trigger the change message
_.chain([combo, textf, select])
.each((item) => {
item.addListener('focusout', () => {
console.log('change', item);
var msg = new qx.event.message.Message();
msg.setName('formItemChange');
msg.setSender(item);
qx.event.message.Bus.dispatch(msg);
});
});
var form = new qx.ui.form.Form();
form.add(textf, "Text", null, 'text');
form.add(combo, "Combo", null, 'combo');
form.add(select, "Select", null, 'select');
// Create a renderer for the form
// and add the form to the window
// using a vbox layout
var rend = new qx.ui.form.renderer.Single(form);
var wnd = new qx.ui.window.Window();
wnd.setLayout(new qx.ui.layout.VBox());
wnd.add(rend);
wnd.setComboModel = (model) => {
var comboCtrl = new qx.data.controller.List(model, combo);
};
wnd.setSelectModel = (model) => {
// Create a selectbox and controller using the select model
var selectCtrl = new qx.data.controller.List(null, select);
// Map the model to the select box
selectCtrl.setDelegate({
bindItem: (ctrl, item, indx) =>
{
ctrl.bindProperty("label", "label", null, item, indx);
ctrl.bindProperty("data", "model", null, item, indx);
}
});
selectCtrl.setModel(model);
};
wnd.setFormModel = (model) => {
// Create a form to hold the textfield and combo
// and a controller using the form model
var frmCtrl = new qx.data.controller.Form(model, form);
};
// Controller
// Set the model to the view
wnd.setComboModel(comboModel);
wnd.setSelectModel(selectModel);
wnd.setFormModel(formModel);
// Show the window
wnd.show();
// Add items to the comboModel
comboModel.push('Test');
comboModel.push('Test2');
// Get the model after the user changed
// the view, reflecting these changes
qx.event.message.Bus.subscribe('formItemChange', () => {
console.log(qx.util.Serializer.toJson(formModel));
});
The code above is not 'packaged' in separate classes, but that is trivial to
do. Note that the 'view' and the 'model' are completely unaware of each
other. The 'controller' part does the controlling bit of view and model.
--
View this message in context:
http://qooxdoo.678.n2.nabble.com/How-to-listen-to-model-change-tp7586702p7586706.html
Sent from the qooxdoo mailing list archive at Nabble.com.
------------------------------------------------------------------------------
New Year. New Location. New Benefits. New Data Center in Ashburn, VA.
GigeNET is offering a free month of service with a new server in Ashburn.
Choose from 2 high performing configs, both with 100TB of bandwidth.
Higher redundancy.Lower latency.Increased capacity.Completely compliant.
http://p.sf.net/sfu/gigenet
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
