Results 1 to 5 of 5

Thread: Unable to call a function from a window's toolbar

  1. #1

    Default Unable to call a function from a window's toolbar

    Hi all,

    I've written the code below, but for some odd reason I just can't get it to call TASC.app.user_application_new - the function that's defined at the top. I have the alert in there just to know if the function ever gets called, and it never does, and there are no errors according to Firebug.

    The layout is like this: There's a border viewport with a a center section only. that section has a toolbar with a button which calls TASC.app.user_applications. That function creates a modal window with a toolbar and a single button. That button is the one that isn't working...for some reason I cannot fathom.

    Can anyone help? I've stripped down the code to bare-bones so you can see it in action.

    Code:
    Ext.BLANK_IMAGE_URL = '/includes/ExtJS-2.0/resources/images/default/s.gif';
    Ext.namespace( 'TASC', 'TASC.app' );
    TASC.app.user_application_new = function() {
        alert('I was called!');
    }
    TASC.app.user_applications = function() {
        var win = new Ext.Window({
            id:'user_apps_window',
            modal:true,
            constrain:true,
            title:'My Window',
            autoHeight:true,
            width:430,
            items:[{
                html: 'something'
            }],
            tbar:[{
                id:'button_user_apps_new',
                text: 'New',
                iconCls: 'fam_key_add',
                handler: TASC.app.user_application_new
            }],
            buttons:[{
                id: 'user_apps_close',
                text: 'Close',
                handler: function() {
                    win.close();
                }
            }]
        });
        win.show();
    }
    TASC.app = function() {
        var contentCenter = {
            id: 'contentCenter',
            region: 'center',
            layout: 'fit',
            title: 'My Application',
            items: new Ext.TabPanel({
                border: false,
                activeTab: 0,
                tabPosition: 'top',
                items: [{
                    title: 'My Tab',
                    items: [{
                        html:'test'
                    }],
                    tbar:[{
                        text: 'Open Window',
                        handler: TASC.app.user_applications
                    }]
                }]
            })
        };
        return {
            init: function() {
                var viewport = new Ext.Viewport({
                    id: 'tasc_viewport',
                    layout: 'border',
                    frame: false,
                    renderTo: 'content',
                    items: [
                        contentCenter
                    ]
                });
            }
        };
    }();
    Ext.onReady( TASC.app.init , TASC.app );

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    from my observation, using the 'module' pattern is overwriting TASC.app entirely. It can be demonstrated in the following code:

    PHP Code:

    Ext
    .namespace( 'TASC''TASC.app' );
    TASC.app.user_application_new = function() {
        
    alert('I was called!');
    }
    TASC.app.user_applications = function() {
        var 
    win = new Ext.Window({
            
    id:'user_apps_window',
            
    modal:true,
            
    constrain:true,
            
    title:'My Window',
            
    autoHeight:true,
            
    width:430,
            
    items:[{
                
    html'something'
            
    }],
            
    tbar:[{
                
    id:'button_user_apps_new',
                
    text'New',
                
    iconCls'fam_key_add',
                
    handlerTASC.app.user_application_new
            
    }],
            
    buttons:[{
                
    id'user_apps_close',
                
    text'Close',
                
    handler: function() {
                    
    win.close();
                }
            }]
        });
        
    win.show();
    }
    TASC.app = function() {
        var 
    contentCenter = {
            
    id'contentCenter',
            
    region'center',
            
    layout'fit',
            
    title'My Application',
            
    items: new Ext.TabPanel({
                
    borderfalse,
                
    activeTab0,
                
    tabPosition'top',
                
    items: [{
                    
    title'My Tab',
                    
    items: [{
                        
    html:'test'
                    
    }],
                    
    tbar:[{
                        
    text'Run TASC.app.user_applications',
                        
    handlerTASC.app.user_applications
                    
    },
                    {
                        
    text'run TASC.app.user_application_new',
                        
    handlerTASC.app.user_application_new
                    
    }]
                }]
            })
        };
        return {
            
    init: function() {
                var 
    viewport = new Ext.Viewport({
                    
    idExt.getBody(),
                    
    layout'border',
                    
    framefalse,
                    
    renderTo'content',
                    
    items: [
                        
    contentCenter
                    
    ]
                });
            }
        };
    }();
    Ext.onReadyTASC.app.init TASC.app ); 

  3. #3

    Default

    I'm honestly not sure what that means. Is there a better way I should be writing my applications then? I've been trying to follow best-practices examples that I've found to bring something of a set of standards to the way I code Ext...but I've obviously done something wrong.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    To further explain this, we must discuss the () at the end of the function definition. Essentially that's calling on the function that was just defined to execute immediately. The code in the 'Some stuff' area will execute but does not return anything. the 'return' section, however will return methods and properties that can be used. Anything that that function is going to return gets assigned to the TASC.app reference


    PHP Code:
    TASC.app = function() {
        
    //Some local stuff....
        
    return {
            
    init: function() {
              
    // this gets returned as an method.
            
    }
        };
    }(); 
    I think of it like this (and call me crazy, but this is how i see it):

    The following assignment , TASC.app is a function that is 'armed'(built) but not 'fired' (executed). Like a Missle, once you build it, and put it on the jet, you 'arm it'.
    PHP Code:
    TASC.app = function() {
        
    //Some local stuff....
        
    return {
            
    init: function() {
              
    // this gets returned as an method.
            
    }
        };
    }; 

    When you type TASC.app(), you are executing(firing) the 'armed' code and any 'return' will go into space (no reference).

    However, if you enter var myRef = TASC.app(), the code executes and any return (init object from your code) will be returned and referenced to 'myRef'.

    I hope this does not confuse you

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    If you want, i can explain it over the phone. (PM me).

Posting Permissions

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