Extjs4 MVC Controlller中refs使用

如果这不是您感兴趣或者需要学习的东西，何必点开呢？人生苦短。

前面几篇写了一下mvc的整体使用方法，今天写一下controller中refs的试用，refs的作用类似于我们告诉controller我们的一个元素的别名，既alias，那么controller就会为他声明get方法，具体如下：

1、上一篇中运行结果如下：

      这次我们想要得到这个uselist，一个方法是我们可以给userlist定义一个id，通过Ext.getCmp(id)得到，另一种既是使用refs，如下，我们把controller中添加如下属性：

controller－refs

 1     refs : [{
 2         ref : 'userList',
 3         selector : 'userlist'
 4     }],
 5     
 6     init: function() {
 7         this.control({
 8             'userlist': {
 9                 itemclick: this.editUser
10             }
11         });
12     },

　　refs中selector为我们定义的userlist中alias属性中widget后面的名字，ref为将selector中的单词的首字母大写，除去第一个单词的！

2、接下来，我们在editUser方法中放入如下代码：

editUser方法

1 this.getUserList().setTitle('测试refs试用');
2 console.log(this.getUserList());

　　先看一下运行效果：

　　大家注意两个地方，一个是grid的title变了，再一个是developtools的输出中输出了我们的userlist元素，这表明我们的refs起作用了，要获得grid的store，那么在editUser中添加如下代码：

　　

?

console.log( this .getUserList().getStore());

　　输出我们的grid的store。看一下结果：

　3、　我们发现多输出了一个h元素，打开第一个h，我们发现这就是我们的store元素的所有属性，在实际开发中我们通过这样查看我们的元素并且获得其中的某一个属性，比如我们通过第一个h找到我们的第一条数据并输出：

　　如上图：那么我们在editUser中添加如下代码：

　　

?

console.log( this .getUserList().getStore().data.items[0].data.email);

　运行结果如下：

我们输出了张三的emial，通过这种方法我们可以在不刷新页面的情况下去修改我们的某一个值，并完成相应的功能。

这样mvc的一般开发用到的东西回忆完了，以后很少有Extjs的文章了，再有可能会是sencha touch的文章了。