PDA

View Full Version : Disable a button from within a Javascript function



Kurt001
5 Jun 2011, 4:17 AM
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:



Ext.ns('app');
Ext.regApplication({
name: 'dropMe',
launch: function() {

dropMe.updateButton = [{
ui: 'normal',
xtype: 'button',
text: 'UPDATE',
disabled: false,
draggable: false,
handler:function ()
{app.myApp.reset_button();} //the function call works
}];
var update_button =
{
dock: 'bottom',
height: 90,
items: [dropMe.updateButton]
};
var rootPanel = new Ext.Panel({
fullscreen: true,
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

dropMe.updateButton.setDisabled(true); not work?

AndreaCammarata
5 Jun 2011, 8:31 AM
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.



//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.

Kurt001
5 Jun 2011, 9:14 AM
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