What Is EXT.js?
Ext.js
stands for extended JavaScript and the first version was developed by Jack Slocum in 2006, which is an
extension of YUI (Yahoo user interface). He named the
library as YUI-ext.
Ext.js
is pure object oriented and extensible JavaScript framework and it used to developed
interactive cross-platform web applications, reach UI such as desktops, tablets, and smartphones
using techniques such as Ajax, DHTML and DOM.
It is a Sencha
product which is extended from YUI
(Yahoo user interface).
Ext.js
is a product of Sencha a software firm based in Redwood City, California.
Ext.js
is high-performance, customizable UI
widgets - including HTML5 grids, trees, lists, forms, menus, toolbars, panels, windows, and so on.
Ext.js is pre-Integrated and tested UI Components
such as –
1. HTML5
calendar
2. grids
3. pivot
grid
4. D3
adapter
5. trees
6. lists
7. forms
8. menus
9. and
so on
Its distribution is done through two licenses -
1. A
business license
2. Open
source but limited
Ext.js
provides everything a developer needs to build data-intensive, cross-platform
web and smartphones applications.
Why did you choose Ext.js?
1. Documentation
is very comprehensive and well maintained
2. Build
rich UI web and smartphones applications
3. It’s
also supports to cross-browser
4. It’s
provides excellent performance and customizable UI widgets
What Is the latest stable version of Ext.js?
The Latest stable version of Ext JS 6.2.1 August
2017
Ext.js is extended on which library?
It is a Sencha product which is extended from YUI
(Yahoo user interface).
What Is a Widget?
A widget is a tiny piece or component of
functionality.
What Are the features of EXT.js?
List some Ext.js features -
1. Rich
Data Analytics
2. Customizable
Built-In Themes
3. It
can access data from any back-end source
4. Pre-Tested,
high-performance, Integrated UI Components
5. Sophisticated
Data Visualization
6. Back-end
Agnostic Data Package
7. Flexible
layout manager and Responsive Configs
8. Create
data-intensive HTML5 applications using JavaScript
9. Ext
JS leverages HTML5 features on modern browsers.
10. Accessibility
Package (ARIA) for Section 508 compliance
What Are the life-cycle of a component in Ext.js?
1. Initialization
2. Rendering
3. Destruction
Which Architecture Is supported by Ext.js?
Ext JS follows MVC/ MVVM architecture.
Ext.js provides support for both MVC and MVVM application architectures.
The MVC
know as Model View Controller and MVVM
known as Model View ViewModel
What Are the differences between MVC and MVVM?
MVC
-
1. MVC
is a design pattern
2. MVC
work like disconnected mode
3. MVC
supported only one-way binding
4. In
MVC, not update UI automatically when your data model update. Need event to
call data model and update it
5. In
MVC, model parts directly bind with the view page
MVVM
–
1. MVVM
is a design pattern
2. MVVM
supported two ways binding
3. The
UI is update automatically when your data model update
4. And
so on
What Are the Advantages of using Ext.js?
1. Supports
Cross-platform development
2. Reduces
the cost of web application development
3. High
performance
4. Pre-Tested
widgets and UI Components
5. It
has set of widgets for making UI powerful and easy
6. It
follows MVC architecture so highly readable code
7. It
follows MVVM architecture so highly readable code
What Are the prerequisites for learning Ext.js?
1. Good
knowledge on HTML, CSS, JavaScript
2. Drive
through EXT.js API docs & practice samples
What Are the main library files to add in HTML page?
These are the main files to include in HTML page
to run Ext JS code -
1. Ext-all.js
2. Ext-all.css
What Are the limitations of using Ext.js?
1. The
library is too large around 500KB.
2. Difficult
to debug HTML
3. It
is paid for commercial applications
What Are the difference between ‘ext.js’ and ‘ext-all.js’ file?
The Ext.js
- Its contains the minimum Ext.js code (Ext.js base library) and used in
Production
The Ext-all.js
- Its contains the entire Ext JS framework (used for Development &
testing)
How many types of EXT.js components?
The Types of components -
1. Window
2. Form
3. ToolTip
4. HTML
Editor
5. Grid
6. Charts
7. Message
Box
8. Progress
Bar
How many types of layout managers exist in Ext.js?
1. FormLayout
2. ColumnLayout
3. TableLayout
4. Absolute
Layout
5. AnchorLayout
6. Accordion
Layout
7. BorderLayout
8. CardLayout
(TabPanel)/CardLayout (Wizard)
9. FitLayout
What Are the different types of alert boxes in Ext.js?
Different types
of alert boxes in Ext JS are -
1. Ext.MessageBox.alert();
2. Ext.MessageBox.confirm();
3. Ext.MessageBox.wait();
4. Ext.MessageBox.promt();
5. Ext.MessageBox.show();
How to get no. of records in the store?
1. Store.getCount()
– Use for cached records
2. Store.getTotalCount()
– Use for total no of records in the DB
What Are the browser Ext.js supports?
The list of modern browsers which are supported
by -
1. IE
6 and above
2. Firefox
3.6 and above
3. Chrome10
and above
4. Safari
4 and above
5. Opera
11 and above
What Are the Grid Plugins?
The Grid Plugins Are –
1. Editing
Plugin
2. RowExpander
Plugin
3. BufferedRenderer
Plugin
4. DragDrop
Plugin
Editing
plugin - Ext.grid.plugin.Editing - This plugin is
used for editing the grid row and cell.
RowExpander
plugin - Ext.grid.plugin.RowExpander - This plugin is
used for creating expandable rows.
BufferedRenderer
plugin - Ext.grid.plugin.BufferedRenderer - This plugin
is used to render large number of grid records.
DragDrop
plugin - Ext.grid.plugin.DragDrop - This plugin is
used to implements the drag and drop functionality in a grids.
The each grid plugins has an alias name that is known
as ptype similar to xType and we can configure the plugin using the ptype or Ext.create() methods.
What Is xType in Ext.js?
The xType
defines the type of UI component which is determined during rendering of the
component in the Ext.js.
For Example, some of the xType component looks like - Numeric,
button and so on.
What Is vType in Ext.js?
The vType is
the validation type and it can be customized easily.
For Example, some of the xType component looks like – emailText
and alphanumText
The emailText
– The emailText returns false, if input text is not a valid email address.
The alphanumText
– The alphanumText returns false, if entered input text is not alphabets or
numeric values.
What Is the role of Ext.onReady()?
The Ext.onReady() method is the first method and
this method is called when DOM is fully loaded.
Syntax
-
Ext.onReady(function()
{
alert("Great,
Nice to see you!");
});
How many types you access the DOM elements in Ext.js?
The DOM elements in Ext.js are -
1. Ext.get()
2. Ext.getElementById()
3. Ext.fly()
4. Ext.select()
How To handling events in Ext.js?
The ways
for event handling -
1. Using
Listeners
2. Attaching
events later
3. Using
custom events
What Is the base class for store, model & controller?
The base classes for Store is Ext.data.Store and
the Ext.data.Store object have getModifiedRecords() method which returns all
records added or updated since the last commit.
The base classes for model is Ext.data.Model
The base classes for Controller is
Ext.app.controller
How
to get value of an element in Ext.js?
Ext.getCmp('id').getValue();
How to get record object from store?
var
rowIndex = grid.getStore().getAt(rowIndex);
How to get Store record using index?
BY using grid
Id - Ext.getCmp('gridID').getStore().getAt(index);
By using
store Id
- Ext.getStore('storeID').getAt(index);
How to disable menu option for header in columnModel?
In Ext.js, that would be done by specifying menuDisabled: true in the column
definition.
We can use a property that can be set for each
column-
ü menuDisabled:true
ü sortable:false
// menu shows but no sort options
ü hideable:false
// menu shows but column name not shown in columns
menu
ü menuDisabled:true
// no menu
How to hide column in the grid panel?
ü Hidden:
true;
How to get selection model used in a grid panel?
Using the - grid.getSelectionModel() method
The example looks like -
var
grid = Ext.getCmp('documentsGrid');
var
rec = grid.getSelectionModel().getSelected();
rec.get('tagnum')
How to stop editing a record?
Using the - newRecord.endEdit() method
The example looks like –
Ext.define('Ext.form.Basic',
{
...
updateRecord: function(record)
{
var fields
= record.fields,
values
= this.getFieldValues(),
name,
obj
= {};
fields.each(function(f)
{
name
= f.name;
if
(name in
values) {
obj[name]
= values[name];
}
});
record.beginEdit();
record.set(obj);
record.endEdit();
return this;
},
...
});
How to start editing a record?
By Using the - newRecord.beginEdit() method.
Ext.define('Ext.form.Basic',
{
...
updateRecord: function(record)
{
var fields
= record.fields,
values
= this.getFieldValues(),
name,
obj
= {};
fields.each(function(f)
{
name
= f.name;
if
(name in
values) {
obj[name]
= values[name];
}
});
record.beginEdit();
record.set(obj);
record.endEdit();
return this;
},
...
});
How to commit a record modification?
By using the - newRecord.commit() method
app.Ajax.request({
url :
'db/Contacts',
method : 'POST',
params : record.getData(),
scope :
this,
success:
function(response){
if(response.success){
record.id
= response.id;
var
store = this.getDataview().getStore();
store.add(record);
store.commitChanges();
}
}
});
What Are components required for grid panel?
The grid
required components are –
1. width,
2. height
3. store
4. columnmodel
and
5. id
How to decode response in Ext.js?
var
json = Ext.decode(response.responseText);
Ext.Msg.alert(‘Error’,
json.error);
How to handle exception while loading datastore?
By Using the - store.loadexception() method
The example looks like –
store.on('loadexception',
function(event,
options, response,
error) {
alert("Hey,
something happing.");
event.stopEvent();
});