Extjs: расширить класс с помощью конструктора или initComponent? - PullRequest
Новая
       9

Extjs: расширить класс с помощью конструктора или initComponent?

22 голосов
/ 03 июля 2010

В extjs вы всегда можете расширить класс extjs через constructor().Для классов, извлекаемых из Component, вы также можете расширять с помощью initComponent().

Мне интересно, почему так много кода расширяется с помощью initComponent, тогда как constructor кажется универсальным методом расширения.initComponent предлагает явное преимущество перед constructor?

Ответы [ 3 ]

17 голосов
/ 03 июля 2010

Во-первых, возможность переопределения через constructor была добавлена ​​в более поздней версии Ext, чем initComponent, поэтому весь код определенного возраста должен будет использовать initComponent.В наши дни вы по-прежнему переопределяете initComponent, если хотите сделать что-нибудь после , вызывается базовый класс initComponent (конструктор будет слишком ранним для этого), но до компонента будет отображаться.Во многих случаях (например, в большинстве случаев настройка конфигов) это практически не имеет значения, и большинство людей делают то, что наиболее удобно.Однако в некоторых случаях это имеет значение.

11 голосов
/ 12 июля 2013

Позвольте мне попробовать обновленный ответ с точки зрения версий ExtJS 4.0-4.2 и выше.

constructor() - это объект / класс перед созданием метода. И initComponent() - это компонент перед методом show . 

constructor: function(config) {
  // ctor #1 - insert code here to modify config or run code to inject config
  // probably the cheapest place to make changes - before anything has been built

  this.callParent(arguments);

  // ctor #2 - insert code here if you need to make changes 
  // after everything has been rendered and shown, IIUC
},
initComponent: function() {
  // this function runs between ctor #1 and ctor #2

  // initComponent #1 - the UI component object tree is created,
  // (this object and child objects from config { items: [{...}]})
  // but they have not yet been rendered to DOM or shown.

  this.callParent(arguments);

  // initComponent #2 - I believe this is equivalent to ctor #2, 
  // I would prefer ctor as it is more universal.
}

Для панелей с дочерним или сложным макетом вам, вероятно, потребуется использовать initComponent, потому что вам нужно будет проверять компоненты и управлять ими (граф объектов UI).

Но для отдельных элементов формы (выпадающий список, кнопка и т. Д.) Я придерживаюсь конструктора, который, на мой взгляд, легче (до изменения любой сложной конструкции объекта или DOM) и более универсален. IOW-конструкторы могут использоваться для простого пользовательского интерфейса, моделей и хранилищ данных; последние два не могут использовать initComponent.

Так что я использую initComponent только тогда, когда есть причина для этого. Часто, когда я пишу функцию initComponent, я пытаюсь манипулировать дочерними объектами пользовательского интерфейса, и моим следующим шагом является извлечение этого дочернего элемента управления в его собственный Ext.define (), перемещение пользовательского кода для запуска в дочернем классе элемента управления, который удаляет сложный init из родительской панели. Этот процесс я повторил 4 раза на моей последней странице.

2 голосов
/ 04 января 2012

Вот некоторые соответствующие цитаты из книги Джея Гарсии «ExtJS в действии»:

initComponent выполняется внутри конструктора класса Component, но только после того, как были выполнены несколько важных задач установки для Component.Эти задачи включают в себя кэширование и применение свойств объекта конфигурации к экземпляру класса

и более поздним версиям, а также в свете наличия конструктора, в котором параметры конфигурации применяются к экземпляру:

если сконфигурированные экземпляры подкласса когда-либо нужно будет клонировать через cloneConfig .... тогда расширение через конструктор - лучший выбор.

Кстати, несмотря на то, что книга ДжеяЧто касается ExtJS 3, кажется, что cloneConfig все еще актуален в ExtJS4;см .:

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Component-method-cloneConfig

и

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-method-cloneConfig

...