Ext-JS Interview Preparation Guide

Download PDF

var json = Ext.decode(response.responseText);
Ext.Msg.alert('Error', json.error);

var grid = new Ext.grid.GridPanel({
store: new Ext.data.JsonStore({
[...]
listeners: {
load: this.onLoadSuccess.crateDelegate(this),
exception: this.onLoadException.createDelegate(this)
}
}),

onLoadSuccess: function () {
// success
},

onLoadException: function () {
// error
},

[...]
}

using hidden : true

store, columnmodel, id, width,height
46. how to disable menu option for header in columnModel?
using menuDisabled: true

using config option as
emptyClass : 'emptycss', where emptycss is a css classname

using getvalue();
var selectedValue = mytextfield.getValue();

To get the selected value from a combo.using getvalue();
var selectedComboValue = mycombo1.getValue();

newRecord.commit();

newRecord.beginEdit();

newRecord.endEdit();

using grid.getSelectionModel(); method

using config option,
renderer: fnCellColor where fnCellColor is method to apply color to a cell.

To apply mask to page level / component level.
restrict user not to access any components in page
var pageProcessBox = new Ext.LoadMask( Ext.getBody(), { msg: 'Loading Employee details.' } );
pageProcessBox.show();

var record = grid.getStore().getAt(rowIndex);

The validations provided are basic and intended to be easily customizable and extended.
Few vtypes provided by extjs are as below:
emailText : String, The error text to display when the email validation function returns false
alphanumText : String, The error text to display when the alphanumeric validation function returns false
urlText : String, The error text to display when the url validation function returns false

The xtype will be looked up at render time up to determine what type of child Component like TextField, NumberField etc to create. i,e
xtype = Class
----------------------
button = Ext.Button
textfield = Ext.form.TextField
radio - Ext.form.Radio
grid = Ext.grid.GridPanel
combo = Ext.form.Combobox
toolbar = Ext.Toolbar

using Ext.PagingToolbar plugin, we can implement pagination to a grid panel
syntax:
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}});

Layouts fall under this package Ext.layout.*
Types of layouts:
Absolute Layout:
This is a simple layout style that allows you to position items within a container using CSS-style absolute positioning via XY coordinates.
Accordion Layout:
Displays one panel at a time in a stacked layout. No special config properties are required other than the layout.
All panels added to the container will be converted to accordion panels.
AnchorLayout:
This type of layout is most commonly seen within FormPanels (or any container with a FormLayout) where fields are sized relative to the container without hard-coding their dimensions.
BorderLayout:
Border layouts can be nested with just about any level of complexity that you might need.
Every border layout must at least have a center region. All other regions are optional.
CardLayout (TabPanel):
The TabPanel component is an excellent example of a sophisticated card layout. Each tab is just a panel managed by the card layout such that only one is visible at a time
CardLayout (Wizard):
You can use a CardLayout to create your own custom wizard-style screen.
FitLayout:
A very simple layout that simply fills the container with a single panel.
FormLayout:
FormLayout has specific logic to deal with form fields, labels, etc.FormLayout in a standard panel,
ColumnLayout:
This is a useful layout style when you need multiple columns that can have varying content height.Any fixed-width column widths are calculated first, then any percentage-width columns specified using the columnWidth config
TableLayout:
Outputs a standard HTML table as the layout container.you want to allow the contents to flow naturally based on standard browser table layout rules.

store.loadData( Object data, [Boolean append] ) : void
Loads data from a passed data block and fires the load event.
loadData(storeData,false); False to replace the existing records cache.
loadData(storeData,true) : True to append the new Records rather than replace the existing cache.

store.load() : returns boolean
Loads the Record cache from the configured Proxy using the configured Reader.
For remote data sources, loading is asynchronous, and this call will return before the new data has been loaded.
store.load({callback: fnCheckData, scope: this});

store.getById( String id ) : Get the Record with the specified id.

store.getAt( Number index ) : Get the Record at the specified index.

store.getModifiedRecords() : Gets all records modified since the last commit.

Calls the specified function for each of the Records in the cache
each( Function fn, [records Object] )

use store.commitChanges()