特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

dojo笔记——持续添加中

来源：互联网收集：自由互联发布时间：2021-06-15

1、如果function的参数不指明dojo类，则在使用时要带类的全路径new dojo.store.JsonRest，如 require(["dojo/store/JsonRest"], function(){var objectStore = new dojo.store.JsonRest({target: "/dojo/rest/echo/getDistrict"});}

1、如果function的参数不指明dojo类，则在使用时要带类的全路径new dojo.store.JsonRest，如

require([
	"dojo/store/JsonRest"
	], function(){
	var objectStore  = new dojo.store.JsonRest({
		target: "/dojo/rest/echo/getDistrict"
	});
});

如果function的参数指明dojo类，则在使用时不用带类的全路径new JsonRest，如

require([
	"dojo/store/JsonRest",
	], function(JsonRest){
	var objectStore  = new JsonRest({
		target: "/dojo/rest/echo/getDistrict"
	});
});

2、dojo.behavior

有时你需要创建一个包含许多元素的大表单，但又不想一个个创建，那么下面的方式可以让你用css3选择器指定节点，并将这些节点统一转换为Dijit控件，这是另外一种对标准Html进行Dijit化的方法，同时结合了静态声明和动态创建。这是通过dojo.behavior工具类来完成的：

[javascript] view plain copy

//require the class
dojo.require(‘dojo.behavior’);
//when it has loaded…
dojo.ready(function(){
//add two behaviors:
dojo.behavior.add({
//find SELECT elements, make them a FilteringSelect Dijit
’select’: {
found: function(item) {
new dijit.form.FilteringSelect({/*options*/},item);
}
},
//find all radio buttons, make them dijit.form.RadioButton Dijits
‘input[type="radio"]‘: {
found: function(item) {
new dijit.form.RadioButton({ },item);
}
}/* ,
more selector => Dijit creation….
*/
});
});

当然，你也可以直接通过dojo.query查找到需要的元素，再手动创建这些节点，这个和上面的代码可以实现同样的功能，但dojo.behavior提供了更简洁的语法。

3、dojoConifg

在dojoConifg中有许多选项，但是最重要的两个是async和isDebug。在开发过程中你会想要将isDebug设置成true以便获得适当的警告信息。async选项用来告诉AMD Loader去使用全新的，快速的方法去加载JavaScript模块。注意：parseOnLoad 是 dojoConfig 中的一个常用的选项，但是这个用法已经不再被推荐，推荐用dojo/parser。

4、dojo/domReady

它通常被推荐用于取代dojo.ready。如果一个模块除了加载其他依赖还需要等待整个DOM可用才执行的时候，这个插件使得这一过程非常简单，不需要再加一层额外的回调。

<script type="text/javascript">
var dayOfWeek = "Sunday";
if(dayOfWeek == "Sunday"){
    document.musicPrefs.other.value = "Afrobeat";
}
</script>
<form name="musicPrefs">
    <input type="text" name="other">
</form>

上面的javascript代码希望给”other“文本框赋值"Afrobeat"，但是实现不了。因为javascript代码执行时， ”other“还没定义。所以会报错：

TypeError: document.musicPrefs is undefined

如果使用dojo/domReady!则会解决这一问题：

<script type="text/javascript">
var dayOfWeek = "Sunday";
require(["dojo/domReady!"], function(){
	  // will not run until DOM is finished loading
	  if(dayOfWeek == "Sunday"){
	    document.musicPrefs.other.value = "Afrobeat";
	  }
	});
</script>
<form name="musicPrefs">
    <input type="text" name="other">
</form>

执行后，会看到 "Afrobeat"已经显示到文本框

dojo/domReady!类似于1.7版以前的dojo.ready()或者dojo.addOnLoad()这种旧的用法，但更具体，因为dojo/domReady!只是等待DOM完成加载，而不必等待其他require()或者dojo.require()调用完成

5、dojo/parser

我们需要载入dojo/parser 并且显式地告诉dojo去解析控件

[html] view plain copy

<body class="claro">
<button data-dojo-type='dijit/form/Button'>Clicky</button>
<script>
require([
'dojo/parser',
'dojo/domReady!'
], function(parser){
parser.parse(); // tell dojo to check the DOM for widgets
});
</script>
</body>

控件在claro主题下被解析，但是在控制台有一个警告：WARNING: Modules being Auto-Required: dijit/form/Button.这条警告是因为控件并未在任何地方被引入，为了使你的应用获得最佳的性能，AMD与Dojo需要你显式地定义你想在应用中使用的模块和依赖。

6、dojo提示由英文改为中文

例如”Loading“变为”正在加载“。<html lang="en">去掉lang="en"即可。进一步可以在data-dojo-config加上locale:'zh'。

7、dojo/parser::parse() error问题

去掉parseOnLoad: true,增加

require([
					"dojo/parser",
					"dojo/domReady!"
				],function(parser){
					parser.parse();
				});

如果仍然不行，尝试在require([。。。 ]);去掉一些加载项，排除法会逐步发现是哪个加载项引起的问题。

还有可能是parser.parse()重复使用

8、dojo/store/Observable

监测的是store的query方法查询出的结果，所以如果使用store的get方法查询结果，则对store的更新无法被dojo/store/Observable监测到

9、dojo.byId()

在1.7版以前可以使用，1.7以后不再使用，由dom.byId()代替

require(["dojo/dom"], function(dom){
    // fetch a node by id="someNode"
    var node = dom.byId("someNode");
    console.debug(node);
});

如果想继续使用dojo.byId()，可以这样

require(["dojo"], function(){
    // fetch a node by id="someNode"
    var node = dojo.byId("someNode");
    console.debug(node);
});

10、为什么store save()一条新记录会触发post请求？

是因为没有id属性。如果有id属性，会触发put请求

11、inline scripts（内联脚本）在dijit.Dialog无法执行

例如Dialog href 到一个html页面，而该页面中有类似<script type="text/javascript">alert(1);</script>这样的javascript代码，但是却无法执行

解决办法：换dojox/widget/Dialog即可

12、inline scripts（内联脚本）在dijit/layout/ContentPane无法执行

原因同上，解决方法就是换用dojox/layout/ContentPane

13、自动获取ValidationTextBox、TextBox等的输入值

用户每输入一个字符都会被自动获取

<input name="password1" id="password1" data-dojo-type="dijit/form/ValidationTextBox"
    data-dojo-props="required:true,validator:function(e){console.log(e)}" />

14、dijit select获取选中项相关值

mySelect.get('displayedValue') // 获取选中项文字描述
mySelect.get('value') // 获取选中项的值

其它方法：
mySelect.mystore.getItemByIdentity(mySelect.get("value))
var selectedItem = mySelectDijit.store._getItemByIdentity(mySelectDijit.get("value"));
var uName= mySelectDijit.store.getValue(selectedItem, "username");  //get value of a field called 'username'

mySelect.getOptions(mySelect.get('value')).label // 获取选中项的文字描述
// getOptions的参数如果是数字，会按照下拉菜单的索引查找项目；如果是字符串，会按照‘value’值查找项目。
// 所以如果想让select按value查找，需要toString一下
mySelect.getOptions(mySelect.get('value').toString())

15、dialog href的页面打开后不居中，可以resize() 一下试试

16、select设置missing message

required : true然后select.set('_missingMsg',"不能为空!");

17、删除特定标签

dojo.query('img').forEach(dojo.destroy);// deprecated

query(".red").forEach(domConstruct.destroy);

18、TitlePane里面嵌入grid，弹开时grid不显示

title pane 注册 _onTitleClick，点开的时候_refresh()下就好了
绑定TitlePane的onShow事件，然后datagrid调用下render方法就可以了

19、滚动窗口到指定位置

我是用tree示例：将窗口滚动到合适位置，使得我选中的树的节点能够被看到

require(['dojo/window'])...
var selectednode = tree.selectedNode;
djwindow.scrollIntoView(selectednode.domNode);

当然也适合其他情形下的滚动，以便让DomNode能被看到

20、给ContentPane加图标

<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"tab1.html", title:"Tab 1", iconClass:"plusIcon"'></div>

在dijit\icons目录下有css文件和图标的图片文件，可以打开查看都有哪些可用图标css

21、选中dijit Tree的某节点

tree.set('selectedNodes', [node]) // node为dijit/Tree._TreeNode类型

22、让dijit Tree的节点出现在视野范围内

tree.focusNode(treeNode)

23、watch只能监听set改变的属性值

dojo/Stateful 的watch只能监听通过对象的set方法修改的属性值变化。即

statefulObj.watch('foo',function(){...})

statefulObj.set('foo','baz');

24、Calendar滚动条滑到合适位置以显示某个日程安排

dojox/calendar/Calendar在天视图上让时间滚动条滚动到某一个日程安排事件的显示位置上
calendar.columnView.vScrollBar.scrollTop = 目标event的top

25、获取enhancedgrid Filter插件中的Combobox的id值而不是displayValue值，笨方法：

enhancedgrid的setupFilterQuery方法默认取的是Combobox的displayed value值，而实际使用时可能希望取它的id值或者其它值作为查询参数值

registry.byId("myGrid").pluginMgr.getPlugin('filter').filterDefDialog._cboxes[0]._curValueBox.item.type;// 此处能取到item，也就能取到item中的任意值了，包括id

26、Select选项组中添加分割线

27、给select添加一个“请选择”的option，而且能通过校验

如果select设置为required，假设提供给select的数据源items中，每个item的形式{'Num' : '123', 'Name' : '选项一'}，其中Num为idProperty，Name为labelAttr

增加一个虚拟的option——“--请选择--”，只需把{'Num' : 0, 'Name' : '--请选择--'}或者{'Num' : false, 'Name' : '--请选择--'}加入到items中即可通过校验

28、JsonRest.put(item)如何触发PUT？

如果item中有id属性才会触发PUT，但是如果没有id属性该如何触发PUT？可以在new JsonRest的时候使用idProperty来指定id

new JsonRest({
  target: url,
  idProperty: "type"
});

29、widget校验

widget._hasBeenBlurred = true;
widget.validate();
widget.focus();

30、清空dojo/data/ObjectStore的脏数据

// 清空脏数据，防止下次仍然提交
store._dirtyObjects = [];

31、Select的选项在360和chrome浏览器下次序打乱

IE、火狐下选项是按次序排列，和store中的次序一致。唯独chrome的选项中某几项被交换次序，其他选项仍然和store顺序一致。解决办法就是：在Select中添加sortByLabel: false即可。dijit/form/Select默认sortByLabel是true。

32、IE8下异常“SCRIPT445: 对象不支持此操作”

把data-dojo-config中的isDebug: true改为false即可。且不要使用Date.now();因为IE8不支持，可以改为new Date().valueOf()

33、不根据id获取widget，并获取指定类型的widget

var dijits = registry.findWidgets(dom.byId("queryForm"));
if(dijits[i].isInstanceOf(dijit.form.ValidationTextBox)){
	validationTextBox = dijits[i];
}

34、FilteringSelect自定义下拉菜单的样式（加入图标）

	<select id="richtexttest" data-dojo-type="dijit/form/FilteringSelect"
				data-dojo-props='name:"richtexttest",
				autoComplete:false,
				selectOnClick:true,
				value:"province",
				labelType:"html",
				labelFunc:function(item){
				  console.log(item);
				  var type = item.value; 
				  var txt = item.name;
				  return "<img src=\"./image/"+ type +".gif\">"+txt; 
				}
		'>
		<option value="province">省</option>
		<option value="city">市</option>
		<option value="county">县</option>
	</select>

上一篇：动态加载 dojoTree.带复选框
下一篇：dijit.form.Select菜单项的数据通过rest加载