1. #1
    Sencha User
    Join Date
    Dec 2008
    Posts
    17
    Vote Rating
    0
    dgubber is on a distinguished road

      0  

    Default namespace, classes & viewport

    namespace, classes & viewport


    In my attempt to better organize my code, I'm attempting to convert what I had to a model where I define a namespace, and in the public definitions, create a series of classes, then once defined, use them in a new viewport creation. I used the "border layout" example as the premise to my code.

    index.html is as follows

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <Title>Server Manager</Title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" type="text/css" href="/js/ext-2.2/resources/css/ext-all.css">
      <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
      <script type="text/javascript" src="/js/ext-2.2/adapter/ext/ext-base.js"></script>
      <script type="text/javascript" src="/js/ext-2.2/ext-all.js"></script>
      <script type="text/javascript" src="js/layout.js"></script>
     
    </head>
    <body>
        <div style="display:none;">
     
            <!-- Start page content -->
            <div id="start-div">
                <div style="float:left;"><img src="img/layout-icon.gif" /></div>
                <div style="margin-left:100px; font-size:11px;">
                    <h2>Welcome!</h2>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;There are many sample layouts to choose from that should
        give you a good head start in building your own application layout.  Just like the combination
        examples, you can mix and match most layouts as needed, so don't be afraid to experiment!</p>
                    <p>Select a layout from the tree to the left to begin.</p>
                </div>
            </div>
         </div>
    </body>
    </html>
    layout.js follows:

    Code:
    /**
      * Application Layout
      */
     
    // reference local blank image
    Ext.BLANK_IMAGE_URL = '/js/ext-2.2/resources/images/default/s.gif';
     
    // create namespace
    Ext.namespace('appRunner');
     
    // create application
    appRunner.app = function() {
        // do NOT access DOM from here; elements don't exist yet
        // private variables
        appRunner.start = Ext.extend(Ext.Panel, {
            id:     'pg-start',
            layout:    'fit',
            bodyStyle:   'padding:25px',
            contentEl:   'start-div'
        });
        Ext.reg('start', appRunner.start);
        // The treeSOA entitiy definition is a collapsable panel inserted
        // into the pnlNavigator Panel
     //
     // Line 859 of ext-all was modified for cleaner looking header borders
        appRunner.treeSOA = Ext.extend(Ext.tree.TreePanel, {
            title:    'View by SOA',
            id:     'tree-SOA',
            region:    'center',
            split:    true,
            autoScroll:   true,
            iconCls:   'nav',
            bodyStyle:   'background:#ffffff; border: 0px;',
            /* top, right, bottom, left */
            margins:   '-1 -1 -1 -1',
            // tree-specific configs:
            rootVisible:  false,
            lines:    false,
            singleExpand:  true,
            useArrows:   true,
            loader: new Ext.tree.TreeLoader({
                dataUrl:  'get-dns.php'
            }),
            listeners: {'click' : function(n) { treeClick(this, n); }},
            root: new Ext.tree.AsyncTreeNode()
        });
        Ext.reg('treesoa', appRunner.treeSOA);
        // Tree Listing - Networks View
        // The treeNET entitiy definition is a collapsable panel inserted
        // into the pnlNavigator Panel
     //
     // Line 859 of ext-all was modified for cleaner looking header borders
        appRunner.treeNET = Ext.extend(Ext.tree.TreePanel, {
            title:    'View by Network',
            id:     'tree-NET',
            region:    'center',
            split:    true,
            autoScroll:   true,
            iconCls:   'nav',
            bodyStyle:   'background:#ffffff; border: 0px;',
            /* top, right, bottom, left */
            margins:   '-1 -1 -1 -1',
            // tree-specific configs:
            rootVisible:  false,
            lines:    false,
            singleExpand:  true,
            useArrows:   true,
            loader: new Ext.tree.TreeLoader({
                dataUrl:  'get-nets.php'
            }),
            listeners: {'click' : function(n) { treeClick(this, n); }},
            root: new Ext.tree.AsyncTreeNode()
        });
        Ext.reg('treenet', appRunner.treeNET);
        appRunner.pnlHeader = Ext.extend(Ext.Panel, {
            title:    'Window',
            id:     'pnl-header',
            region:    'north',
            border:    true,
            split:    false,
            height:    40,
            collapsible:  false,
            header:    false,
            /* top, right, bottom, left */
            margins:   '2 2 20 2',
            html:    '<div id="header"><h1>Server Manager</h1></div>'
        });
        Ext.reg('pnlHeader', appRunner.pnlHeader);
        appRunner.pnlNavigation = Ext.extend(Ext.Panel, {
            title:    'Navigation',
            id:     'pnl-navigation',
            region:    'west',
            split:    true,
            width:    200,
            minSize:   200,
            maxSize:   200,
            collapsible:  true,
            /* top, right, bottom, left */
            margins:   '0 -2 0 2',
            layout:    'accordion',
            layoutConfig: {
                titleCollapse: true,
                animate:  true,
                activeOnTop: true
            }
        });
        Ext.reg('pnlNavigation', appRunner.pnlNavigation);
        appRunner.pnlContent = Ext.extend(Ext.Panel, {
            title:    'Welcome Page',
            id:     'pnl-content',
            region:    'center',
            layout:    'card',
            /* top, right, bottom, left */
            margins:   '0 -2 0 0',
            activeItem:   0,
            border:    true,
            contentEl:   'start-div'
        });
        Ext.reg('pnlContent', appRunner.pnlContent);
        appRunner.pnlActions = Ext.extend(Ext.Panel, {
            title:    'Actions',
            id:     'pnl-actions',
            region:    'east',
            split:    true,
            width:    200,
            minSize:   200,
            maxSize:   200,
            collapsible:  true,
            /* top, right, bottom, left */
            margins:   '0 -2 0 2',
            layout:    'accordion',
            layoutConfig: {
                titleCollapse: true,
                animate:  true,
                activeOnTop: true
            }
        });
        Ext.reg('pnlActions', appRunner.pnlActions);
        appRunner.pnlStatus = Ext.extend(Ext.Panel, {
            title:    'Status',
            id:     'pnl-status',
            region:    'south',
            border:    false,
            split:    true,
            height:    100,
            minSize:   100,
            maxSize:   100,
            collapsible:  true,
            /* top, right, bottom, left */
            margins:   '-2 3 3 3',
            html:    '<p class="details-info">When you select a entry from the tree,<br />&nbsp;&nbsp;additional details will display here.</p>'
        });
        Ext.reg('pnlStatus', appRunner.pnlStatus);
     
        // public space
      return {
        // public properties, e.g. strings to translate
        // public methods
        init: function() {
            var ldStart = 1;
            Ext.MessageBox.show({
              title: 'Polling Database',
              msg:  'Initializing ...',
              width: 400,
              progress: true,
              closable: false
            });
            var preload = function(v) {
                return function() {
                  switch(v) {
                    case 1:
                        // Finally, build the main layout once all the pieces are ready.  This is also a good
                        // example of putting together a full-screen BorderLayout within a Viewport.
                        new Ext.Viewport({
                            title:    'Layout Browser',
                            layout:    'border',
                            items: [
                                {xtype:'pnlHeader'},
                                {xtype:'pnlNavigation'},
                                {xtype:'pnlContent'},
                                {xtype:'pnlActions'},
                                {xtype:'pnlStatus'}
                            ]
    //                        renderTo: Ext.getBody()
                        });
                        load_info = 'Loading Session Data ...';
                        Ext.MessageBox.updateProgress(v/100, v+'%', load_info);
                        break;
                    case 30:
                        load_info = 'Loading SOA Data ...';
                        Ext.MessageBox.updateProgress(v/100, v+'%', load_info);
                        break;
                    case 60:
                        load_info = 'Loading IP Data ...';
                        Ext.MessageBox.updateProgress(v/100, v+'%', load_info);
                        break;
                    case 100:
                        Ext.MessageBox.hide();
                        break;
                    case 101:
    //                    alert(appRunner.treeSOA);
                        break;
                    default:
                        Ext.MessageBox.updateProgress(v/100, v+'%', load_info);
                        break;
                  };
                };
      };
      for(var i = 1; i <= 101; i++) {
              setTimeout(preload(i), i*10);
      }
        }
      };
    }();
    // end of app
    Ext.onReady(appRunner.app.init, appRunner.app);
    Problems I'm encountering are as follows:

    1: "margin" settings in the class definitions are NOT activating on the viewable page.
    2: The collapsable west, east and south regions are working strangely ( you'd have to see it )
    3: If I attempt to add the "treesoa" or "treenet" classes to the "pnlNavigation" class with an item entry like

    Code:
    items: [ {xtype:'treesoa'} ]
    I receive an "Object does not support this poperty or method" error.

    A few question also,
    Is the viewport being created properly and in the right scope for application use?
    When using the loader entries for "TreeLoader", at what time does the load actually occurr, during the variable or class declaration, or after the page load is complete?

    Any help would be greatly appreciated.

    Dan

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Suggestions:

    Do not use IE to develop on. That error you reported is pretty much useless. Try it in firebug, the errors are more helpful.

    That blob of code is, frankly, a mess. Suggest you read tutorials in wiki on extending and application layout, etc. You're violating one commonly respected rule, do not extend to configure. This is why your regions are behaving weird.

    Rather than post such a large heap of code I suggest working with one widget. Then post that code. Get your code layout sorted, then add all the rest of the widgets.

    You're trying to use a closure to do your app. Suggest you implement what you've done using classes (kind of like you've done...without wrapping in a closure that doesn't appear to have any obvious benefit).

  3. #3
    Sencha User TopKatz's Avatar
    Join Date
    Mar 2007
    Posts
    337
    Vote Rating
    2
    TopKatz is on a distinguished road

      0  

    Default


    Ill take a stab at the region problems even though I can't 'see' the problem.

    Your setting the region in your class extension. You cant do this(well, you can, it just does not work right when collapsed). You need to instantiate a instance of your new class, and pass it the region config. So define your clas, but exclude the region config. Then when you instantiate your new instance:

    Code:
    myWestPanel = new yourPanelClass({region:'west'});
    That should clear up the anomaly your seeing when the panel collapses.

    Katz

  4. #4
    Sencha User
    Join Date
    Dec 2008
    Posts
    17
    Vote Rating
    0
    dgubber is on a distinguished road

      0  

    Default


    mj...

    2 things - I am using both IE and firebug to get the best out of the troubleshooting I can. Also, this is a preliminary pass - using as many online examples as I can find.

    In those examples, most of them indicate the initial creations of an application based development process w/ the use of a namespsace and the difference between public and private scope, but make no detailed mention of how to then create the viewport within the scope of the namespace.

    top....

    Thank you - I was unaware that there were items that could not be defined inside the class declaration ( again, in the examples, it never mentions that ). With that in mind,
    I changed the viewport creation section to read as you suggested and the panel collapse is still no acting correctly. I'm wondering if the problem might be where and how I am attempting to create the viewport.

  5. #5
    Sencha User
    Join Date
    Dec 2008
    Posts
    17
    Vote Rating
    0
    dgubber is on a distinguished road

      0  

    Default don't extend to configure

    don't extend to configure


    ok - in "unraveling" some of this, I did find out that the reason the collapses weren't working correctly is because of the item that mj indicated was "do not extend to configure".

    Just so it's clear also ( hence the question about at what point does the TreeLoader occur ), I'm trying to achieve a model where the data loads are done during and initialization sequence, prior to allowing interaction, while offering a inidcation data load is in progress.

    Dan

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Yes, there's a problem if you don't understand the implications of extending. There are some configurations that need careful handling or they won't get applied correctly. You've stumbled upon just one of them, the collapsible regions. So the safe thing to do, is "not to extend to configure".

    I'm trying to achieve a model where the data loads are done during and initialization sequence, prior to allowing interaction, while offering a inidcation data load is in progress.
    I don't get exactly what you're saying here so haven't commented. I'd say that part is secondary, I'd get the rest of your structure situated first and then enhance it with optimizing your load, etc....you've got bigger fish to fry then worry about that at the moment.

    So again, I'd post again with simplified code. Just get a viewport with a center region working with the code structure you desire.

    I don't see anything in your code that requires worrying about public/private so much. You might end up using a singleton for some of your classes, but I'd worry about that later as well (easy tweak later).

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Quote Originally Posted by dgubber View Post
    I receive an "Object does not support this poperty or method" error.
    And how you get the "best out of both worlds" with error reporting like that I don't know. But the only thing that error told me was that you're using IE, not anything helpful to discern what was wrong. So, there's no use in relaying that error on the forums too much. A firebug error, on the other hand, would be useful (posting the stack trace is helpful as well sometimes).

  8. #8
    Sencha User
    Join Date
    Dec 2008
    Posts
    17
    Vote Rating
    0
    dgubber is on a distinguished road

      0  

    Default


    MJ,

    The issue between IE and Firebug I completely understand, problem was that firebug was not generating an error as such.

    As for what I was trying to indicate, I have a farely large set of meta data that I would like to load prior to any operations being allowed on the page. What I was seeing in a previous attempt was the page would load, and there would be a delay after the fact while the tree loaders did there work and populated the tree info. As in many cases, mine is being loaded by php code, w/ mysql selects.

    Once I moved to ( and got working by modifying all the class extensions back to variable declarations ) the namespace/application model, it appears to load all in ~1/5 the time, and it's a noticeable difference.

    The last piece I need to understand is how to access the namespace to issue a few <panel>.add commands to add items to the navigation panel, so that when a tree event occurs, it populates the center frame w/ appropriate data.

    Regards,
    Dan

  9. #9
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    I think I'm doing something similar as I don't wait for onReady to issue ajax requests to get data needed.

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar