Extjs4 MVC Controller使用方法

 

这篇文章主要说一下Extjs MVC模式中controller类的使用方法。

很清楚,controller主要帮助我们实现页面中事件的控制,如下:

1、实现对页面中某个元素触发某个事件:将上一篇中的controller改成如下:

Ext.define('MVC.controller.MVCS', {
      extend: 'Ext.app.Controller',
  
      init: function() {
          this.control({
              'viewport > panel' : {
                  render : this.onPanelRendered
              }
          });
     },
     onPanelRendered: function() {
         console.log('The panel was rendered');
     }
 });
 

如上,this.control的功能就是查找到页面中的某个元素,单引号中的意思是页面中viewport中的panel元素,render代表当panel渲染完成后出发的事件,后边为我们写的事件。

我们可以测试一下在页面中生成多个panel,app.js改成如下:

Ext.application({
      name: 'MVC',

      appFolder: 'mvc',
  
      launch: function() {
          Ext.create('Ext.container.Viewport', {
              layout: 'fit',
              items: [
                 {
                     xtype: 'panel',
                     title: 'Users',
                     html : 'List of users will go here'
                 },
              {
                     xtype: 'panel',
                     title: 'second',
                     html : 'Test second'
                 }
             ]
         });
     }
 });
 

结果如下:

Extjs4 MVC Controller使用方法_第1张图片

通过开发工具我们发现输出了两次'The panel was rendered',表明我们的controller对viewport中的所有panel元素起了作用。

2、如果相对某一个元素起作用,那么做法如下:

?
' viewport panel[id = panel1]'  : {
                 render : this .onPanelRendered
             }

  controller的this.control中的代码改成如上,意思是viewport中的panel中的id为panel1的元素。

结果:

Extjs4 MVC Controller使用方法_第2张图片

表明我们的controller对panel1起了作用。

下一篇将view,同时看一下controller和view的搭配使用方法。

你可能感兴趣的:(mvc,controller,extjs4)