I have solved this for now with a workaround by assigning a css class to
the checkbox container that simply looks like
.checkboxListCheckboxColumn {
width: 48px;
}
Thanks again for your help and quick responses (and fix)!
Regards
Ingo
On 02/01/2013 07:27 PM, Ingo Bürk wrote:
> Hi Christopher,
>
> wow, that was fast. Thank you so much. I will look into this and give it
> a try as soon as I can!
>
> Regards
> Ingo
>
> On 02/01/2013 07:22 PM, Christopher Zündorf wrote:
>> 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
>
>
>
> ------------------------------------------------------------------------------
> 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
------------------------------------------------------------------------------
Free Next-Gen Firewall Hardware Offer
Buy your Sophos next-gen firewall before the end March 2013
and get the hardware for free! Learn more.
http://p.sf.net/sfu/sophos-d2d-feb
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
