1. #1
    Ext User
    Join Date
    Dec 2007
    Posts
    7
    Vote Rating
    0
    Letus is on a distinguished road

      0  

    Question need some TEXTAREA events

    need some TEXTAREA events


    im using phpBB site, where there is post page with textarea, which in "normal" html has following look

    <textarea id="somename" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">

    id like to replicate this textarea using EXT, I have the form up and working, with the part of formpanel look like this :

    var top = new Ext.FormPanel({
    id:'formularpanel',
    labelAlign: 'top',
    bodyStyle:'padding:5px 5px 0',
    width: 480,
    items: [{
    xtype:'textarea',
    id:'prispevek',
    fieldLabel:'Text',
    anchor:'90% 80%'
    }],
    ...

    How do I attach the onclick, onkeyup and onselect events to it ? as it seems to me, from the documentation, not all of these events are avaiable on the textarea from EXT, but when I inspected the code, it does create a normal textarea at the end, so i should be able to make those events work, I just dont know how.

    I tried the "listeners", "xxxx.on", but none of my tries did work Can you please help me, how to attach those three event listeners to textarea ?

    thank you

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,170
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Try binding to the el directly:

    Code:
    myTextArea.getEl().on('normalDomEvent', ...);

  3. #3
    Ext User
    Join Date
    Dec 2007
    Posts
    7
    Vote Rating
    0
    Letus is on a distinguished road

      0  

    Default


    for some reason I cant make it work I tried

    Code:
    Ext.getCmp('prispevek').getEl().on('keyup', alert('b'));
    (tried also some variations like .getCmp('prispevek').on( ... etc.)


    to place before or behind

    Code:
        if(!win){
            win = new Ext.Window({
                id:'formwindow',
                title: 'New post',
                layout:'fit',
                width:500,
                height:400,
                closeAction:'close',
                plain: true,
                tbar:tb,
                items: [top] 
            });
        }
        win.show(this);
    but the only result was, that the message has been fired immediatly once the window has been opened, no matter what event i tried it to bind

  4. #4
    Ext User
    Join Date
    Dec 2007
    Posts
    7
    Vote Rating
    0
    Letus is on a distinguished road

      0  

    Default


    ok, i made a mistake somewhere, this is the correct syntax ...

    Code:
        Ext.getCmp('prispevek').getEl().on('change', function(e) { alert('b'); });
        Ext.getCmp('prispevek').getEl().on('keyup', function(e) { alert('c'); });
        Ext.getCmp('prispevek').getEl().on('click', function(e) { alert('a'); });
    this has to be AFTER the win.show() command so the items are rendered already ...

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Or use the render event, e.g.

    Code:
    {
      id: 'prispevek',
      xtype: 'textarea',
      ...
      listeners: {
        render: function(c) {
          c.el.on({
            change: function(e) {
              alert('change');
            },
            keyup: function(e) {
              alert('keyup');
            },
            click: function(e) {
              alert('click');
            },
            scope: c
          });
        }
      }
    }

Thread Participants: 2