2010-02-23 2 views
28

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

Что это хорошо.? Где коэффициент усиления производительности (если это причина), если объект будет создан в любом случае?

+0

http://www.sencha.com/learn/legacy/Tutorial:Xtype_defined – 2011-07-29 04:01:36

ответ

52

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

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

Кроме, создание страниц в этой манере позволяет ExtJS to render lazily the page. Здесь вы видите «прирост производительности». Вместо того, чтобы создавать большое количество компонентов при загрузке приложения, ExtJS отображает компоненты, когда пользователь должен их видеть. Неважно, если у вас одна страница, но если вы используете вкладки или аккордеон, многие страницы изначально скрыты, и поэтому приложение будет загружаться быстрее.

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

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

Иными словами, идентификаторы компонентов и компонентов являются ключевым аспектом ExtJS.

+1

Я думаю, что вы создали ложную дихотомию, когда говорите, что «вместо создания большого количества компонентов при загрузке приложения». Мне очень любопытно узнать, думаете ли вы, что нет другого способа создать экземпляр компонента, когда он понадобится, а затем уничтожить его, когда это не так. – RibaldEddie

+0

, вы можете указать, как вы ссылаетесь на псевдоним, используя widget() или ComponentQuery() –

+0

Стоит отметить, что при использовании xtypes класс должен быть загружен заранее, вы не можете использовать динамическую загрузку класса ext. В этом случае вы должны использовать все 'Ext.create ('full.clazz.Name', {})', который фактически создает синхронный вызов AJAX (если еще не загружен). –

-3

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

в заключение: это для легко кода ...

+1

забыл о ленивом рендеринге. «Верхняя ступень» объясняла это хорошо. – Zango

+3

xtypes - это больше о производительности и менее простоте кодирования: но они * делают * приводят к большей компоновке компонентов с конфигурацией, а не к явному (и уродливому) подходу «create-a-object in var». –

+3

Да, утверждение «xtype is not for performance» просто неверно. Это одна из главных целей. –

3

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

{ Itemid: 'MyObject', xtype: 'MyClass' ... }

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

this.getComponent('myObject'); 
+0

Если вы используете Ext.ComponenQuery.query ('myClass') [0], то вам даже не нужно добавлять itemId. Индекс [0] необходим, потому что компонентный запрос всегда возвращает массив. –

1

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

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

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

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

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

8

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

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

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

Проверьте следующий пример некоторого xtype к отображениям имени класса для Сенча Touch:

  • video - Ext.Video
    Ok этого вида имеет смысл - строчная версия имени 'класс'
  • carousel - Ext.carousel.Carousel
    же картина здесь
  • carouselindicator - Ext.carousel.Indicator
    Um, хорошо - мы будем включать в себя пакет слишком
  • 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 просто звучит глупо.

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

2

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

Например:

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

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

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

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

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

Смежные вопросы