Oh, I see -- you're adding the button when creating the list. A little
more thinking about that answered one of my two querstions. As for the
other one:
Currently (if the checkbox was working), I need to click the checkbox
itself to change its state. I'd like to be able to simply click the list
item anywhere to trigger it. The clean solution would be registering an
event handler to the _onTap of the list and calling the setter method of
the list item (i.e. the CheckBoxListItem instance). But I don't see how
I can actually get the INSTANCE of the list item (and not just the HTML
element it represents). So how could I access the corresponding list
item instance from the _onTap handler in the list class?
Regards
Ingo
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#>
>
>
>
>
>
>
> ------------------------------------------------------------------------------
> 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
