PDA

View Full Version : Hide Panel on Button-click



gijukud6
1 May 2012, 4:25 AM
Hi,
I am new to ExtJS and need a little help.
The UI consists of two panels, which are almost equal. They both have one combobox and one button, but the second panel ('searchpan2') is hidden. I now want to add a handler to the button of the first panel ('searchpan1'). On click, it shall unhide resp. hide the second panel.
Thank you!

<html>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<head>
<title>Search</title>

<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-4.0/ext-all.js"></script>
<script type="text/javascript">


Ext.application({
name: 'Search',
launch: function() {

var states = Ext.create('Ext.data.Store', {
fields: ['name'],
data : [
{"name":"ID"},
{"name":"Name"}
]
});

Ext.create('Ext.panel.Panel', {
itemId: 'searchpan1',
bodyPadding: 5,
width: 300,
height: 70,
hidden: false,
title: 'Search',
layout: {
type: 'hbox',
padding: 5
},
items: [{
xtype: 'combobox',
fieldLabel: 'Choose',
store: states,
queryMode: 'local',
displayField: 'name',
},{
xtype: 'button',
text: '+',
handler: function(){

}
}],
renderTo: Ext.getBody()
});

Ext.create('Ext.panel.Panel', {
itemId: 'searchpan2',
bodyPadding: 5,
width: 300,
height: 70,
hidden: false,
title: 'Search',
layout: {
type: 'hbox',
padding: 5
},
items: [{
xtype: 'combobox',
fieldLabel: 'Choose',
store: states,
queryMode: 'local',
displayField: 'name',
},{
xtype: 'button',
text: '+',
handler: function(){

}
}],
renderTo: Ext.getBody()
});

}
});

</script>
</head>
<body></body>
</html>

vietits
1 May 2012, 5:03 AM
Ext.create('Ext.panel.Panel', {
itemId: 'searchpan1',
bodyPadding: 5,
width: 300,
height: 70,
hidden: false,
title: 'Search',
layout: {
type: 'hbox',
padding: 5
},
items: [{
xtype: 'combobox',
fieldLabel: 'Choose',
store: states,
queryMode: 'local',
displayField: 'name',
},{
xtype: 'button',
text: '+',
handler: function(){
var panel1 = Ext.ComponentQuery.query('#searchpan1')[0];
var panel2 = Ext.ComponentQuery.query('#searchpan2')[0];
panel1.hide();
panel2.show();
}
}],
renderTo: Ext.getBody()
});

Ext.create('Ext.panel.Panel', {
itemId: 'searchpan2',
bodyPadding: 5,
width: 300,
height: 70,
hidden: false,
title: 'Search',
layout: {
type: 'hbox',
padding: 5
},
items: [{
xtype: 'combobox',
fieldLabel: 'Choose',
store: states,
queryMode: 'local',
displayField: 'name',
},{
xtype: 'button',
text: '+',
handler: function(){
var panel1 = Ext.ComponentQuery.query('#searchpan1')[0];
var panel2 = Ext.ComponentQuery.query('#searchpan2')[0];
panel1.show();
panel2.hide();
}
}],
renderTo: Ext.getBody()
});

gijukud6
1 May 2012, 5:47 AM
Thank you vietits.

The problem I still have with comboboxes is, that the dropdown arrow is not displayed (as seen in the attachment).
I'm using ExtJS 4.0 and the newest version of Firefox.

vietits
1 May 2012, 3:21 PM
The code works well for me on Chrome 18 with both Ext 4.0.7 and Ext 4.1.0.

evant
1 May 2012, 4:05 PM
FYI there's no reason to use .query() if you're doing a global ID search, just use Ext.getCmp() instead.

vietits
1 May 2012, 5:16 PM
I thought Ext.getCmp() is used to get component basing on its id not itemId. The document also said that "This is shorthand reference to Ext.ComponentManager.get. Looks up an existing Component by id". I also tried to use Ext.getCmp('#searchpan1') instead of Ext.ComponentQuery.query('#searchpan1')[0] but it is not successful.

debabrata
1 May 2012, 8:59 PM
try Ext.getCmp('searchpan1') without '#'.:)

evant
1 May 2012, 9:20 PM
Ah, so it is, I misread it. Assigning an itemId in that case is sort of redundant, since the components are being created in the global app launch.

vietits
1 May 2012, 10:36 PM
try Ext.getCmp('searchpan1') without '#'.:)
No, Ext.getCmp('searchpan1') is also return null because 'searchpan1' is component itemId, not id.

gijukud6
2 May 2012, 12:51 AM
getCmp() doesn't work for me either.
With newest versions of ExtJS and Firefox there is still no arrow on the comboBox.. any ideas? :-?

vietits
2 May 2012, 1:30 AM
@gijukud6,

I have tested this code on FF 11, Ext 4.1.0 and it still works well, the arrow appears at the right of combobox. Do you encounter the same problem when running examples/form/combos.html?

gijukud6
2 May 2012, 2:22 AM
Sorry, I must have made a mistake earlier, it works with ExtJS 4.1 now.
The problem only appears with ExtJS 4.0.

nagalla038
26 Sep 2012, 8:22 PM
This works for me:)