Ext JS: для чего нужен xtype?

Question

Я вижу множество примеров в Ext JS, где вместо фактического создания объектов Ext JS передается литерал объекта со свойством xtype.

Для чего это нужно? Где выигрыш в производительности (если это причина), если объект все равно будет создан?

Answer 1

xtype - это сокращенный способ идентификации отдельных компонентов: panel = Ext.Panel, textfield = Ext.form.TextField и т. Д. При создании страницы или формы вы можете использовать эти xtypes чем создавать экземпляры объектов. Например,

items: [{
   xtype: 'textfield',
   autoWidth: true,
   fieldLabel: 'something'
}]

Более того , создание страниц таким способом позволяет Ext JS лениво отображать страницу . Здесь вы видите «прирост производительности». Вместо того, чтобы создавать большое количество компонентов при загрузке приложения, Ext JS отображает компоненты, когда пользователь должен их видеть. Ничего страшного, если у вас есть одна страница, но если вы используете вкладки или аккордеон, многие страницы изначально скрыты, и поэтому приложение будет загружаться быстрее.

Кроме того, вы можете создать и зарегистрировать новые компоненты, создающие xtypes по вашему выбору. Ext JS аналогичным образом визуализирует ваши компоненты.

Вы также можете получить компоненты по идентификатору. Поскольку ваш компонент (а также компоненты Ext JS) может обеспечивать несколько приятных действий, иногда удобно искать и извлекать компонент, а не простой элемент или узел DOM.

Короче говоря, xtypes идентифицирует компоненты, и компоненты являются ключевым аспектом Ext JS.

Answer 2

Я новичок в Sencha / Ext JS, но мне кажется, что странное представление о наличии строки идентификатора сокращенного определения только для компонентов пользовательского интерфейса должно удовлетворять устаревшим пользователям.

Посмотрите "Список xtypes" здесь: http://docs.sencha.com/touch/2-0/#!/guide/components

Есть ли веская причина использовать подобный, но не совсем тот же строковый идентификатор, что и имя "класса", в качестве сокращенного идентификатора? Я так не думаю.

Проверьте следующий пример некоторых сопоставлений имен xtype и class для Sencha touch:

• video - Ext.Video
  Хорошо, этот вид имеет смысл - строчная версия имени класса
• carousel - Ext.carousel.Carousel
  Тот же шаблон здесь
• carouselindicator - Ext.carousel.Indicator
  Хм, хорошо - мы тоже включим пакет
• navigationview - Ext.navigation.View
  И снова здесь
• datepicker - Ext.picker.Date
  Ok, wtf?

Некоторые из приведенных выше аргументов для xtype заключались в том, что он допускает отложенную реализацию компонентов. Я думаю, что это совершенно не имеет значения - то, что допускает отложенное создание экземпляров, это тот факт, что Sencha / Ext JS поддерживает спецификацию строкового идентификатора вместо экземпляра компонента в иерархии представления.

Отображение конкретной строки в конкретный компонент, который может быть создан позже, является совершенно произвольным - а в случае с Sencha / Ext JS, к сожалению, глупым (см. Примеры выше).

По крайней мере, просто следуйте разумному шаблону - например, почему Ext.Label не может иметь "xtype" Label? Слишком просто?

На самом деле я знаю, почему - это потому, что они создали имена xtype, которые хорошо читаются - есть много повторяющихся имен классов, которые не будут работать (Ext.Panel и Ext.tab.Panel), и pickerDate будет звучать просто глупо .

Но мне все еще не нравится - это странный маленький противоречивый ярлык, который запутывает больше, чем помогает.

Answer 3

Я задал тот же вопрос, что и Джо, но нашел ответ. Если вы используете xtype, один из подходов также заключается в указании itemId в том же объекте:

{ itemId: 'myObject', xtype: 'myClass' ... }

Тогда вы можете найти его с помощью getComponent(), как в

this.getComponent('myObject');

Answer 4

Если вы объявите класс и дадите ему тип x, вы можете запросить его позже с помощью Ext.ComponentQuery.query()

Например:

Ext.create('MyApp.view.MyButton', {
    xtype: 'mybutton',
    .....
});

Позже в вашем коде, если вы делаете:

var buttonArray = Ext.ComponentQuery.query('mybutton');

тогда buttonArray будет содержать массив компонентов этого типа класса. Если вы создадите встроенные компоненты, ваш запрос будет более сложным.

Еще одним преимуществом xtypes является то, что если вы перемещаете свои классы (скажем, вы добавляете другой подкаталог в «view»: MyApp.view.button.MyButton), то ваши запросы к компонентам могут оставаться такими же, поскольку ваш тип x не меняется , Как только ваш проект станет большим, вы начнете создавать подкаталоги и перемещать классы.

Answer 5

xtype - это просто имя, данное для представления класса. Это определение объекта, который не нужно создавать при использовании в любая часть приложения.

При регистрации xtype мы просто используем этот синтаксис: Ext.reg(<xtype name>,<classname>). Но мы не используем ключевое слово new с именем класса, потому что компонент Component Mgr автоматически создаст экземпляр этого класса только при необходимости, например. в ответ на событие, подобное щелчку.

Нам не нужно получать экземпляр вручную, потому что после регистрации xtype «Component Mgr» автоматически создаст экземпляр для класса, представленного этим xtype, только если он используется где-либо в приложении или он просто не создает экземпляр этого класса, если не используется в другом месте. Компонент Mgr запускает этот код:

create : function(config, defaultType){
    return new types[config.xtype || defaultType](config);
}

xtype не создавать экземпляр класса при запуске Ext.Ready. Но новый Ext.Container() создаст все экземпляры при запуске Ext.Ready. Таким образом, использование xtype разумно для больших приложений, чтобы избавиться от мусорных объектов.