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