1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Metz, France
    Posts
    60
    Vote Rating
    2
    iNes14 is on a distinguished road

      0  

    Default Unanswered: Open an extjs Windows on click on a html link

    Unanswered: Open an extjs Windows on click on a html link


    Hello everybody,

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

    Code:
    '<a class="test" id="test" href="#" onClick="alert("ok");">
    Can someone tell me how I have to do with extjs 4 ?

    Thank you

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Maybe sonething like below

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

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Metz, France
    Posts
    60
    Vote Rating
    2
    iNes14 is on a distinguished road

      0  

    Default


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

  4. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    I made a typing mistake

    Code:
    '<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

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Location
    Metz, France
    Posts
    60
    Vote Rating
    2
    iNes14 is on a distinguished road

      0  

    Post


    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 :

    Code:
    ...
    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'
                        }]
                    },
                    {....

  6. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


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

    Then first your definition should be something like

    Code:
     this.openwindow = function(){
            alert('ok');
        };
    And the call

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

  7. #7
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Answers
    44
    Vote Rating
    42
    redraid has a spectacular aura about redraid has a spectacular aura about redraid has a spectacular aura about

      2  

    Default


    PHP Code:
        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, {singletrue});

            
    me.callParent(arguments);
        },

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

Thread Participants: 2