Results 1 to 5 of 5

Thread: Which Application design sould I choose?

  1. #1
    Ext User
    Join Date
    Jul 2009
    Location
    Tehran
    Posts
    6

    Default Which Application design sould I choose?

    Hello Guys,

    First of all, I should say I'm very well familiar with using Ext as basic as :
    Code:
    Ext.onReady({
         // Do something here
    });
    and have started to playing around with OO designing with Ext as :
    Code:
    var myPanel = Ext.extend(Ext.Panel, {
         initComponent:function() {
              // Do something here
         }
    });
    Now, for an Application which I'm faced with, I've modified Ext Desktop sample a little bit to meet my criteria. The application has almost 120 different forms (Ext.Window). The first approach came to my mind is:
    Code:
    Ext.onReady({
         ...
         var win = new Ext.Window({
              autoLoad: {
                   url: 'http://localhost:8080/myapp/foo/bar/page?ln=en_US, 
                   scripts: true, 
                   scope: this
              }, 
              ...
         })
         ...
    });
    which the foo/bar/page is something like this:
    Code:
    <%@ page contentType="text/html; charset=utf-8" language="java" import="java.util.*"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ page import="javax.naming.Context"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
    <%@ taglib prefix="i18n" uri="i18nDictionary"%>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <script type="text/javascript">
              var modulePanel = new Ext.Panel({
                   frame: true, 
                   layout: 'border', 
                   renderTo: 'modulePanel', 
                   ...
    
                   items: [{
                        ...
                   }] 
              });
         </script>
         <script type="text/javascript">
              Ext.Erpc.JSONLanguage = '${ui.i18n}';
              Ext.Erpc.JSONLanguage = Ext.Erpc.JSONLanguage.replace(/APOSTCHAR/g, "\'");
         </script>
    </head>
    
    <body>
         <div id="modulePanel"></div>
    </body>
    </html>
    I should say that, the application is multi-lingual, and on every request we generate the Language Items for the corresponding page.

    But there's another approach available too:
    Code:
    Ext.onReady({
         ...
         var module = new Ext.Erpc.Foo.Bar();
         var win = new Ext.Window({
              items: {
                   xtype: 'foobar'
              }, 
              ...
         })
         ...
    });
    where for each page
    Code:
    Ext.namespace('Ext.Erpc.Foo.Bar');
    
    Ext.Erpc.Foo.Bar = Ext.extend(Ext.Panel, {
         initComponent:function() {
              // Do something here
         }
         ...
    });
    Ext.reg('foobar', Ext.Erpc.Foo.Bar);
    Now, the question is which one should I stick with? Or even none?
    Which one suits better for use if we intend to have and Air version too?

    Regards,
    Khosrow

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Go for the pure JSON version.

    I strongly deprecate the old autoLoad functionality which uses regexps to pull scripts out of HTML, and then throws innerHTML into a Panel.

    You need to be loading pure JSON through Ajax, and then adding that to a Container. The JSON could contain an xtype to set its created type, but also (as long as you don't use strict JSON) it could contain embedded methods to perform that component's functionality.

  3. #3
    Ext User
    Join Date
    Jul 2009
    Location
    Tehran
    Posts
    6

    Default

    Hello Animal,
    Thank you for your comment.

    I've done some working and here it is:

    Code:
         ...
         createWindow: function(config) {
              ...
              if ( !win ) {
                   this.scriptLoader('http://localhost:8080/myapp/script/' + config.url);
                   win = desktop.createWindow({
                        ...
                        items: {
                             xtype: config.xtype
                        },
                        ...
                   });
              }
         }, 
    
         scriptLoader: function(url) {
              var id = url;
    
              if ( !document.getElementById(id) ) {
                   var content = ; // Getting Javascript content through AJAX
    
                   var head = document.getElementsByTagName("head")[0];
                   var script = document.createElement("script");
    
                   script.text = content;
    
                   script.setAttribute("type", "text/javascript");
                   script.setAttribute("id", id);
                   head.appendChild(script);
              }
    
              return true;
         }
    Is this what you meant?
    Am I on the right track?

    Regards,
    Khosrow

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Well, you could load script through a script tag. I'd just do it through Ajax and use eval()

  5. #5
    Ext User
    Join Date
    Jul 2009
    Location
    Tehran
    Posts
    6

    Default

    Quote Originally Posted by Animal View Post
    Well, you could load script through a script tag. I'd just do it through Ajax and use eval()
    Yes, I've tried Ajax-loading at first, but what about using it inside Ext.Air Application? As far as I've googled about it I can not use eval() within Air.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •