Posts Tagged ‘Extjs’

How to use ExtJs inside React Js

by on Saturday, December 3rd, 2016

Reference: Sencha

Just install @extjs/reactor:

npm install --save @extjs/reactor

…add the following code to your app:
React JS

import { install } from '@extjs/reactor';

…and you can start using Ext JS components like the grid in your React components. Here’s an example:

import { Grid } from '@extjs/reactor/modern';

function MyReactComponent(props) {
return (
<h1>An Ext JS Grid in React</h1>


To use any Ext JS component in React, simply import that component by xtype from @extjs/reactor/modern or @extjs/reactor/classic. Because React components are always upper case, @extjs/reactor automatically converts xtypes to lower case for your convenience. In other words:

import { Grid } from '@extjs/reactor/modern';

…is equivalent to:

import { grid as Grid } from '@extjs/reactor/modern';

This syntax is made possible by a babel plugin, @extjs/reactor-babel-plugin, which actually converts the above to:

import { reactify } from '@extjs/reactor';
const Grid = reactify('grid');

The reactify function creates a React component wrapper for any Ext JS class or xtype. You can use reactify on your own classes as well. For example, if you have a custom class with xtype: ‘mygrid’, you can use:

import { reactify } from '@extjs/reactor';
const MyGrid = reactify('mygrid');

Or, if you have a reference to the custom class, you pass it to reactify as well:

import { MyExtJSGrid } from './extComponents/MyExtJSGrid';
const MyGrid = reactify(MyExtJSGrid);

Once you’ve imported an Ext JS component, you can use it as you would any other React component. Configs are set using props. Any props starting with “on*” become listeners, so you can do things like:

onSelect={(grid, record) => console.log(`${record.get(‘name’)} selected.`)}
Child tags are automatically added to the items config, so Ext JS layouts work like you’d expect:
This panel is on the left.
This panel is on the right.

The @extjs/reactor package also adheres to React’s principle of minimizing changes to the dom. If you change the value of the title prop in this example:

function MyReactComponent({ title }) {
return (
My title may change!

…@extjs/reactor automatically calls the corresponding setTitle method on the Ext.Panel instance rather than tearing down and rebuilding the entire component.

Most React projects are built using webpack, so we’ve provided a plugin, @extjs/reactor-webpack-plugin, that produces a minimal build of Ext JS containing only those components that you use in your app. The plugin scans your code for import statements as well calls to Ext.create and Ext.require to determine which classes you use, then sends that information to Sencha Cmd to produce the minimized, optimized build of the framework. Here’s an example config:

plugins: [
new ExtJSReactorWebpackPlugin({
sdk: '/path/to/ext',
theme: 'theme-material',
toolkit: 'modern',
packages: ['charts']


Buy ExtJS and ReactJS books:

sencha loading icon before app startup screen

by on Thursday, May 9th, 2013

In the index.html,  add a div in the body:

 <style type="text/css">
 #loading-mask {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: url(resources/img/indicator.gif) no-repeat;
 text-align: center;
 <div id="loading-mask"></div>
 <script type="text/javascript" src="app.js"></script>


In app.js, in the launch function, once all the app initialization is finished I remove the load mask with a fade animation:

if (Ext.get('loading')) {
 var loadmask = Ext.get('loading');, 'fade', {
 easing: 'out',
 duration: 500,
 after: function() {

 xtype: 'loadmask',
 message: 'Please wait...'

Create some view here and call


Extjs 4 How to create Password field ?

by on Friday, June 29th, 2012

var yourField = new Ext.form.TextField({
fieldLabel: ‘pass’,
inputType: ‘password’    //this is important .. you have to change text to password

Extjs Send extra param with pagination

by on Monday, August 2nd, 2010

bbar: new Ext.PagingToolbar({
pageSize: 6,
id: ‘grid-bbar’ ,
store: store,
listeners: {
beforechange: function (tb, param) {
var section= Ext.getCmp(‘rsection’).getValue();
var section1= Ext.getCmp(‘newID’).getValue();
param[‘section1’] = section1;
param[‘section’] = section;
displayInfo: true,
displayMsg: ‘Displaying topics {0} – {1} of {2}’,
emptyMsg: “No topics to display”