Open an extjs Windows on click on a html link

[iNes14]

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

[tvanzoelen]

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
}
}).show();
}

[iNes14]

It doesn't work... Firebug told me that openwindow is not defined.

[tvanzoelen]

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

[iNes14]

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(){
alert('ok');
};
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>' +
'</div>';


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',
layoutConfig:{
animate: true
},
items: [{
html: content,
//title:'Navigation',
autoScroll: true,
border: false,
iconCls: 'nav'
}]
},
{....

[tvanzoelen]

Its not in scope, you have put it in the initConfig.

Then first your definition should be something like




this.openwindow = function(){
alert('ok');
};


And the call



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

[redraid]

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});

me.callParent(arguments);
},

aClick: function () {
alert('click');
}