Extjs: что такое xtype хорошо для

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

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

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

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

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

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

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

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

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

Ответ 3

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

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

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

this.getComponent('myObject');

Ответ 4

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

Например:

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

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

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

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

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

Ответ 5

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

При регистрации xtype мы просто используем этот синтаксис: Ext.reg(,). Но мы не используем ключевое слово '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 является разумным для больших приложений, чтобы избавиться от мусорных объектов.

Ответ 6

xtypes in ext не для производительности. Он легко кодируется. С помощью xtype-кода становится короче, легко читается и понимается, особенно если вы создаете Ext.form.FormPanel и у него много текстовых полей, полей даты, комбо и т.д. Например: полезно, когда каждое поле даты форма должна иметь формат, такой как "dmY", вам не нужно писать отдельно формат: "dmY" на каждое поле даты, вы просто пишете, чтобы сформировать настройки по умолчанию: {format: 'dmY'}... есть много случаев когда xtype сокращает код...

В заключение: он легко кодируется...