PDA

View Full Version : Show modal popup using toggle button on toolbar



Jokie
1 Oct 2010, 9:58 AM
hello guys,

I am trying to show a modal popup window when a button on a tool bar is toggled on and hide it when off

The following code is generated every time so cannot edit it



Ext.onReady(function() {
Ext.QuickTips.init();
var cmp1 = new TbarTest({
renderTo: Ext.getBody()
});
cmp1.show();
var cmp2 = new dlgSearch({
renderTo: Ext.getBody()
});
cmp2.show();
});


Tried this



TbarMap = Ext.extend(TbarMapUi, {
initComponent: function() {
TbarMap.superclass.initComponent.call(this);
this.btnSearch.on('toggle',this.onBtnSearchClick,this);
},
onBtnSearchClick: function(obj,pressed)
{

if (pressed) {
//show popup
//cmp2.show();//fails
} else {
//hide popup
}
}
});


any tips appreciated

jarrednicholls
1 Oct 2010, 10:19 AM
Hey Jokie,

The xds_index.js file is not meant to be taken verbatim in your project. That file and its xds_index.html counterpart are just there for "quick preview" ability within any particular browser. So you can/should copy out whatever code you want from those two files and put them in separate files in your actual project.

The "cmp2" variable is local to the function passed to onReady() and is not publicly accessible. You can get any component publicly by first assigning it an "id" and then using the Ext.getCmp(id); method. You can, if you'd like, call Ext.getCmp('dlgSearch').hide(); at the top of your TbarMap.initComponent function to initially hide your window without having to copy out the xds_index.* files.

Is your search dialog meant to be hidden/shown and maintain its "state"? If so, you should set the "closeAction" configuration to "hide" instead of the default of "close" so that the window isn't destroyed when a user clicks the X button.

Hope that helps. Let me know if you get it working.

Jokie
1 Oct 2010, 11:49 AM
Hey Jokie,

The xds_index.js file is not meant to be taken verbatim in your project. That file and its xds_index.html counterpart are just there for "quick preview" ability within any particular browser. So you can/should copy out whatever code you want from those two files and put them in separate files in your actual project.

The "cmp2" variable is local to the function passed to onReady() and is not publicly accessible. You can get any component publicly by first assigning it an "id" and then using the Ext.getCmp(id); method. You can, if you'd like, call Ext.getCmp('dlgSearch').hide(); at the top of your TbarMap.initComponent function to initially hide your window without having to copy out the xds_index.* files.

Is your search dialog meant to be hidden/shown and maintain its "state"? If so, you should set the "closeAction" configuration to "hide" instead of the default of "close" so that the window isn't destroyed when a user clicks the X button.

Hope that helps. Let me know if you get it working.

Thanks Jarred

The
Ext.getCmp() worked.

I actualy have the "closable" as false and the x not shown I have a close button on the window to hide/show.

The confusion I had with the index files is because even after setting the options "hidden" and "initHidden" the code generated still had the
.show(); which made me wonder if I was doing something wrong on that part.