0

I am developing a mobile application using the Dojo Toolkit. I want to make a widget of the following:

<div data-dojo-type="dojox.mobile.ListItem" data-dojoprops="moveTo:'breakdown'">
    <div>Maximum: Some value</div>
</div>

I want to be able to use the widget like this:

<div data-dojo-type="dojox.mobile.RoundRectList">
    <div data-dojo-type="MyWidget" data-dojo-props="maximum:'1200'"></div>
</div>

And here is what I did so far:

require(
    [ "dojo/_base/declare", "dojo/parser", "dojo/ready",
        "dojox/mobile/ListItem", "dijit/_WidgetBase",
        "dijit/_TemplatedMixin" ],

        function(declare, parser, ready, ListItem, _WidgetBase, _TemplatedMixin) {
            declare("MyWidget", [ ListItem, _WidgetBase, _TemplatedMixin ], {

                templateString: "<div>"         
                              + "<div>Maximum: <span data-dojo-attach-point='maximumNode'></span></div>"
                              + "</div>",

                maximum : "unknown",
                _setMaximumAttr : { node : "maximumNode", type : "innerHTML" },

                buildRendering : function() {
                    this.inherited(arguments);
                }
            });

            ready(function() {
                parser.parse();
            });
        });

I get no error or somthing like that, the page is not loading. What is wrong with that code?

Improve this question
2
  • You don't need _WidgetBase nor _TemplatedMixin to create an extension of ListItem, ListItem allready inherits these two classes - though it doesnt hurt. Have you tried creating it programmatically without using parser.parse in your ready func?
    – mschr
    Commented Aug 24, 2012 at 20:13
  • I haven't tried to create it programmatically because that isn't allowed according to the exercise. But I also have no idea how to do that programmatically since I am new to the Dojo Toolkit. Couldn't you provide me some working code or a link to a tutorial?
    – Said Savci
    Commented Aug 24, 2012 at 21:26

1 Answer 1

Reset to default
1

I wrote this quick example.

From your code snippet I suspect that you might want to do something like this http://jsfiddle.net/hJJUD/7/

I recommend not changing the template from that listItem, Instead try to play with the properties it has. Take a look at this documentation http://dojotoolkit.org/reference-guide/1.8/dojox/mobile/ListItem.html

If you find that you need anything else let me know.

Improve this answer
4
  • Thanks for your reply. There is no alternative other than changing the template because I actually have a much more complex ListItem. I only listed the maximum attribute because I thought it would be enough to solve the problem. How can I use a template in your example?
    – Said Savci
    Commented Aug 24, 2012 at 22:12
  • By looking at the code it seems its not possible because ListItem's code set this.srcNodeRef and this.containerNode and this.domNode to the same instance and _TemplatedMixin assumes those are different. At this point then I sugged you try to "clone" what's in ListItem and make one of your own (not extending it). It's a long way though.
    – eburgos
    Commented Aug 25, 2012 at 14:43
  • 1
    the thing is, ListItem does not use templateString, it builds the DOM programmatically through buildRendering
    – mschr
    Commented Aug 25, 2012 at 14:54
  • Cloning the ListItem is too much work. Do you have any other ideas? Can I create my own custom widget with templateString and use the ListItem as root element? Can I then use this widget in a RoundRectList?
    – Said Savci
    Commented Aug 26, 2012 at 4:36

Not the answer you're looking for? Browse other questions tagged or ask your own question.