注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

Gridx模块  

2014-01-25 13:40:39|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
Gridx模块是Gridx的重要组成部分,所以了解模块很重要。

模块的写法:
(更多的信息: https://github.com/oria/gridx/blob/master/modules/SampleModule.js.txt)

define([
"dojo/_base/declare",
"../core/_Module"
], function(declare, _Module){
return declare(_Module, {
name: 'a',
constructor: function(){
console.log("module a constructor method invoke");
},
destroy: function(){
console.log("module a destroy method invoke");
this.inherited(arguments);
},
preload: function(){
console.log("module a preload method invoke");
var t = this;
},
load: function(args, startup){
console.log("module a load method invoke");
var t = this, g = t.grid;
startup.then(function(){
t.loaded.callback();
});
}
});
});

Gridx的module生命周期:
A Gridx module 有可选的生命周期方法: constructor(), preload(), and load().
  • constructor方法: 当module实例化时调用constructor方法,这时候,你是无法知道其他模块,也就是说这时候,我们无法访问其他模块,所以最后在此定义自己模块的东西
  • preload方法: 如果preload方法存在,那么它在constructor方法调用后执行,这时候,其他模块已经实例化了,我们可以访问其他模块对象。
  • load方法:如果load方法存在,那么它在preload方法调用后并且依赖的模块load后才能执行。

Gridx 创建Step: (可以参见后面验证 fored 的实验 )
1. create the "model"
2. "new" all modules (调用constructor()方法)
3. "preload" all modules
4. "load" all modules

模块依赖指定方式:

三种模块依赖选项: forced, required and optional

  • forced: ["header", "body"] // means this module won't be loaded until "header" module and "body" module have finished loading.
  • required: ["tree"] // means this module requires the existance of "tree" module, but it can be loaded at any time.
  • optional: ["edit"] // means if some "edit" module exists, it must be loaded before this module.

验证forced的实验,写一个B module

define([
"dojo/_base/declare",
"../core/_Module"
], function(declare, _Module){
return declare(_Module, {
name: 'b',
forced: ['a','c','d'],
constructor: function(){
console.log("module b constructor method invoke");
},
destroy: function(){

console.log("module b destroy method invoke");
this.inherited(arguments);
},
preload: function(){
console.log("module b preload method invoke");
var t = this;
},
load: function(args, startup){
console.log("module b load method invoke");
var t = this, g = t.grid;
startup.then(function(){
t.loaded.callback();
});
}
});
});

将它们组装到Gridx中

... ...

//Create grid widget.
var grid = Grid({
id: 'grid',
cacheClass: Cache,
store: store,
pageSize: 10,
structure: structure,
modules: [
A,
B,
C,
D
]
});
//Put it into the DOM tree. Let's assume there's a node with id "gridContainer".
grid.placeAt('gridx');
//Start it up.
grid.startup();

运行并查看console:
Gridx模块 - 星期五 - 星期五
在module B中定义的forced起作用了: 在load阶段a,c和d加载后,b才load。

如何设置module参数:

推荐方法:

var grid = new Grid({
     cacheClass: Cache,
     store: store,
     structure: [...],
     modules: [
          {
               moduleClass: "gridx/modules/extendedSelect/Row",
               triggerOnCell: true
          },
          {
               moduleClass: "gridx/modules/Body",
               rowHoverEffect: false
          }
     ]
});

实战一:  show/hide cell content in row header

实战二:  add extend row config.
  评论这张
 
阅读(551)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017