1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    28
    Vote Rating
    0
    ahsanzubair is on a distinguished road

      0  

    Default How to Migrate Sencha Touch2 Project code into ExtJS

    How to Migrate Sencha Touch2 Project code into ExtJS


    I need a help, regarding to migrate Sench Touch2 Project into ExtJS4.1. Actually i didn't want to rework from scratch for ExtJS project that we have already done into Sencha Touch. I want to resuse the existing code . Is there anyway to convert it? using Sencha Achitect.

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,506
    Vote Rating
    373
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    There's no automated conversion too AFAIK. Of course, the Touch application would run directly w/o any changes in WebKit browsers.

    There's also other thing to consider: You may need/want to change your views as they were tailored to touch and small display interface. That is not very user friendly on desktops so views are the first candidates to re-design.

    Controllers may work unchanged, however, if a controller is listening to tap or pinch event the event never gets fired on desktop so you need to change at least control method.

    Stores and model may work untouched or they need very little adjustment.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    28
    Vote Rating
    0
    ahsanzubair is on a distinguished road

      0  

    Default Sure need your help in the conversion.

    Sure need your help in the conversion.


    We do need to have our project converted in fixed time period.

    That is right, at least webkit browsers should accept our custom css and extjs css.

    Right, views need re-designing. We did out best to design them in way they fix in any width and height but there may be more to do with views.

    These errors show up after we replaced script and link for ExtJs JS and CSS in app.html
    Not a long list though
    i really cant understand what is missing and what should be changed to get rid of these errors. Hope this wont be big time problem for you guys to figure out. I am waiting for further help from you guys.

    Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.mixin.Observable
    app.html:21TypeError: 'undefined' is not an object (evaluating 'Ext.browser.is')
    DateExtras.jsGET http://localhost:8090/mobile/DateExt...=1358564563659 404 (Not Found)

    Thanks

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,506
    Vote Rating
    373
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    The error is what it says: Ext.Loader is not enabled. You don't need to use loader but then you have to include ext-all.js in your index page.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #5
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    28
    Vote Rating
    0
    ahsanzubair is on a distinguished road

      0  

    Default The 1st error is too confusing for me. It is telling me 3 things at one place.

    The 1st error is too confusing for me. It is telling me 3 things at one place.


    Those errors are just pain in ..S not only for the reason their description is not clear, they dont even tell what to do next to avoid encountering them. look like sencha developers were too confused to figure out and suggest.

    i am using sencha architect and believe me i dont know www (when, where, why) sencha-Arch included/excluded those loaders.

    im trying to avoid any time wasting learning. here is what i have in app.html regarding JS/CSS. now please let me know what should be there instead.

    <script src="http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all.js"></script>
    <link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css">


    Thanks

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,506
    Vote Rating
    373
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    So you took the Touch project, changed includes in app.html to Ext and try to run it? If so, it's not going to work this way. Your Touch code refers to Ext.mixin.Observable somewhere but in Ext the Observable namespace is Ext.util.

    Also, I suspect that as soon as you fix this problem then other of the similar nature will appear.

    I don't thing this is the way. I'd start new Ext project and I'd copy to it all reusable pieces from the existing Touch code. That would be much more effective, IMO.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  7. #7
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    28
    Vote Rating
    0
    ahsanzubair is on a distinguished road

      0  

    Default i got your point now

    i got your point now


    yes i did exactly the same. but today tried another way to use same Touch code.

    i exported loginform from Touch and want to import it into toolbar of my new from scratch ExtJS project.
    this way i will have to change few things in exported file before importing in ExtJS.
    If i can some how get list of errors when importing then it will be easy for me to find the red lines and remove them.
    for example passwordfield in touch code should be replaced with textfield, and there is no top, right, left properties in ExtJs.

    i felt this the easy way because much of code will work without change. And important point is the one and only way of editing code in sencha architect. that mean, the exported file is simple text file and can be changed before importing.

    it did not work because SA dont show design mode of the imported loginform into ExtJS project.

    I can understand that copy/paste re-useable code is the easy way out of long trouble. but unfortunately my team decided to live and die with SA. i cannot take advantage of copy paste. but at least i can use import export to feed my code to Sencha Architect (the most ugly monster)

    if this import export idea does not work (i hope it will) then i will have to use the same approach you suggested. lets try this import/export anyway. i hope this will be easy.

    can you take a look at exported loginform Touch code and suggest what to change first.

    Code:
    {
        "xdsVersion": "2.1.0",
        "frameworkVersion": "touch20",
        "internals": {
            "type": "formpanel",
            "reference": {
                "name": "items",
                "type": "array"
            },
            "codeClass": null,
            "userConfig": {
                "container|pack": "center",
                "designer|userClassName": "LoginForm",
                "designer|userAlias": "LoginForm",
                "designer|initialView": true,
                "border": "",
                "cls": [
                    "contentBGSquare"
                ],
                "height": null,
                "id": "loginFormID",
                "styleHtmlContent": true,
                "ui": "dark",
                "width": null,
                "layout": "vbox",
                "scrollable": [
                    "false"
                ]
            },
            "cn": [
                {
                    "type": "container",
                    "reference": {
                        "name": "items",
                        "type": "array"
                    },
                    "codeClass": null,
                    "userConfig": {
                        "designer|userClassName": "MyContainer139",
                        "border": 2,
                        "centered": true,
                        "cls": [
                            "loginBG"
                        ],
                        "height": 500,
                        "html": "<body background=\"images/bg.png\"></body>",
                        "padding": "",
                        "top": "",
                        "ui": "dark",
                        "width": 670
                    },
                    "cn": [
                        {
                            "type": "container",
                            "reference": {
                                "name": "items",
                                "type": "array"
                            },
                            "codeClass": null,
                            "userConfig": {
                                "designer|userClassName": "MyContainer27",
                                "bottom": "",
                                "cls": [
                                    "loginUpperStrip"
                                ],
                                "height": 125,
                                "top": 5,
                                "width": 666
                            }
                        },
                        {
                            "type": "container",
                            "reference": {
                                "name": "items",
                                "type": "array"
                            },
                            "codeClass": null,
                            "userConfig": {
                                "designer|userClassName": "MyContainer102",
                                "height": 45,
                                "left": "",
                                "right": 0,
                                "top": "15%",
                                "width": 450
                            },
                            "cn": [
                                {
                                    "type": "label",
                                    "reference": {
                                        "name": "items",
                                        "type": "array"
                                    },
                                    "codeClass": null,
                                    "userConfig": {
                                        "designer|userClassName": "MyLabel127",
                                        "cls": [
                                            "productName"
                                        ],
                                        "docked": null,
                                        "draggable": [
                                            "true"
                                        ],
                                        "height": "",
                                        "html": "FINANCE AND INSURANCE APPLICATION",
                                        "id": "",
                                        "left": "",
                                        "padding": "",
                                        "right": "",
                                        "styleHtmlContent": true,
                                        "top": "55%",
                                        "ui": "",
                                        "width": 450
                                    }
                                }
                            ]
                        },
                        {
                            "type": "container",
                            "reference": {
                                "name": "items",
                                "type": "array"
                            },
                            "codeClass": null,
                            "userConfig": {
                                "designer|userClassName": "MyContainer102",
                                "height": 45,
                                "left": 225,
                                "right": "",
                                "top": 118
                            },
                            "cn": [
                                {
                                    "type": "label",
                                    "reference": {
                                        "name": "items",
                                        "type": "array"
                                    },
                                    "codeClass": null,
                                    "userConfig": {
                                        "designer|userClassName": "MyLabel127",
                                        "cls": [
                                            "productVersion"
                                        ],
                                        "docked": "left",
                                        "height": 31,
                                        "html": "<b><font color=\"#FD803D\">Version  1.00.00 build 130104</font></b>",
                                        "styleHtmlContent": true,
                                        "width": 350
                                    }
                                }
                            ]
                        },
                        {
                            "type": "container",
                            "reference": {
                                "name": "items",
                                "type": "array"
                            },
                            "codeClass": null,
                            "userConfig": {
                                "designer|userClassName": "MyContainer102",
                                "height": 45,
                                "left": "",
                                "right": 10,
                                "top": 35
                            },
                            "cn": [
                                {
                                    "type": "label",
                                    "reference": {
                                        "name": "items",
                                        "type": "array"
                                    },
                                    "codeClass": null,
                                    "userConfig": {
                                        "designer|userClassName": "MyLabel127",
                                        "docked": "left",
                                        "height": "",
                                        "html": "<b><p align=\"center\"><font size=4 color=\"#FFFFFF\" text-align=\"center\">Login to Credit Objects Pty Ltd.</font></p></b>",
                                        "styleHtmlContent": true,
                                        "width": 400
                                    }
                                }
                            ]
                        },
                        {
                            "type": "container",
                            "reference": {
                                "name": "items",
                                "type": "array"
                            },
                            "codeClass": null,
                            "userConfig": {
                                "designer|userClassName": "MyContainer157",
                                "border": "none",
                                "height": "",
                                "left": "",
                                "right": 25,
                                "top": 200,
                                "width": 500
                            },
                            "cn": [
                                {
                                    "type": "textfield",
                                    "reference": {
                                        "name": "items",
                                        "type": "array"
                                    },
                                    "codeClass": null,
                                    "userConfig": {
                                        "designer|userClassName": "MyTextField15",
                                        "border": "",
                                        "cls": [
                                            "normalRoundCorner",
                                            "textBlack"
                                        ],
                                        "height": 60,
                                        "id": "userID",
                                        "itemId": "userID",
                                        "maxHeight": 60,
                                        "minHeight": 60,
                                        "padding": "",
                                        "style": "",
                                        "width": "100%",
                                        "label": "User Name:",
                                        "labelCls": "normalLabelText ",
                                        "labelWidth": "35%",
                                        "name": "loginName"
                                    }
                                },
                                {
                                    "type": "passwordfield",
                                    "reference": {
                                        "name": "items",
                                        "type": "array"
                                    },
                                    "codeClass": null,
                                    "userConfig": {
                                        "designer|userClassName": "MyPasswordField",
                                        "border": "",
                                        "bottom": "",
                                        "cls": [
                                            "normalRoundCorner",
                                            "textBlack"
                                        ],
                                        "height": 60,
                                        "id": "passwordField",
                                        "itemId": "mypasswordfield",
                                        "maxHeight": 60,
                                        "minHeight": 60,
                                        "padding": 5,
                                        "width": "100%",
                                        "label": "Password:",
                                        "labelCls": "normalLabelText ",
                                        "labelWidth": "35%",
                                        "name": "password"
                                    },
                                    "cn": [
                                        {
                                            "type": "basiceventbinding",
                                            "reference": {
                                                "name": "listeners",
                                                "type": "array"
                                            },
                                            "codeClass": null,
                                            "userConfig": {
                                                "designer|userClassName": "onMypasswordfieldKeyup",
                                                "fn": "onMypasswordfieldKeyup",
                                                "implHandler": [
                                                    "if (e.browserEvent.keyCode === 13) {\r",
                                                    "    this.fireEvent(\"GetLoginEvent\", this);  \r",
                                                    "    e.stopEvent();\r",
                                                    "    Ext.getCmp(\"passwordField\").fieldEl.dom.blur();\r",
                                                    "}"
                                                ],
                                                "name": "keyup"
                                            }
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "container",
                            "reference": {
                                "name": "items",
                                "type": "array"
                            },
                            "codeClass": null,
                            "userConfig": {
                                "designer|userClassName": "MyContainer102",
                                "height": 45,
                                "left": 160,
                                "right": "",
                                "top": 330
                            },
                            "cn": [
                                {
                                    "type": "label",
                                    "reference": {
                                        "name": "items",
                                        "type": "array"
                                    },
                                    "codeClass": null,
                                    "userConfig": {
                                        "designer|userClassName": "MyLabel127",
                                        "cls": [
                                            "productVersion"
                                        ],
                                        "docked": "left",
                                        "height": 31,
                                        "hidden": true,
                                        "html": "<b><font color=\"#FD803D\"> Invalid User Name or Password</font></b>",
                                        "id": "invalidUserNameID",
                                        "styleHtmlContent": true,
                                        "width": 400
                                    }
                                }
                            ]
                        },
                        {
                            "type": "container",
                            "reference": {
                                "name": "items",
                                "type": "array"
                            },
                            "codeClass": null,
                            "userConfig": {
                                "designer|userClassName": "MyContainer102",
                                "left": "",
                                "right": 25,
                                "top": 400
                            },
                            "cn": [
                                {
                                    "type": "button",
                                    "reference": {
                                        "name": "items",
                                        "type": "array"
                                    },
                                    "codeClass": null,
                                    "userConfig": {
                                        "action": "LoginAction",
                                        "designer|userClassName": "MyButton70",
                                        "cls": "",
                                        "docked": "left",
                                        "height": 56,
                                        "id": "loginButton",
                                        "left": null,
                                        "ui": "confirm",
                                        "width": 234,
                                        "text": "Login"
                                    },
                                    "customConfigs": [
                                        {
                                            "group": "(Custom Properties)",
                                            "name": "action",
                                            "type": "string"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "image",
                            "reference": {
                                "name": "items",
                                "type": "array"
                            },
                            "codeClass": null,
                            "userConfig": {
                                "designer|userClassName": "MyImage12",
                                "height": 66,
                                "left": 5,
                                "top": 45,
                                "width": 217,
                                "src": "images/LOGO-SMALL.png"
                            }
                        },
                        {
                            "type": "image",
                            "reference": {
                                "name": "items",
                                "type": "array"
                            },
                            "codeClass": null,
                            "userConfig": {
                                "designer|userClassName": "MyImage14",
                                "bottom": 40,
                                "height": 125,
                                "left": 0,
                                "top": 200,
                                "width": 125,
                                "src": "images/key.png"
                            }
                        },
                        {
                            "type": "image",
                            "reference": {
                                "name": "items",
                                "type": "array"
                            },
                            "codeClass": null,
                            "userConfig": {
                                "designer|userClassName": "MyImage14",
                                "bottom": "",
                                "height": 350,
                                "left": 20,
                                "top": 140,
                                "width": 265,
                                "src": "images/lock.png"
                            }
                        }
                    ]
                },
                {
                    "type": "basiceventbinding",
                    "reference": {
                        "name": "listeners",
                        "type": "array"
                    },
                    "codeClass": null,
                    "userConfig": {
                        "designer|userClassName": "onFormpanelShow",
                        "fn": "onFormpanelShow",
                        "implHandler": [
                            "//Ext.getCmp('userID').focus('', 10);"
                        ],
                        "name": "show"
                    }
                },
                {
                    "type": "basiceventbinding",
                    "reference": {
                        "name": "listeners",
                        "type": "array"
                    },
                    "codeClass": null,
                    "userConfig": {
                        "designer|userClassName": "onLoginFormIDPinch",
                        "fn": "onLoginFormIDPinch",
                        "designer|params": [
                            "e,t"
                        ],
                        "implHandler": [
                            "e.preventDefault();\r",
                            "Ext.Viewport.setPreventPanning(false);\r",
                            "Ext.Viewport.setPreventZooming(false);\r",
                            "\r",
                            "\r",
                            "if(MyApp.app.myScaleVal!==0)\r",
                            "{\r",
                            "\r",
                            "    this.scale =e.scale* MyApp.app.myScaleVal;\r",
                            "    MyApp.app.setMyScaleVal(this.scale);\r",
                            "\r",
                            "}\r",
                            "else\r",
                            "{\r",
                            "    this.scale = e.scale*this.startScale; \r",
                            "    MyApp.app.setMyScaleVal( this.startScale );\r",
                            "\r",
                            "}\r",
                            "\r",
                            "\r",
                            "\r",
                            "var p =Ext.get('loginFormID');\r",
                            "Ext.fly(p).setStyle('-webkit-transform', 'scale('+this.scale+')');\r",
                            ""
                        ],
                        "element": "innerElement",
                        "name": "pinch"
                    }
                },
                {
                    "type": "basiceventbinding",
                    "reference": {
                        "name": "listeners",
                        "type": "array"
                    },
                    "codeClass": null,
                    "userConfig": {
                        "designer|userClassName": "onLoginFormIDPinchstart",
                        "fn": "onLoginFormIDPinchstart",
                        "designer|params": [
                            "e,t"
                        ],
                        "implHandler": [
                            "this.startScale = e.scale;  \r",
                            "\r",
                            "\r",
                            ""
                        ],
                        "element": "innerElement",
                        "name": "pinchstart"
                    }
                },
                {
                    "type": "basiceventbinding",
                    "reference": {
                        "name": "listeners",
                        "type": "array"
                    },
                    "codeClass": null,
                    "userConfig": {
                        "designer|userClassName": "onLoginFormIDPinchend",
                        "fn": "onLoginFormIDPinchend",
                        "designer|params": [
                            "e,t"
                        ],
                        "implHandler": [
                            "e.preventDefault();\r",
                            "Ext.Viewport.setPreventPanning(false);\r",
                            "Ext.Viewport.setPreventZooming(false);\r",
                            "\r",
                            "        for(var i=0;i<1000;i++){\r",
                            "            if(MyApp.app.myScaleVal<1.0)\r",
                            "            {\r",
                            "        \r",
                            "                MyApp.app.setMyScaleVal(MyApp.app.myScaleVal+0.01);\r",
                            "        \r",
                            "                var p =Ext.get('loginFormID');\r",
                            "                Ext.fly(p).setStyle('-webkit-transform', 'scale('+MyApp.app.myScaleVal+')');\r",
                            "                \r",
                            "                \r",
                            "            }\r",
                            "        \r",
                            "           //this.recurs();\r",
                            "        }\r",
                            "\r",
                            "\r",
                            "\r",
                            "\r",
                            ""
                        ],
                        "element": "innerElement",
                        "name": "pinchend"
                    }
                },
                {
                    "type": "basicfunction",
                    "reference": {
                        "name": "items",
                        "type": "array"
                    },
                    "codeClass": null,
                    "userConfig": {
                        "designer|userClassName": "recurs",
                        "fn": "recurs",
                        "implHandler": [
                            "for(var i=0;i<50;i++){\r",
                            "recurs();\r",
                            "}"
                        ]
                    }
                }
            ]
        },
        "linkedNodes": {},
        "boundStores": {},
        "boundModels": {}
    }

  8. #8
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,506
    Vote Rating
    373
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Well, I don't use architect that much, however, I can move this thread to an Architect forum where you could possibly get help from Architect experts. Do you want me to move it?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  9. #9
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    28
    Vote Rating
    0
    ahsanzubair is on a distinguished road

      0  

    Default yes please move it.

    yes please move it.


    Architect team can explain better

    Thanks

  10. #10
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    28
    Vote Rating
    0
    ahsanzubair is on a distinguished road

      0  

    Default Good, look like sencha fired architect team.

    Good, look like sencha fired architect team.


    Where i am now? someone around say hi at least?

    can someone check the code in previous post that i exported from touch project and i want changes in the code before importing in ExtJs project.

    Hello

Thread Participants: 1