PDA

View Full Version : How to change hidden property?



pirusira
24 May 2010, 8:55 PM
Hello All,

I want to know how to change hidden property.
This is my code :


menuDevice.on('click', function(node){
if(node.isLeaf()){
nestedCenterCmp = Ext.getCmp('nestedCenter');
if(nestedCenterCmp.bbar.isVisible()){
nestedCenterCmp.bbar.hide();
}
else{
nestedCenterCmp.bbar.show();
}
}
});

This just changes show of the component or not.
It doesn't change hidden property.

I know how to get the hidden property.


nestedCenter.bbar.hidden

'nestedCenter' is a name of container which has a bbar.
How do I 'set' the property?

Thanks,
Stan

Eugen_
24 May 2010, 9:26 PM
Hello!

maybe you need this:



nestedCenterCmp.bbar.setVisible(!nestedCenterCmp.bbar.isVisible());

pirusira
24 May 2010, 9:38 PM
Thanks for your answer, but
It changes visibility property to hidden/visible(it is CSS property).
What I wanted to change is 'hidden' property in ExtJS code.
'hidden' that I wanted to change is :


deviceListBbar = new Ext.PagingToolbar({
hidden: false,
...

That hidden.

Eugen_
24 May 2010, 9:50 PM
?he hidden property is changed when you call the show or hide methods.



/**
* Show this component. Listen to the '{@link #beforeshow}' event and return
* <tt>false</tt> to cancel showing the component. Fires the '{@link #show}'
* event after showing the component.
* @return {Ext.Component} this
*/
show : function(){
if(this.fireEvent('beforeshow', this) !== false){
this.hidden = false;
if(this.autoRender){
this.render(Ext.isBoolean(this.autoRender) ? Ext.getBody() : this.autoRender);
}
if(this.rendered){
this.onShow();
}
this.fireEvent('show', this);
}
return this;
},

If you need to change hidden property without show or hide toolbar you can override this class.



Ext.override(Ext.Toolbar, {
setHidden: function(hidden) {
this.hidden = hidden;
}
});
but why?

pirusira
24 May 2010, 10:32 PM
I wanted to change hidden property like if the property is true then change it into false and if the property is false then change it into true.
When I set the bbar's hidden property to false, it worked well, but when I set the property to true, it shows nothing however I try to raise the event.
So I thought that it can not change hidden property.
Then, why doesn't it work when the property is set to true?

Following is the code when it worked well :
the bbar


deviceListBbar = new Ext.PagingToolbar({
hidden: false,
...

the container which has the bbar


var nestedCenter = {
...
bbar:deviceListBbar
}

the event handler


menuDevice.on('click', function(node){
if(node.isLeaf()){
nestedCenterCmp = Ext.getCmp('nestedCenter');
if(nestedCenterCmp.bbar.isVisible()){
nestedCenterCmp.bbar.hide();
}
else{
nestedCenterCmp.bbar.show();
}
}
});

In this code, if I run the app and click the menuDevice then it hide the bbar and if I click it again, then it shows the bbar.
But if I set the value true like this


deviceListBbar = new Ext.PagingToolbar({
hidden: true,
...

It shows me nothing and however I click the menuDevice, it doesn't show the bbar.
I think it's very simple problem to solve but I don't know it. I feel tight :(

skincareultra
24 May 2010, 10:37 PM
There are more resources available on web

chose a perfect keyword and make searches in google

Eugen_
24 May 2010, 10:39 PM
if (nestedCenterCmp.bbar.hidden) {

pirusira
24 May 2010, 10:49 PM
I solved!


menuDevice.on('click', function(node){
if(node.isLeaf()){
if(deviceListBbar.isVisible()){
deviceListBbar.hide();
}
else{
deviceListBbar.show();
}
}
});


Thanks!!