Ext JS: для чего нужен xtype?
Как и в другом ответе, использующем React, есть также удобный плагин Vue.
vue-svg-loader просто бросает его в вашу конфигурацию и начинает использовать. Хорошая вещь - это также запустить ваш SVG через SVGO, чтобы его оптимизировать.
Конфигурация
{
test: /\.svg$/,
loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
options: {
// optional [svgo](https://github.com/svg/svgo) options
svgo: {
plugins: [
{removeDoctype: true},
{removeComments: true}
]
}
}
}
Использование
3 ответа
xtype - это сокращенный способ обозначения определенных компонентов: панель = Ext.Panel , текстовое поле = Ext.form.TextField и т. Д. Когда вы создаете страницу или форму, вы можете использовать эти xtypes вместо создания экземпляров объектов. Например,
items: [{
xtype: 'textfield',
autoWidth: true,
fieldLabel: 'something'
}]
Более того , создание страниц таким образом позволяет Ext JS лениво отображать страницу . Вот где вы видите «прирост производительности». Вместо того, чтобы создавать большое количество компонентов при загрузке приложения, Ext JS визуализирует компоненты, когда пользователю необходимо их увидеть. Ничего страшного, если у вас одна страница, но если вы используете вкладки или аккордеон, многие страницы изначально скрыты, и поэтому приложение будет загружаться быстрее.
Кроме того, вы можете создавать и регистрировать новых компонентов, создавая xtypes по вашему выбору. Ext JS аналогичным образом будет лениво отображать ваши компоненты.
Вы также можете получить компоненты по идентификатору. Поскольку ваш компонент (а также компоненты Ext JS) может обеспечивать отличное поведение, иногда удобнее искать и извлекать компонент, а не простой элемент или узел DOM.
Короче говоря, xtypes идентифицируют компоненты, а компоненты являются ключевым аспектом Ext JS.
Я новичок в 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
Хм, хорошо - мы тоже включим пакет -
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 будет звучать глупо.
Но мне все еще не нравится - это странный маленький противоречивый ярлык, который запутывает больше, чем помогает.
Если вы объявите класс и дадите ему тип 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 не изменяется , Как только ваш проект станет большим, вы начнете создавать подкаталоги и перемещать классы.