javascript - 这两个代码有什么区别？

Question

我是 ExtJs 的新手，刚接触一些基本的东西，发现作为初学者很难上手。

下面是实现Ext按钮的两种方式：

样品1：

var nextBtn = new Ext.Button({
    text: 'Next >>',
    handler: function() {
        Ext.getDom('form_main').submit();
    },
    id: 'next',
    renderTo: 'next'
});

样品2：

Ext.widget('button', {
text: 'some long title of my cool button',
scale: 'large',
cls: 'my-button',
width: 100,
renderTo: 'output'
});

我的猜测是因为版本，它已经改变了。请让我知道这两个代码之间有什么区别。

问候，

Answer 1

在 ExtJS 中有很多方法可以实例化一个类。

以这个定义为例：

Ext.define ('Ext.button.Button', {
  alias: 'widget.button' ,
  // here other properties and methods ...
});

然后您可以选择其中一种方式来实例化 Ext.button.Button：

第一：javascript风格

var button = new Ext.button.Button ({
  // props and methods
});

二：ExtJS 风格搭配Ext.create方法

var button = Ext.create ('Ext.button.Button', {
  // props and methods
});

第三：带有Ext.widget方法的ExtJS风格（它使用别名属性）

var button = Ext.widget ('button', {
  // props and methods
});

我建议您使用第二种或第三种方式，因为它们使用 ExtJS 动态加载器：here's the documentation