set a widget in the right position ( sharing code )

Probably this is not the right place but I worked hard on this and I think this could help someone else.

I read many posts and none of them set a widget in the right position ( coord ) so I figured out this could be a way. I set a new widget where I click.

I create my widget with 2 attributes more ( left and top ) that will be parameters when I call the new statement. My template uses those two parameters to set the left and top attributes and I set them in the postCreate function.

Here is the code:

Template:

my object:

dojo.provide("module.memoria.memo");
            
            dojo.require("dojo.parser");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dijit.form.TextBox");
            dojo.require("dijit._Widget");
            dojo.require("dijit._Templated");

            dojo.declare(
            "module.memoria.memo",
            [dijit._Widget, dijit._Templated],
            {   id: "",
                style:"",
                title:"",
                
                // pointer to the DOM node i'm going to modify
                srcNodeRef:null,
                
                // ?
                domNode:null,
                display:true,
                
                left:"0px",
                top:"0px",
                
                // in order to display inner widgets
                widgetsInTemplate: true,
      	        isContainer: true,
                
//                templateString:"",
	        templatePath: dojo.moduleUrl("module/memoria","template/memo-template.html"),
//      	  templateCssPath: dojo.uri.dojoUri("../memo-style.css"),


                postCreate : function (xleft, ytop){
                    this.left = xleft+"px";
                    this.top = ytop+"px";
                }
                    
            }
            );

my web page:

<head>
<title></title>

<script type="text/javascript" src="dojo-release-1.1.1/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:true"> </script>

<script type="text/javascript">

//para que este accesible desde cualquier parte ( css, html, y javascript )

dojo.require("dojo.parser");
dojo.require("module.memoria.memo");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.ContentPane");

function o(event){

// get the relative position of the pointer
contenedor = dojo.byId('background');
var pos = dojo.coords(contenedor, true);
var x = event.pageX;
var y = event.pageY;
console.debug("x=" + x + " y=" + y);

// create the new object and append it
obj = new module.memoria.memo({left:x,top:y});
contenedor.appendChild(obj.domNode);
contenedor.startup();
};

dojo.addOnLoad(function( ) {

// ContentPane has no onClick event so i get the DOM node
// and use the onclick event of the node
contenedor = dojo.byId('background');
dojo.connect(contenedor, 'onclick', o);

});

</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<div dojoType="dijit.layout.ContentPane" id="background"
style="height:100%; width:100%; border:solid;">
</div>

</body>

I used onclick ( DOM node ) event because the contentpane has no onClick event.

Now, I need to figure out how I can access to my widget ( it is a textbox ) and not creating a new widget at the same time.

Any guess ?

Search

set a widget in the right position ( sharing code )