PDA

View Full Version : Set Enable Toolbar Butoon on Grid Afteredit



reang
8 May 2007, 6:31 AM
Hi All...

Can help me..?
I have a Toolbar Button "Update" on EditorGrid, and I set this Button to disabled.
How to enabled this Button on event Grid Afteredit?

Best Regards.

tryanDLS
8 May 2007, 8:24 AM
Toolbar doesn't implement a public method to find a button. You'll have to save a ref to the button when you create, then enable in your afteredit handler.

jsakalos
8 May 2007, 8:32 AM
Save reference to that button and in afteredit call btn.enable().

reang
8 May 2007, 9:48 AM
i have code like this:
...
paging.add({id:'update', text:'update', disabled:true});
...

grid.on('afteredit',function(){
//how get button update to enabled in here
})

jsakalos
8 May 2007, 10:02 AM
myBtn = paging.addButton(...);
...

grid.on('afteredit',function(){
myBtn.enable()
})

reang
8 May 2007, 5:45 PM
Thank's for the code, it works just great!

sj137
14 May 2007, 2:29 AM
Hi I have a similar problem to Reang, except i'm creating the button in a dialog box...

function showDialogBox(){
if(!dialog){ // lazy initialize the dialog and only create it once

dialog = new Ext.BasicDialog("hello-dlg", { ... });
...
mySubmitBtn = dialog.addButton('Submit', dialog.hide);
mySubmitBtn.disable();
...
}
dialog.show(showBtn.dom);
};

But when i call mySubmitBtn.enable(); from another function... firebug tells me that "mySubmitBtn has no properties"...

i think this is a problem about scope but i'm not sure, can anyone help?

best regards,

SJ

sj137
14 May 2007, 3:17 AM
I found a solution that suits my purposes: ...just define the function inside the dialog function (see code below) ...and set the scope variable as the name of the BasicDialog object, which in my case is 'dialog'...

[if anyone can answer the previous question it would still be much appreciated, many thanks!]

[PS what a fantastic library!!]

function showDialogBox(){
if(!dialog){ // lazy initialize the dialog and only create it once

dialog = new Ext.BasicDialog("hello-dlg", { ... });
...

dialog.addButton('Test', function(){
...
mySubmitBtn.enable();
...
}, dialog);


mySubmitBtn = dialog.addButton('Submit', dialog.hide, dialog);
mySubmitBtn.disable();
...
}
dialog.show(showBtn.dom);
};

jsakalos
14 May 2007, 3:24 AM
The following will work. As this question deals with basics of javascript I'd recommend to watch all videos found on this page http://www.crockford.com/javascript/


var mySubmitBtn, dialog;

function showDialogBox(){
if(!dialog){ // lazy initialize the dialog and only create it once

var dialog = new Ext.BasicDialog("hello-dlg", { ... });
...
mySubmitBtn = dialog.addButton('Submit', dialog.hide);
mySubmitBtn.disable();
...
}
dialog.show(showBtn.dom);
};

sj137
14 May 2007, 4:43 AM
Thanks Jsakalos,

i'm sorry I don't think i was clear about the problem I was having...

After the code you've posted I want to call: "mySubmitBtn.enable();"

eg:
var mySubmitBtn, dialog;

function showDialogBox(){
if(!dialog){ // lazy initialize the dialog and only create it once

var dialog = new Ext.BasicDialog("hello-dlg", { ... });
...
mySubmitBtn = dialog.addButton('Submit', dialog.hide);
mySubmitBtn.disable();
...
}
dialog.show(showBtn.dom);
};

mySubmitBtn.enable();

Actually I want to call if from another function altogether...
eg:


var mySubmitBtn, dialog;

function showDialogBox(){
if(!dialog){ // lazy initialize the dialog and only create it once

var dialog = new Ext.BasicDialog("hello-dlg", { ... });
...
dialog.addButton('Test', TestFunction);
mySubmitBtn = dialog.addButton('Submit', dialog.hide);
mySubmitBtn.disable();
...
}
dialog.show(showBtn.dom);
};

function TestFunction(){
mySubmitBtn.enable();
}


but this doesn't work... firebug says mySubmitBtn has no properties...

Thanks for the link to the Javascript tutorials, they look like a great resource.

PS how did you enter the code with formatting...?

Best regards, SJ

jsakalos
14 May 2007, 4:48 AM
Would you please edit your previus post and enclose the code in php tags? I almost cannot read it as it is now.

sj137
15 May 2007, 4:19 AM
sorry I didn't see see your post had gone to the 2nd page!

I have discovered some interesting things...

here's my original code again: (which doesn't work)



var dialog, showBtn, mySubmitBtn;

showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', showDialog2);

function showDialog2(){
if(!dialog){ // lazy initialize the dialog and only create it once
var dialog = new Ext.BasicDialog("hello-dlg", {
autoTabs:true,
width:530,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Test', showTestResults, dialog);
mySubmitBtn = dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Cancel', dialog.hide, dialog);
}
dialog.show(showBtn.dom);
};

function showTestResults(){
mySubmitBtn.enable();
}



firebug says: mySubmitBtn has no properties

however if i change the line:
mySubmitBtn = dialog.addButton('Submit', dialog.hide, dialog).disable();

to:
mySubmitBtn = dialog.addButton('Submit', dialog.hide, dialog);
mySubmitBtn.disable();

...then it works! ...but there is some strange behaviour when i close the dialog box and then reopen it... eg: three more buttons appear just below the first three but just off the screen, and resizing resizes the shadow but not the dialogbox, also the tabpanel (in the dialog box) is pushed further down with each successive opening etc.,

I found that moving the dialog code out of the showDialog2 function and removing the if(!dialog){} the problem was resolved:



var dialog, showBtn, mySubmitBtn;

showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', showDialog2);

var dialog = new Ext.BasicDialog("hello-dlg", {
autoTabs:true,
width:530,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Test', showTestResults, dialog);
mySubmitBtn = dialog.addButton('Submit', dialog.hide, dialog);
mySubmitBtn.disable();
dialog.addButton('Cancel', dialog.hide, dialog);


function showDialog2(){
dialog.show(showBtn.dom);
};

function showTestResults(){
mySubmitBtn.enable();
}




now everything seems to work ok...

(i think this is a bug becuase i've been working from the examples... but i'm not sure...
but a few work-arounds are not really an issue for the free use of such an excellent looking library:)

tryanDLS
15 May 2007, 5:04 AM
mySubmitBtn = dialog.addButton('Submit', dialog.hide, dialog).disable();


Does not work b/c disable doesn't return anything. You can only chain function calls that return a value that makes sense in the context of what you're assigning.

sj137
15 May 2007, 5:57 AM
Thanks tryanDLS, jsakalos, ...silly me, i get it now...

...i'm curious about the other problem too still, it seems that even though (!dialog) should return false, it still goes into the loop... and creates new buttons etc...