Ext JS

  Home  Client Side Scripting  Ext JS


“Ext JS frequently Asked Questions in various Ext-JS job Interviews by interviewer. The set of questions here ensures that you offer a perfect answer posed to you. So get preparation for your new job hunting”



65 Ext JS Questions And Answers

42⟩ Explain what is purpose of loadData() in store?

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.

 133 views

43⟩ Explain what is the purpose of load() in store?

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});

 142 views

48⟩ What is xtype?

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

 148 views

49⟩ How to how many types of layout managers exist in extjs?what are they?

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.

 141 views

50⟩ What is vtype?

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

 148 views

52⟩ Explain how we can apply pagination in grid panel?

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}});

 142 views

53⟩ Explain purpose of Load mask?

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();

 134 views