The checkbox problem was solved with:
af5abf92837255b6b60d30832a63d2a07cd7ae42
Here are some snippets I use for using the checkbox inside a List:
The model of the list is a qx.data.Array which contains several data beans
"newGameModelObject" which has a property "checked".
If you change the "checked" property, the list should automatically re-render
because of the "changeBubble" event.
For firing the "changeBubble" event, the data bean has to include the mixin
"MEventBubbling", and the property apply method has to be
"_applyEventPropagation"
qx.Class.define("newGameModelObject",
{
extend : qx.core.Object,
include : [qx.data.marshal.MEventBubbling],
properties :
{
checked :
{
check :"Boolean",
init : false,
apply : "_applyEventPropagation"
}
}
});
And here is the list's configureItem part I used:
this.__list = new qx.ui.mobile.list.List({
configureItem : function(item, data, row)
{
[...]
var checkBox = new qx.ui.mobile.form.CheckBox(data.getChecked());
checkBox.addListener("changeValue", function(evt){
var item4change = self.__list.getModel().getItem(row);
item4change.setChecked(evt.getData());
});
item.addToButtonContainer(checkBox);
},
createItemRenderer : function() {
return new renderer.Button();
}
}
);
You have to create the checkBox on configureItem and add it into the
ButtonContainer.
Then you have to listen to "changeValue" event on it and change the checked
state of the row item.
Now the model updates itself and triggers a re-rendering of the list >> the
checkbox displays the new state.
Hope that helps to finally solve your problem.
Greetz Christopher
Am 31.01.2013 um 21:17 schrieb Ingo Bürk:
Oh… I just found out by accident that there is no instance for every item, all
list items share the same renderer instance. Oh man, what a misunderstanding! I
guess in that case I don't have a choice but to traverse the list for the
<selectedIndex>-th checkbox.
On 01/31/2013 08:38 PM, Christopher Zündorf wrote:
You can manage that by modifying your "configureItem" method.
Here is the renderer I wrote and how to use it:
this.list = new qx.ui.mobile.list.List({
configureItem : function(item, data, row)
{
item.setTitle("title");
item.setSubtitle("subtitle");
item.setSelectable(false);
item.setShowArrow(false);
var button = new qx.ui.mobile.form.Button("buttontext");
button("tap",function() {
console.log("works");
},this);
item.addToButtonContainer(button);
},
createItemRenderer : function() {
return new mssa.renderer.Bills();
}
}
);
qx.Class.define("renderer.Button",
{
extend : qx.ui.mobile.list.renderer.Abstract,
/*
*****************************************************************************
CONSTRUCTOR
*****************************************************************************
*/
construct : function(layout)
{
this.base(arguments, layout || new qx.ui.mobile.layout.HBox().set({
alignY : "middle"
}));
this._init();
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
members :
{
__image : null,
__title : null,
__subtitle : null,
__rightContainer : null,
__buttonContainer : null,
/**
* Returns the image widget which is used for this renderer.
*
* @return {qx.ui.mobile.basic.Image} The image widget
*/
getImageWidget : function() {
return this.__image;
},
/**
* Returns the title widget which is used for this renderer.
*
* @return {qx.ui.mobile.basic.Label} The title widget
*/
getTitleWidget : function() {
return this.__title;
},
/**
* Returns the subtitle widget which is used for this renderer.
*
* @return {qx.ui.mobile.basic.Label} The subtitle widget
*/
getSubtitleWidget : function()
{
return this.__subtitle;
},
/**
* Sets the source of the image widget.
*
* @param source {String} The source to set
*/
setImage : function(source)
{
this.__image.setSource(source)
},
/**
* Sets the value of the title widget.
*
* @param title {String} The value to set
*/
setTitle : function(title)
{
this.__title.setValue(title);
},
/**
* Sets the value of the subtitle widget.
*
* @param subtitle {String} The value to set
*/
setSubtitle : function(subtitle)
{
this.__subtitle.setValue(subtitle);
},
/**
* Sets the value of the subtitle widget.
*
* @param subtitle {String} The value to set
*/
addToButtonContainer : function(widget)
{
this.__buttonContainer.add(widget);
},
/**
* Inits the widgets for the renderer.
*
*/
_init : function()
{
this.__image = this._createImage();
this.add(this.__image);
this.__rightContainer = this._createRightContainer();
this.add(this.__rightContainer, {flex:1});
this.__buttonContainer = this._createButtonContainer();
this.add(this.__buttonContainer,{flex:0});
this.__title = this._createTitle();
this.__rightContainer.add(this.__title);
this.__subtitle = this._createSubtitle();
this.__rightContainer.add(this.__subtitle);
},
/**
* Creates and returns the right container composite. Override this to
adapt the widget code.
*
* @return {qx.ui.mobile.container.Composite} the right container.
*/
_createRightContainer : function() {
return new qx.ui.mobile.container.Composite(new
qx.ui.mobile.layout.VBox());
},
/**
* Creates and returns the button container composite. Override this to
adapt the widget code.
*
* @return {qx.ui.mobile.container.Composite} the right container.
*/
_createButtonContainer : function() {
return new qx.ui.mobile.container.Composite(new
qx.ui.mobile.layout.HBox());
},
/**
* Creates and returns the image widget. Override this to adapt the widget
code.
*
* @return {qx.ui.mobile.basic.Image} the image widget.
*/
_createImage : function() {
var image = new qx.ui.mobile.basic.Image();
image.setAnonymous(true);
image.addCssClass("list-itemimage");
return image;
},
/**
* Creates and returns the title widget. Override this to adapt the widget
code.
*
* @return {qx.ui.mobile.basic.Label} the title widget.
*/
_createTitle : function() {
var title = new qx.ui.mobile.basic.Label();
title.setWrap(false);
title.addCssClass("list-itemlabel");
return title;
},
/**
* Creates and returns the subtitle widget. Override this to adapt the
widget code.
*
* @return {qx.ui.mobile.basic.Label} the subtitle widget.
*/
_createSubtitle : function() {
var subtitle = new qx.ui.mobile.basic.Label();
subtitle.setWrap(false);
subtitle.addCssClass("subtitle");
return subtitle;
},
// overridden
reset : function()
{
this.__image.setSource(null);
this.__title.setValue("");
this.__subtitle.setValue("");
this.__buttonContainer.removeAll();
}
},
/*
*****************************************************************************
DESTRUCTOR
*****************************************************************************
*/
destruct : function()
{
this._disposeObjects("__image", "__title", "__subtitle",
"__rightContainer", "__buttonContainer");
}
});
Am 31.01.2013 um 20:29 schrieb Ingo Bürk:
Hi Christopher,
using the css class sure is possible. However, while I'm able to control the
HTML element of selected items, it won't allow me to actually control the list
item (in this case the CheckBoxListItem instance), but I was wondering if
there's a way to do that? It just feels "hacky" to filter for a css class, get
the corresponding <li> element and then select the checkbox within that
element. I'd rather control the qx instance.
Also I was wondering how you managed to add events to your buttons in the
button list. If that's not a problem for the project you wrote it for, maybe
you could share the implementation of that list? I sure could learn from it.
Thank your for all you help so far.
Kind Regards
Ingo
On 01/31/2013 01:52 PM, Christopher Zündorf wrote:
As a quick fix, you could use the "selected" state of the menu as a indicator,
which list item is selected.
The css class
"item-selected"
on the list item could help you. You can take a part of the implementation of
qx.ui.mobile.dialog.Menu for this purpose.
Greetz Christopher
Am 31.01.2013 um 10:28 schrieb Ingo Bürk:
Hi Christopher,
I'm aware that the native box is intended to be hidden. I just pointed out that
it is at least there, but the replacement-box isn't. As for the container: I
had already tried that and it didn't change anything. I should have mentioned
that, sorry. Adding buttons, labels etc. instead of a checkbox works fine, by
the way. Only checkboxes (and radio buttons) seem to have a problem.
Regards
Ingo
On 01/31/2013 10:23 AM, Christopher Zündorf wrote:
Hi again,
I have had a look at your example, and your problem.
First: the native checkbox input is intended to be hidden. In many browser the
checkbox styling can not be changed, and that is why we have an overlay
for this checkbox with CSS pseudo elements.
You problem might be caused by the fact that your check box is not wrapped by a
composite container. Without the container, the label and the sublabel takes
the whole space of the list item entry.
I written a renderer for an application which display buttons inside a list
item. The important methods are:
[...]
extend : qx.ui.mobile.list.renderer.Abstract,
[...]
/**
* Inits the widgets for the renderer.
*
*/
_init : function()
{
this.__image = this._createImage();
this.add(this.__image);
this.__rightContainer = this._createRightContainer();
this.add(this.__rightContainer, {flex:1});
this.__buttonContainer = this._createButtonContainer();
this.add(this.__buttonContainer,{flex:0});
this.__title = this._createTitle();
this.__rightContainer.add(this.__title);
this.__subtitle = this._createSubtitle();
this.__rightContainer.add(this.__subtitle);
},
[...]
/**
* Creates and returns the button container composite. Override this to
adapt the widget code.
*
* @return {qx.ui.mobile.container.Composite} the right container.
*/
_createButtonContainer : function() {
return new qx.ui.mobile.container.Composite(new
qx.ui.mobile.layout.HBox());
},
[…]
Please try to wrap your checkbox by a composite, just like in the example. That
might help solving your problem.
Greetz Christopher
Am 30.01.2013 um 20:24 schrieb Ingo Bürk:
http://www.airblader.de/qxCheckBoxList/index.html
<http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#><http://www.airblader.de/qxCheckBoxList/index.html#>
------------------------------------------------------------------------------
Everyone hates slow websites. So do we.
Make your web apps faster with AppDynamics
Download AppDynamics Lite for free today:
http://p.sf.net/sfu/appdyn_d2d_jan
_______________________________________________
qooxdoo-devel mailing list
[email protected]<mailto:[email protected]><mailto:[email protected]><mailto:[email protected]><mailto:[email protected]><mailto:[email protected]><mailto:[email protected]><mailto:[email protected]>
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
------------------------------------------------------------------------------
Everyone hates slow websites. So do we.
Make your web apps faster with AppDynamics
Download AppDynamics Lite for free today:
http://p.sf.net/sfu/appdyn_d2d_jan_______________________________________________
qooxdoo-devel mailing list
[email protected]<mailto:[email protected]><mailto:[email protected]><mailto:[email protected]>
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
------------------------------------------------------------------------------
Everyone hates slow websites. So do we.
Make your web apps faster with AppDynamics
Download AppDynamics Lite for free today:
http://p.sf.net/sfu/appdyn_d2d_jan
_______________________________________________
qooxdoo-devel mailing list
[email protected]<mailto:[email protected]><mailto:[email protected]><mailto:[email protected]>
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
------------------------------------------------------------------------------
Everyone hates slow websites. So do we.
Make your web apps faster with AppDynamics
Download AppDynamics Lite for free today:
http://p.sf.net/sfu/appdyn_d2d_jan_______________________________________________
qooxdoo-devel mailing list
[email protected]<mailto:[email protected]>
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
------------------------------------------------------------------------------
Everyone hates slow websites. So do we.
Make your web apps faster with AppDynamics
Download AppDynamics Lite for free today:
http://p.sf.net/sfu/appdyn_d2d_jan
_______________________________________________
qooxdoo-devel mailing list
[email protected]<mailto:[email protected]>
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
------------------------------------------------------------------------------
Everyone hates slow websites. So do we.
Make your web apps faster with AppDynamics
Download AppDynamics Lite for free today:
http://p.sf.net/sfu/appdyn_d2d_jan_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
------------------------------------------------------------------------------
Everyone hates slow websites. So do we.
Make your web apps faster with AppDynamics
Download AppDynamics Lite for free today:
http://p.sf.net/sfu/appdyn_d2d_jan
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
