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 желаем вам удачи и хорошего интервьюера и всего наилучшего в ваших будущих начинаниях. Ура :-)