1. #1
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256
    Vote Rating
    1
    brookd is on a distinguished road

      0  

    Default Converting a Classic web-app to ext

    Converting a Classic web-app to ext


    I have a classic web app, (ie. html pages) that I want to convert to an ext app. I am having trouble getting started, and it looks a little daunting

    I use coldfusion on the backend and alot of functionality is encompassed in CFC's so I think I will be able to access data via ajax calls to the CFC. So, getting data into the ext app should not be a problem. Although, I am trying to figure out how to deal with session variable data between the server and client. Does it make sense to have a sessionManager class that handles keeping session data in sync between the client and server?

    Next, I am struggling with the idea of redesigning every single interface screen. My thought is I may be able to:

    a) Use iframes for some sections that have not been fully upgraded to use ext. So, I could open an ext window and load a basic form/html page into that window via an iframe and with a little CSS magic make it look seamless. I am thinking this would allow me to upgrade t he applications key components to be written completely in ext while doing a 'quick fix' for some of the supplemental pages/windows of the application. Are there any major downsides of using multiple windows with iframes?

    b) I was also thinking that I could make an ajax request to the server and have it return an HTML segment based on the server side rendering, and then display that in a window. This would require fairly minimal rewrites for basic pages to be displayed within ext. When I go this route, how can I load 1) Embedded JS and 2) externally linked js files that need to work with the loaded content?

    c) Related to the above, how do you dynamically load .js files into ext and is that best practice? Lets say I have an application and it opens a ext window that needs an external js file. How can I load the js on demand when the window is opened and allow it to interact with the window?

    d) Can I generate ext js on the server side, return it via ajax and eval() it? What is the best way to do this?

    Sorry for all the questions, I am really trying to wrap my head around if I can convert this web app without losing all my hair in the process

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    When you say dynamically loading HTML, that kind of goes against the grain of the Ext 2.0 paradigm.

    There is hardly any HTML in an Ext page, it is all generated by Ext widgets like GridPanels, FormPanels, DataViews and TreePanels. What people find themselves doing by thinking down that web 1.0 line is loading into a Panel object, HTML which is nothing but

    Code:
    <script>
    // create loads of Ext widgets using script...
    ...
    ...
    </script>
    In other words creating an empty panel object simply as a means of executing some javascript!

    If you mean loading generated javascript in the same way that, say JSP pages generate HTML according to some logic, then yes, I'd say that's a reasonable approach. Have script to create a FormPanel generated, and add the results to a Container.

    If you want to load static script files, I'd say there's no point. Have the script in your page as a function, and call it.

    For an example of having a script from the server generate something which will be added to an Ext Container, see http://extjs.com/forum/showthread.php?t=16671

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256
    Vote Rating
    1
    brookd is on a distinguished road

      0  

    Default Dynamic Scripts

    Dynamic Scripts


    Thank you for your reply. I have two questions:

    I looked at the 2.0 desktop app and it looks like it defines each module and creates them right at the start. If you have a big app with many windows, would you want to create each panel/window grid like this on init or load them as they are needed?

    And also my question about loading .js files dynamically was so that, for example, the user opens a window that lets say handles data display, is there a way to load a class or script that handles rendering and actions within that window 'as needed'? Or do you need to load all of the .js when the application initializes. I am just thinking in terms of keeping the filesize down on the initial load. Is this possible? Advised?

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Load static script at the beginning.

    Examine what you are really loading if you do Ajax loads.

    If it turns out, as I see so often, that it's as I posted above, a chunk of static script, and no HTML then that 's just part of the app, and it should be in a function.

    You only need to create the Ext objects (Windows, Panels etc) as needed

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2007
    Location
    Iloilo, Philippines
    Posts
    149
    Vote Rating
    1
    willydee is on a distinguished road

      0  

    Default


    Hello Animal,

    I think there are some cases for post-loading Ext components
    Kind regards,
    WillyDee

    Problems worthy of attack, prove their worth by hitting back.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, I'm thinking that generated scripts can be treated the same way as generated HTML.

    The old paradigm was to have a JSP page (using J2EE as the example technology) which was parameter driven, to generate the markup which became static on the browser page.

    What I see things movnig to, now that Ext has opened this up, is a page author still declaratively specifying what a form is to look like and how it is to behave. Perhaps with a tag system like JSP.

    Except that the output will be Content-Type: text/javascript, and it will simply be an Ext expression representing the generated Form/Grid/whatever.

    So, you might request '/search.php?key=bar', and what would return would be not HTML, but

    Code:
    {
        xtype: 'grid',
        store: new Ext.data.Store({...
        }),
        proxy: new Ext.data.HttpProxy({...
        listeners: {
            render: {
                fn: function(g) {
                    g.getSelectionModel().selectFirstRow();
                },
                delay: 50 // Allow browser to catch up.
            }
        }
    }
    The requester just does

    Code:
        Ext.Ajax.request({
            url: '/search.php',
            params: {
                key: 'bar'
            },
            success: function(response) {
                myContainer.add(eval(response));
                myContainer.doLayout();
            }
        });

  7. #7
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256
    Vote Rating
    1
    brookd is on a distinguished road

      0  

    Default


    I really like this idea of being able to return the ext markup so that it can then be rendered on the client side. The reason I like this, is because I am stronger on the server side than in javascript and this allows me to do a lot of the conditional processing and logic on the server and return what is nessacary.

    My question then is what design pattern does this fit into? How can you design an app / document an app, based on this strategy of dynamically loading code which lays out the view. And I guess the code that is loaded would also control the view, right?

  8. #8
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Smile


    @brookd - You've raised a good point. Having script generated from 2 or more sources often means documentation-in-separation and makes source control/debugging more complex.

    But ultimately, your (or your clients') tolerance for that 'initial library(s) load' will likely dictate your approach.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.