How to open Ext.Panel onClick of a link

Google+ Pinterest LinkedIn Tumblr +

Below script will lets you to open Ext.Panel (that is Panel) onClick of an anchor link. Its really a simple snippet and this will help developers those who are new to Ext JS. Mostly I will be posting these types of snippets as it helps people in learning some new and small tricks on how we can use respective method or event accordingly.

Before looking at the below code just download the respective Ext JS 2.2 SDK on your desktop and just download the below tutorial and save it to this location: ExtJS2.2\examples\panel this is because I have not changed the respective relative paths.

Live Preview | Download

HTML Code:
Below is the code were you need to place it in the …Tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.x-panel-body p {
margin:10px;
}
#container {
padding:10px;
}

JavaScript Code:
JavaScript Code should be placed below this line

1

1
2
3
4
5
6
7
8
9
10
11
12
13

Ext.onReady
(
function
(
)
{

var
mypanel =
new
Ext.Panel
(
{

title:
‘My Panel’
,

collapsible:
true
,

width:
500
,

html:
Ext.example
.bogusMarkup

}
)
;
var
myButton =
Ext.get
(
‘myHrefIdClick’
)
;
myButton.on
(
‘click’
,
function
(
)
{

//render the panel to id -> ‘container’

mypanel.render
(
‘container’
)
;
}
)
;
}
)
; //onReady Close

Below code should be placed in …tag:

1
2
3
4
5

onClick of a link opens up a Panel

Click Here

If you would like to view the preview, you can click the below link:
Live Preview | Download

Share.

About Author

Leave A Reply