Skip to main content

Migration of Ext 3 to 4 application

It is possible to integrate Ext Js 4′s charts with an Ext JS 3 application. There is a demo of this on the main demos page (http://dev.sencha.com/deploy/ext-4.0.1/examples/sandbox/sandbox.html) which should show you how to integrate it.
We are very pleased to introduce several new resources that will assist in migrating existing Ext JS 3 applications to Ext JS 4, and will hopefully minimize the difficulty and effort involved. These are bundled in our new Ext JS 3 to 4 Migration Pack, the components of which are outlined below.
  • Ext JS 3 Compatibility Layer
  • Ext JS 3 to 4 Migration Guide
  • Ext JS Migration Demo App
  • Ext JS Migration Screencasts
I tried to look at the sample sandbox code; but it’s difficult to understand for the beginner. I will really appreciate if someone can provide me small working example like this:
var ext3Panel = new Ext.Panel({
title:’Ext3′
});
ext3Panel.on(‘afterrender’, function() {
var ext4Panel = Ext4.create(‘Ext.panel.Panel’, {
title:’Ext4′,
renderTo:ext3Panel.body.dom,
});
ext3Panel.add(ext4Panel);
});
I have read threads below:
http://stackoverflow.com/questions/6073241/adding-extjs4-components-to-extjs3-components
http://www.sencha.com/forum/archive/index.php/t-126391.html?s=883dcae1c09ec820e52fb96c737fe20f

Digging Deeper

Ext JS 4 introduces 4 new classes to make all this magic work:

  • Ext.Base – all classes inherit from Ext.Base. It provides basic low-level functionality used by all classes
  • Ext.Class – a factory for making new classes
  • Ext.ClassLoader – responsible for ensuring that classes are available, loading them if they aren’t on the page already
  • Ext.ClassManager – kicks off class creation and manages dependencies

Comments

Post a Comment

Popular posts from this blog

Ext4 Apply Store Filtering

In extjs4.1: There are many way for store filtering . Some of code i give here Filtering by single field: store . filter ( 'eyeColor' , 'Brown' );   Alternatively, if filters are configured with an  id , then existing filters store may be  replaced by new filters having the same  id . Filtering by single field: store . filter ( "email" , /\.com$/ );   Using multiple filters: store . filter ([ { property : "email" , value : /\.com$/ }, { filterFn : function ( item ) { return item . get ( "age" ) > 10 ; }} ]);   Using  Ext.util.Filter  instances instead of config objects (note that we need to specify the root config option in this case): store . filter ([ Ext . create ( ' Ext.util.Filter ' , {   property : "email" , value : /\.com$/ , root : 'data' }),   Ext . create ( ' Ext.util.Filter ' , {   filterFn : function ( item ) {   return item . get ( &
Post a Comment
Read more

ExtJS - Grid panel features

What can we do with ExtJS GridPanel? I have to develop a lot of applications in my web app and I see that grid component of ExtJS may fit in. However, I am not aware of what all things I can do with the - off the shelf available framework pieces - available plug-ins in the marketplace and - custom development through my own developers This is a typical question that we hear from the business users who wants to design an application by keeping the framework’s capability in perspective. In this article I have tried to put the list of stuff you can do with grid and hopefully that shall enable you to take advantage of the beauty of ExtJS. Pre-requisites This article assumes that you are familiar with basics of ExtJS What are the available options? In this section I will be taking you through some of the commonly seen usage of ExtJS grid panel. While covering all the capabilities of grid may not be possible, I am sure it will be helpful for the business users who want to
8 comments
Read more

EXTJS - Way to get a reference to the viewport from any controller

An easy way to get a reference to the viewport from any controller Here's an easy way to get a reference to your viewport from any controller: Ext.application({ launch: function(){ this.viewport = Ext.ComponentQuery.query('viewport')[0]; this.centerRegion = this.viewport.down('[region=center]'); } }); then, inside say, a controller, you can call this: this.application.viewport to get a reference to the viewport.
4 comments
Read more