Extjs4 MVC Controller中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的文章了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM