Results 1 to 3 of 3

Thread: Disable a button from within a Javascript function

  1. #1
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    597

    Question Disable a button from within a Javascript function

    Hi,
    I read the threads about disabling a button, but it seems not to work in my scenario.

    Can you help me?

    Everything works, except the disabling of the button.
    Here is my setup:

    PHP Code:
    Ext.ns('app');
    Ext.regApplication({
        
    name'dropMe',
        
    launch: function() {
            
            
    dropMe.updateButton = [{
                    
    ui'normal',
                    
    xtype'button',
                    
    text'UPDATE',
                    
    disabledfalse,
                    
    draggablefalse,
                    
    handler:function ()
                          {
    app.myApp.reset_button();} //the function call works
            
    }];
            var 
    update_button =
            {
                
    dock'bottom',
                
    height90,
                
    items: [dropMe.updateButton]
            };
            var 
    rootPanel = new Ext.Panel({
                
    fullscreentrue,
                
    layout"card",
                
    items: [update_button]
            });
            
    app.myApp = new running();
            
    app.myApp.running(); //works
        
    }
    });

    function 
    running() {
        
    this.running() = function(){//this works great}

        
    this.reset_button = function(){
            
    /**
             *  Reset Stuff is working
             */
            
    dropMe.updateButton.setDisabled(true);   //THIS does not work
            
    dropMe.updateButton.setDraggable(true); //THIS does not work
        
    }

    Why does
    PHP Code:
    dropMe.updateButton.setDisabled(true); 
    not work?

  2. #2
    Sencha User
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    1,395

    Default

    Hi Kurt001,
    May I suggest you to organize better your code? .
    I post you a simple example I wrote taking you code base idea.
    Take a look at this.

    Code:
    //Application registration
    Ext.regApplication({
        name: 'dropMe',
        launch: function() {
    
    //Definition of the handler function
            var resetButton = function(){
                var button = rootPanel.getDockedComponent('pnlDocked').getComponent('btnUpdate');
                button.setDisabled(true);
                button.setDraggable(true);
            };
    
            //Definition of the Root Panel
            var rootPanel = new Ext.Panel({
                fullscreen: true,
                layout: "card",
                dockedItems: [{
                    //Definition of the bottom docked Panel
                    xtype: 'panel',
                    itemId: 'pnlDocked',
                    dock: 'bottom',
                    height: 90,
                    items: [{
                        //Definition of the Update button
                        xtype: 'button',
                        itemId: 'btnUpdate',
                        ui: 'normal',                
                        text: 'UPDATE',
                        disabled: false,
                        draggable: false,
                        handler: resetButton
                    }]
                }]
            });
        }
    });
    You will see that after you will tap on the "Update" button, it qill be disabled and you will be able to drag it.
    However, I always suggest to create custom panels extending them from base Ext.Panel and place them inside a "view" directory placed inside the "app" root folder. For this reason, it's always better to not define custom components structure within Ext.Application registration.

    Hope this Helps.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    597

    Default Nice code

    Hi andreacammarata,

    I will try to reorganise my code using the app/views structure.
    But to be honest, I do not understand how to organize this. I tried watching some tutorials, but it seems its always above my ability to understand.

    So from what you write, is it true, that I cannot disable the button from a different namespace?

    Best TD

Posting Permissions

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