dojo中创建widget方式小结

来源：互联网发布：喜欢英国的理由知乎编辑：程序博客网时间：2024/05/17 08:24

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://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></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://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></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://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></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://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></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结构最后面的位置。