Ext.js - Вопросы и ответы
Ext JS означает расширенный JavaScript. Это среда JavaScript для разработки настольных веб-приложений с богатым пользовательским интерфейсом.
Это продукт Sencha, который является расширением YUI (пользовательский интерфейс Yahoo).
Это основные файлы, которые нужно включить в HTML-страницу для запуска кода Ext JS -
- Ext-all.js
- Ext-all.css
- Настраиваемые виджеты пользовательского интерфейса с набором богатого пользовательского интерфейса, такого как сетки, сводные сетки, формы, диаграммы, деревья.
- Совместимость кода новых версий со старой.
- Гибкий менеджер компоновки помогает организовать отображение данных и контента в различных браузерах, устройствах и экранах разных размеров.
- Расширенный пакет данных отделяет виджеты пользовательского интерфейса от уровня данных. Пакет данных позволяет собирать данные на стороне клиента с использованием высокофункциональных моделей, которые включают такие функции, как сортировка и фильтрация.
- Он не зависит от протокола и может получать доступ к данным из любого внутреннего источника.
- Настраиваемые темы Виджеты Ext JS доступны в нескольких готовых темах, согласованных на разных платформах.
Упрощает кроссплатформенную разработку на настольных компьютерах, планшетах и смартфонах как для современных, так и для устаревших браузеров.
Повышает продуктивность групп разработчиков за счет интеграции в корпоративные среды разработки через плагины IDE.
Снижает стоимость разработки веб-приложений.
Позволяет командам создавать приложения с привлекательным пользовательским интерфейсом.
В нем есть набор виджетов для создания мощного и простого пользовательского интерфейса.
Он следует архитектуре MVC, поэтому код легко читается.
Размер библиотеки составляет около 500 КБ, что увеличивает время начальной загрузки и замедляет работу приложения.
HTML полон тегов <DIV>, что затрудняет отладку.
Согласно политике общих публичных лицензий, это бесплатно для приложений с открытым исходным кодом, но платное для коммерческих.
Иногда для загрузки даже простых вещей требуется несколько строк кода, что проще в простом HTML или JQuery.
Нужен достаточно опытный разработчик для разработки Ext JS приложений.
Ext JS поддерживает кроссбраузерную совместимость, он поддерживает все основные браузеры как -
- IE 6 и выше
- Firefox 3.6 и выше
- Chrome10 и выше
- Safari 4 и выше
- Opera 11 и выше
Ext JS 4+ поддерживает архитектуру MVC (контроллер представления модели). Начиная с Ext JS 5, он также начал поддерживать MVVM (Model View Viewmodel).
Ext JS 6 - это последняя версия Ext JS, которая имеет большое преимущество, заключающееся в том, что ее можно использовать как для настольных, так и для мобильных приложений. По сути, это слияние Ext JS (настольных приложений) и Sencha touch (мобильных приложений).
Ext JS - это фреймворк JavaScript, поэтому, чтобы начать его использовать, вы должны иметь предварительные знания HTML и JS (не экспертный уровень, но должны иметь базовые знания). Затем необходимо понять основы, поэтому дайте им время и постепенно учитесь.
Обе структуры довольно разные, мы можем сравнить Ext JS и jQuery UI, поскольку Ext JS - это полноценная среда с богатым пользовательским интерфейсом. Но все же Ext JS имеет гораздо больше компонентов, чем пользовательский интерфейс jQuery.
Параметр | Внешний JS | Угловой JS |
---|---|---|
Богатый интерфейс | Ext JS предоставляет богатые возможности пользовательского интерфейса, такие как формы, сетки, диаграммы. | Angular JS не предоставляет встроенного богатого пользовательского интерфейса |
Богатые компоненты пользовательского интерфейса темы | Ext JS предоставляет несколько встроенных тем | Angular JS не предоставляет Rich UI, он должен быть интегрирован с AngularUI, AngularBootstarp и т. Д. |
Кроссбраузерная совместимость | Ext JS обеспечивает кроссбраузерную совместимость, он работает практически со всеми браузерами IE6 +, FF, Chrome, Safari, Opera и т. Д. | Angular JS должен использовать сторонние библиотеки, такие как jQuery, jqLite для решения этой задачи. |
Поддержка автоматического тестирования | Возможно только с помощью внешних инструментов | Обеспечивает встроенный. |
Двусторонняя привязка данных | В Ext JS 5 включена двусторонняя привязка. | Он поддерживает двухстороннюю привязку, начиная с первой версии. |
Спектакль | Ext JS сравнительно тяжелее и медленнее. | Angular JS - это более легкий фреймворк, чем Ext JS |
Инструменты сборки | Ext JS использует инструмент Sencha cmd для сборки | Angular JS использует сторонние инструменты, такие как grunt. |
Ext JS 1.1
Первая версия Ext JS была разработана Джеком Слокумом в 2006 году. Это был набор служебных классов, являющийся расширением YUI. Он назвал библиотеку YUI-ext.
Ext JS 2.0
Ext JS версии 2.0 был выпущен в 2007 году. В этой версии была новая документация API для настольных приложений с ограниченными функциями. Эта версия не имела обратной совместимости с предыдущей версией Ext JS.
Ext JS 3.0
Ext JS версии 3.0 был выпущен в 2009 году. В этой версии были добавлены новые функции, такие как представление диаграмм и списков, но за счет скорости. Он был обратно совместим с версией 2.0.
Ext JS 4.0
После выпуска Ext JS 3 перед разработчиками Ext JS стояла основная задача - увеличить скорость. Ext JS версии 4.0 был выпущен в 2011 году. Он имел полностью пересмотренную структуру, за которой следовала архитектура MVC и быстрое приложение.
Ext JS 5.0
Ext JS версии 5.0 был выпущен в 2014 году. Основным изменением в этом выпуске было изменение архитектуры MVC на архитектуру MVVM. Он включает в себя возможность создания настольных приложений на устройствах с сенсорным экраном, двустороннюю привязку данных, адаптивные макеты и многие другие функции.
Ext JS 6.0
Ext JS 6 объединяет фреймворк Ext JS (для настольных приложений) и sencha touch (для мобильных приложений).
Ext JS имеет различные компоненты пользовательского интерфейса, некоторые из наиболее часто используемых компонентов:
- Grid
- Form
- Окно сообщения
- Индикатор
- Совет инструмента
- Window
- HTML редактор
- Charts
xType определяет тип компонента пользовательского интерфейса Ext JS, который определяется во время рендеринга компонента. Например, textField, Numeric, button и т. Д.
Этот тип проверки можно легко настроить. Некоторые vType, предоставляемые Ext JS, -
alphanumText - Возвращает false, если введенный текст имеет любой символ, кроме буквенного или числового.
emailText - Возвращает false, если текст не является действительным адресом электронной почты.
Да Ext JS можно интегрировать с Ajax. Реализация как: предположим, что в каком-то текстовом поле после размытия он должен проверить данные с сервера, для этого у нас может быть вызов Ajax onblur / onchange для идентификатора текстового поля, чтобы проверить, присутствуют ли данные, введенные в текстовое поле, на сервере / базе данных .
Да Ext JS может быть интегрирован с другими фреймворками на стороне сервера, такими как Java, .net, Ruby on rails, PHP, ColdFusion и т. Д.
Ext JS может быть реализован в любой популярной интегрированной среде разработки (IDE), такой как Eclipse, Aptana, Sublime, Webstrom и т. Д.
Это несколько способов доступа к элементам DOM в Ext JS -
- Ext.get()
- Ext.getElementById()
- Ext.fly()
- Ext.select()
Архитектура MVVM - это модель просмотра модели. В архитектуре MVVM контроллер MVC заменен на ViewModel.
ViewModel- Это в основном лечит изменения между представлением и моделью. Он связывает данные от модели к представлению. В то же время он не имеет прямого взаимодействия с представлением, он имеет только знание модели.
Ext.getCmp('buttonId').on('click', function(){
// statement to perform logic
});
Ext.onReady () - это первый метод, который вызывается при полной загрузке DOM, поэтому любой элемент, на который вы хотите сослаться, будет доступен при запуске скрипта.
Ext.select('div').on('click', function(){
// statement to perform logic
});
Различные типы окон предупреждений в Ext JS:
- Ext.MessageBox.alert();
- Ext.MessageBox.confirm();
- Ext.MessageBox.wait();
- Ext.MessageBox.promt();
- Ext.MessageBox.show();
Базовые классы для Store - Ext.data.Store
Для модели - Ext.data.Model
Для контроллера это Ext.app.controller
Это разные способы обработки событий -
- Использование слушателей
- Присоединение событий позже
- Использование пользовательских событий
Store.getCount() - Для кешированных записей
Store.getTotalCount() - Всего нет записей в БД.
Метод Store.getModifiedRecords () используется для получения измененных записей.
Store.commitChanges () для обновления изменений в магазине.
Если у нас есть идентификатор сетки: Ext.getCmp ('gridId'). GetStore (). GetAt (index);
Если у нас есть store Id: Ext.getStore ('storeId'). GetAt (index);
Store.load ();
- Базовый класс для Grid - Ext.grid.GridPanel
- Для формы - Ext.form.Panel
- Для панели - Ext.panel.Panel
- Для графика - Ext.chart.Chart
- Для дерева - Ext.tree.Panel
Разные типы макетов -
- Absolute
- Accordion
- Anchor
- Border
- Auto
- hBox
- vBox
- Card(TabPanel)
- Card(Wizard)
- Column
- Fit
- Table
Это можно сделать с помощью pagingToolbar () как -
new Ext.PagingToolbar ({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: 'No topics to display',
});
// trigger the data store load
store.load({params:{start:0, limit:25}});
dockedItems: [{
xtype: 'toolbar',
items: [{
id:'buttonId',
handler: function() {
Ext.Msg.alert('title','alertMsg');
});
}]
}]
Loadmask используется для предотвращения любых других операций, показывая загрузку (или настраиваемое сообщение) пользователю, пока данные не будут отображены в сетке. Loadmask: true; - это свойство отображать маску загрузки при отображении данных в сетке.
Renderer используется, когда мы хотим манипулировать данными, которые мы получаем из магазина, чтобы показать обработанные данные на основе некоторых критериев. Это свойство столбца можно использовать как -
renderer: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
}
Ext.getCmp ('идентификатор'). GetValue ();
Скрытый: правда;
Сортируемый: правда; что по умолчанию верно.
grid.getStore().on ({
beforeload : function(store) {
// perform some operation
},
load : {
fn : function(store) {
//perform some operation
},
scope : this
}
store.load();
});
Ext JS 6 имеет пакет инструментов, с помощью которого он может включать визуальные элементы обоих фреймворков (Ext JS и Sencha Touch).
Его можно добавить как -
'инструментарий': 'классический', // или 'современный'
Если инструментарий классический, он включает фреймворк для настольных приложений Ext JS.
И если инструментарий современный, то он включает фреймворк для мобильных приложений sencha touch.
Что следующее?
Далее вы можете просмотреть свои прошлые задания, которые вы выполнили с этим предметом, и убедиться, что вы можете уверенно говорить по ним. Если вы посвежее, интервьюер не ожидает, что вы ответите на очень сложные вопросы, скорее, вам нужно сделать свои базовые концепции очень сильными.
Во-вторых, на самом деле не имеет большого значения, если вы не смогли ответить на несколько вопросов, но важно, чтобы вы ответили с уверенностью. Так что просто будьте уверены во время собеседования. Мы в tutorialspoint желаем вам удачи и хорошего интервьюера и всего наилучшего в ваших будущих начинаниях. Ура :-)