Upgrading 3.2 to 4.0

[beckhamrryyaann]

Has any one had any success with upgrading existing 3.2 apps to the new 4.0? I have included the changes for the front end in the migration guide but there seems to be more to it than that. I have worked several hours on a converting a app and thought i would ask the forum for some advice in case I was missing something i should know.

thanks!

[Scott]

I have but I only had a couple of apps that were fairly simple. I did have to change a couple of things, errors in the console pointed those out. I also did find a couple of things that were related to known bugs in ExtJs, I think I posted about them in this forum. If you are having particular issues maybe we can help.

[beckhamrryyaann]

Hey Scott,
thanks for the reply!

I too have had to look at several issues with migrating this app. I have fixed several issues.... I see where they changed the app structure. Best practice - The app.js and index.html should be in the main folder for the application. (not in the /AppName/app directory like it was in 3.2. Then i noticed when you are creating your app.js file you no longer use Ext.create('Ext.app.Appication',{ ........ });
You are to use Ext.application({ ....... });
But i cannot figure out a problem with a store i have. I can post more info on the error when i get back to the office on Monday.

[Scott]

One thing I found that works in 3.2 and doesn't work in 4.0 is store.removeAll(). It is a Sencha bug that is fixed in their later versions. I had to put a work around in one of my apps to avoid it, see for details http://cnxforum.com/showthread.php?1...-it-be-updated

[EvaY]

I just did this successfully (and relatively quickly) on Friday. Although we'll be coding for Ext JS 4.2x going forward, we don't have time to convert our old apps to work with the newer version of Ext JS so we copied the Ext JS 3.4 and 4.1.1 directories on the IFS from the Valence directory out to our own directory, and then created a directive in the Apache config file for it. Then, a simple change to the index file and a recompile of our RPG pgms over the new service pgm did the trick.

So, in the case of one of our 4.1.1 apps, this:

<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="/extjs4/ext-all.js"></script>

Became this:

<link rel="stylesheet" type="text/css" href="/OurOwnDirectory/ext-4.1.1/resources/css/ext-all.css" />
<script type="text/javascript" src="/OurOwnDirectory/ext-4.1.1/ext-all.js"></script>

('OurOwnDirectory' representing the name of our specific directory, of course)

The config file directive:

Alias /OurOwnDirectory /OurOwnDirectory
<Directory /OurOwnDirectory>
   Order Allow,Deny
   allow from all
</Directory>

In order to keep our [ iconCls: 'someicon' ] code from breaking, we also copied all of the the icon png files from the vvresources/icons directory in Valence 3.2 and the corresponding css from the valence.css file into OurOwnDirectory and OurOwnCss.css file of our own. That required a change to the index file to point to the new css file.

The initial setup of copying the Ext JS libraries into our own Ext JS directories, creating the css, and modifying the config file took a little while but those were one-time tasks. Now all we have to do to move our other apps over is to change the index files and recompile the RPG source.

By the way, this was all done based on a suggestion from the folks at CNX.

Hope that helps.

[beckhamrryyaann]

Thanks for the replies.
EvaY this might be what i end up doing also. I don't believe i 'll have the time to rewrite the code into the version 4 framework. I will give this a try later on today.

[ThierryC]

Hi, all

need some help/advise on converting an existing 3.2 (MVC) application to 4.0


i applied the suggestions as described in the Valence APi -guide. and modified the settings in my index.html as described..
however when launching the app i get the following

uncaught ReferenceError: Ext is not defined (from vvtheme.js)

also it is trying to locate the controller in a level too deep.. :

controller is located in : http://cmis001:7040/html/Comaker/cmq...roller/Main.js

but with Valence4.0 is searching in : http://cmis001:7040/html/Comaker/cmq...roller/Main.js



this is my index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Comaker offerte</title>
<link rel="stylesheet" type="text/css" href="/packages/vvtheme/build/resources/vvtheme-all.css" />
<script type="text/javascript" src="/packages/vvtheme/build/vvtheme.js"></script>

<link rel="stylesheet" type="text/css" href="/cmresources/cms.css" />
<link rel="stylesheet" type="text/css" href="/cmresources/CheckHeader.css" />
<link rel="stylesheet" type="text/css" href="/html/comaker/cmqu10r/app/resources/css/styles.css" />

<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="/resources/valence.js"></script>

<script type="text/javascript" src="/html/comaker/cmqu11r/app.js"></script>
<script type="text/javascript" src="/html/comaker/cmqu11r/app/view/SubTitel.js"></script>
<script type="text/javascript" src="/cmresources/CheckColumn.js"></script>
....

in my App.js :

[ThierryC]

(sorry : my previous thread was accidently send too early..)

Hi, all

need some help/advise on converting an existing 3.2 (MVC) application to 4.0


i applied the suggestions as described in the Valence APi -guide. and modified the settings in my index.html as described..
however when launching the app i get the following

uncaught ReferenceError: Ext is not defined (from vvtheme.js)

also it is trying to locate the controller in a level too deep.. or at least the /app has been replaced by the application name..

controller is located in :

http://cmis001:7040/html/Comaker/cmqu10r/app/controller/Main.js 

but with Valence4.0 is searching in :

http://cmis001:7040/html/Comaker/cmqu10r/controller/Main.js 

(this is my filestructure)

/valence40
  >html
  >>comaker
  >>>cmqu10r
    >>app
       >>>config
       >>>controller
       >>>model
       ....
       app.js
       index.html

and in my apache config is one from cnx but i've added :

# Quadrant html
  91	   Alias /html /valence-4.0/html
  92	   <Directory /valence-4.0/html>
  93	        Order Allow,Deny
  94	        allow from all
  95	   </Directory>
  96	   
  97	   # cms resource directives
  98	   Alias /cmresources /valence-4.0/cmresources
  99	   <Directory /valence-4.0/cmresources>
  100	        Order Allow,Deny
  101	        allow from all
  102	   </Directory>

this is my index.html
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Comaker offerte</title>
<link rel="stylesheet" type="text/css" href="/packages/vvtheme/build/resources/vvtheme-all.css" />
<script type="text/javascript" src="/packages/vvtheme/build/vvtheme.js"></script>

<link rel="stylesheet" type="text/css" href="/cmresources/cms.css" />
<link rel="stylesheet" type="text/css" href="/cmresources/CheckHeader.css" />
<link rel="stylesheet" type="text/css" href="/html/comaker/cmqu10r/app/resources/css/styles.css" />

<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="/resources/valence.js"></script>

<script type="text/javascript" src="/html/comaker/cmqu11r/app.js"></script>
<script type="text/javascript" src="/html/comaker/cmqu11r/app/view/SubTitel.js"></script>
<script type="text/javascript" src="/cmresources/CheckColumn.js"></script>
....

in my App.js :

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'Shared': '/html/comaker/Shared',
        'cmqu10r.store': '/html/comaker/cmqu10r/app/store',
        'cmqu10r.model': '/html/comaker/cmqu10r/app/model',
        'cmqu10r.view': '/html/comaker/cmqu10r/app/view'
    }
});

Ext.util.Format.thousandSeparator = '.';
Ext.util.Format.decimalSeparator = ',';

app = Ext.create('Ext.app.Application', {
    name: 'cmqu11r',
    controllers: ['Main'],
    stores: ['Rawmaterials', 'Packagings', 'Inserts', 'Machines'],
    appFolder: '/html/comaker/cmqu11r/app',
    requires: ['cmqu11r.config.Settings', 'cmqu10r.store.Engineers', 'cmqu10r.model.Engineer', 'cmqu10r.store.Saless', 'cmqu10r.model.Sales', 'cmqu10r.view.ClearableCombo',
               'cmqu10r.view.Twintrigger', 'Shared.view.PrintM402'],
....

{

[beckhamrryyaann]

Here is the index.html file of one of my apps that have been successfully migrated.
One thing that threw me was you have to use the old extjs-all.js but you must use the new and improved Valence 4 valence.js.
it looks like your using the correct valence.js but you should try using the old ext-all.js from the valence 3.2 world... I hope that helps.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Price Lists Maintenance</title>

<link rel="stylesheet" type="text/css" href="/mccrearyapps/Valence-3.2/ext-4.1.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/mccrearyapps/Valence-3.2/vvresources/valence.css" />
<link rel="stylesheet" type="text/css" href="/mccrearyapps/Valence-3.2/ext-4.1.1/examples/ux/css/CheckHeader.css" />

<link rel="stylesheet" type="text/css" href="/mccrearyapps/mccreary/PriceLists/PLMaint/app/resources/custom.css">

<script type="text/javascript" src="/mccrearyapps/Valence-3.2/ext-4.1.1/ext-all-dev.js"></script>
<script type="text/javascript" src="/resources/valence.js"></script>
<script type="text/javascript" src="/mccrearyapps/mccreary/PriceLists/PLMaint/app/app.js"></script>

</head>
<body>
</body>
</html>