dojo中创建widget的方式总的来说有两种：声明式创建widget、编程式创建widget。编程式创建widget根据srcNode又可分为三种：静态srcNode、动态srcNode、无srcNode。 1. 声明式创建widget，通过在宿主
dojo中创建widget的方式总的来说有两种：声明式创建widget、编程式创建widget。编程式创建widget根据srcNode又可分为三种：静态srcNode、动态srcNode、无srcNode。
1. 声明式创建widget，通过在宿主节点上设置dojoType="widgetName"来实现，代码如下所示：
<html>
<head>
<title>声明式的widget</title>
<style type="text/css">
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript">
var djConfig={parseOnLoad:true};
</script>
<script type="text/javascript" src="http://img.558idc.com/uploadfile/allimg/210615/230104F00-0.jpg"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit._Widget");
dojo.declare("Counter",[dijit._Widget],{
_i:0,
buildRendering:function(){
this.domNode=dojo.create("button",{innerHTML:this._i});
},
postCreate:function(){
this.connect(this.domNode,"onclick","increment");//不能写成onClick，dijit._Widget具有connect方法
},
increment:function(){
this.domNode.innerHTML = ++this._i;
}
});
</script>
</head>
<body>
<span dojoType="Counter"></span>
<!--此处的span只是为了能够对Counter进行定位，没有其他的作用，把span换成a也可以。
在Firefox中调试increment可知，this.domNode是button节点，而不是此处的替代层span。-->
</body>
</html>
2.使用静态的scrNode供编程式的widget定位使用，代码如下所示：
<html>
<head>
<title>使用静态的scrNode供编程式的widget定位使用</title>
<style type="text/css">
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript">
var djConfig={parseOnLoad:true};
</script>
<script type="text/javascript" src="http://img.558idc.com/uploadfile/allimg/210615/230104F00-0.jpg"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit._Widget");
dojo.declare("Counter",[dijit._Widget],{
_i:0,
buildRendering:function(){
this.domNode=dojo.create("button",{innerHTML:this._i});
},
postCreate:function(){
this.connect(this.domNode,"onclick","increment");//不能写成onClick，dijit._Widget具有connect方法
},
increment:function(){
this.domNode.innerHTML = ++this._i;
}
});
dojo.addOnLoad(function(){
var srcNode = dojo.byId("srcNodeId");
var counterWidget = new Counter({},srcNode);// new WidgetName({widget属性散列},srcNode}
});
</script>
</head>
<body>
<span id="srcNodeId"></span>
<!--此处的span只是为了能够对Counter进行定位，没有其他的作用，把span换成a也可以。
在Firefox中调试increment可知，this.domNode是button节点，而不是此处的替代层span。-->
</body>
</html>
3.动态创建scrNode供编程式的widget定位使用，代码如下所示：
<html>
<head>
<title>动态创建scrNode供编程式的widget定位使用</title>
<style type="text/css">
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript">
var djConfig={parseOnLoad:true};
</script>
<script type="text/javascript" src="http://img.558idc.com/uploadfile/allimg/210615/230104F00-0.jpg"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit._Widget");
dojo.declare("Counter",[dijit._Widget],{
_i:0,
buildRendering:function(){
this.domNode=dojo.create("button",{innerHTML:this._i});
},
postCreate:function(){
this.connect(this.domNode,"onclick","increment");//不能写成onClick，dijit._Widget具有connect方法
},
increment:function(){
this.domNode.innerHTML = ++this._i;
}
});
dojo.addOnLoad(function(){
var srcNode = dojo.create("span");//dojo.create("elementTagName",{DOM属性散列})
dojo.body().appendChild(srcNode);
var counterWidget = new Counter({},srcNode);// new WidgetName({widget属性散列},srcNode}
/*此处动态创建的span只是为了能够对Counter进行定位，没有其他的作用，把span换成a也可以。
在Firefox中调试increment可知，this.domNode是button节点，而不是此处的替代层span*/
});
</script>
</head>
<body>
</body>
</html>
4.编程式创建widget，不设置小部件的srcNode，代码如下所示：
<html>
<head>
<title>编程式创建widget，不设置小部件的srcNode</title>
<style type="text/css">
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript">
var djConfig={parseOnLoad:true};
</script>
<script type="text/javascript" src="http://img.558idc.com/uploadfile/allimg/210615/230104F00-0.jpg"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit._Widget");
dojo.declare("Counter",[dijit._Widget],{
_i:0,
buildRendering:function(){
this.domNode=dojo.create("button",{innerHTML:this._i});
},
postCreate:function(){
this.connect(this.domNode,"onclick","increment");//不能写成onClick，dijit._Widget具有connect方法
},
increment:function(){
this.domNode.innerHTML = ++this._i;
}
});
dojo.addOnLoad(function(){
var counterWidget = new Counter({});// new WidgetName({widget属性散列},srcNode}
counterWidget.placeAt(dojo.body());
//placeAt是dijit._Widget中的函数，将创建的widget放到了body中，而且没有使用srcNode
});
</script>
</head>
<body>
</body>
</html>
以上前三种都是用了srcNode进行定位，需要特别注意的是,srcNode仅仅是用来进行对widget进行定位，千万不要将widget.domNode与srcNode等价起来，二者不同，widget.domNode是widget自身的dom节点，而srcNode只是相当于widget的占位符。但也并不是所有的小部件都必须创建“替代层”。一些小部件，其在页面中的位置对其功能没有任何影响。例如dijit.Tooltip、dijit.TooltipDialog与dijit.Dialog等。因为这类型的小部件的显示位置与其在DOM结构中的相对位置没有必然的关系，因此在一般情况下，Dojo会默认把这些小部件插入到页面DOM结构最后面的位置。