Question

在我目前的项目中，我使用的是ExtJs3.3 我创建了许多具有私有变量和函数的类。例如：

MyPanel = function(config){
  config = config || {};

  var bar = 'bar';//private variable

  function getBar(){//public function
     return bar;
  }

  function foo(){
     //private function
  }

Ext.apply(config, {
  title: 'Panel',
  layout: 'border',
  id: 'myPanel',
  closable: 'true',
  items: []
});

  MyPanel.superclass.constructor.call(this, config);
};
Ext.extend(MyPanel , Ext.Panel, {
  bar: getBar
});
Ext.reg('MyPanel', MyPanel);

我理解ExtJs4中新的处理方式是使用Ext.define方法。因此，我上面的代码看起来像这样：

Ext.define('MyPanel', {
  extend: 'Ext.panel.Panel',

  title: 'Panel',
  layout: 'border',
  closable: true,

  constructor: function(config) {

     this.callParent(arguments);
  },

});

所以我想知道的是如何在ExtJs4中定义私有变量和函数，类似于我在ExtJs3中的方式？换句话说，我理解Ext.define方法将负责定义，扩展和注册我的新类，但是我应该在哪里声明javascript var，它们不是类本身的属性但是需要在课堂上。

MyPanel = function(config){
  //In my Ext3.3 examples I was able to declare any javascript functions and vars here.
  //In what way should I accomplish this in ExtJs4.

  var store = new Ext.data.Store();

  function foo(){
  }
  MyPanel.superclass.constructor.call(this, config);
};

Answer 1

我不是强制执行这样的私有变量的忠实粉丝，但当然可以做到。只需在构造函数/ initComponent函数中为变量设置一个访问器函数（闭包）：

constructor: function(config) {
    var bar = 4;
    this.callParent(arguments);

    this.getBar = function() {
        return bar;
    }
},...

Answer 2

确切地说是配置的用途，请从Extjs docs中查看：

config：Object 配置选项列表及其默认值，为其生成自动访问器方法。例如：

Ext.define('SmartPhone', {
     config: {
         hasTouchScreen: false,
         operatingSystem: 'Other',
         price: 500
     },
     constructor: function(cfg) {
         this.initConfig(cfg);
     }
});

var iPhone = new SmartPhone({
     hasTouchScreen: true,
     operatingSystem: 'iOS'
});

iPhone.getPrice(); // 500;
iPhone.getOperatingSystem(); // 'iOS'
iPhone.getHasTouchScreen(); // true;
iPhone.hasTouchScreen(); // true

这样你就可以隐藏你的实际字段并仍然可以访问它。

Answer 3

您可以像这样创建私人会员。但是，如果你为这个类创建多个实例，它将无用。

Ext.define('MyPanel', function(){

    var bar = 'bar';//private variable

    function foo(){
        //private function
    };
    return {
       extend: 'Ext.panel.Panel',
       title: 'Panel',
       layout: 'border',
       closable: true,

       constructor: function(config) {

           this.callParent(arguments);
       },

       getBar: function(){//public function
           return bar;
       }

    };

});

谢谢，

南都

私有函数和变量ExtJs4？

3 个答案: