View Full Version : Open an extjs Windows on click on a html link

28 Nov 2011, 12:31 AM
Hello everybody,

I want to open a extjs Window when I clicked on a link <a>. I have my html code like this :

'<a class="test" id="test" href="#" onClick="alert("ok");">

Can someone tell me how I have to do with extjs 4 ?

Thank you

28 Nov 2011, 1:49 AM
Maybe sonething like below

'<a class="test" id="test" href="#" onClick="javascript:openWindow(this.id);">

function openWindow(id){
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: { // Let's put an empty grid in just to illustrate fit layout
xtype: 'grid',
border: false,
columns: [{header: 'World'}], // One header just for show. There's no data,
store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store

28 Nov 2011, 2:53 AM
It doesn't work... Firebug told me that openwindow is not defined.

28 Nov 2011, 2:56 AM
I made a typing mistake

'<a class="test" id="test" href="#" onClick="javascript:openWindow(this.id);">

check if the cases are right, I wrote openwindow instead of openWindow

and the function must be in scope ofcourse

28 Nov 2011, 3:08 AM
It's not that, I have already correct.

I think extjs can't find my function, I put it in the scope but it doesn't work. I paste the code , it's a portal :

initComponent: function(){

function openwindow(){
var content =
'<div class="portlet-content">'+
'<section id="article18" class="crayon article-css-18 demoTime">'+
'<ul>' +
'<li>' +
'<a class="menuLien" href=""></a>' +
'<div>' +
'<h5>Title</h5>' +
'<p>' +
'<a class="test" id="test" href="#" onClick="openwindow();"></a>'+
'</li>' +
'</ul>' +
'</section>' +

Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
items: [{
xtype: 'container',
region: 'center',
layout: 'border',
items: [{
id: 'app-options',
region: 'west',
animCollapse: false,
width: 1600,
split: true,
collapsible: false,
layout: 'fit',
animate: true
items: [{
html: content,
autoScroll: true,
border: false,
iconCls: 'nav'

28 Nov 2011, 3:13 AM
Its not in scope, you have put it in the initConfig.

Then first your definition should be something like

this.openwindow = function(){

And the call

<a class="test" id="test" href="#" onClick="Ext.get('componentid').openwindow();"></a>

28 Nov 2011, 5:08 AM
initComponent: function() {
var me = this;

me.items = [
{html: '<a id="test" href="#">Click Me</a>'}

me.on('afterrender', function () {
var aEl = Ext.get('test');
if (aEl) { aEl.on('click', me.aClick); }

}, me, {single: true});


aClick: function () {