cancel
Showing results for 
Search instead for 
Did you mean: 

Extending TextField code is not working.

former_member197578
Participant
0 Kudos

Hello Experts,

Can you please check what is wrong with the following code:

sap.ui.commons.TextField.extend("FocusButton", {

  metadata: {

  events: {

  "mouseenter" : {}  // this Button has also a "hover" event, in addition to "press" of the normal Button

  }

  },

  // the hover event handler:

  onmouseenter : function(evt) {   // is called when the Button is hovered - no event registration required

  this.firemouseenter();

  },

  renderer: {

  } // add nothing, just inherit the ButtonRenderer as is;

  // In this case (since the renderer is not changed) you could also specify this explicitly with:  renderer:"sap.ui.commons.ButtonRenderer"

  // (means you reuse the ButtonRenderer instead of creating a new view

  });

  return new sap.m.Page({

  title: "Title",

  content: [

            new FocusButton("myBtn",{

      text:"Enter Me",

      hover: function(evt)

      {

      alert("Button" + evt.getSource().getId() + "was entered.");

      }

     }),

   

  ]

  });

Thank you,

Best Regards,

Chetna

Accepted Solutions (1)

Accepted Solutions (1)

former_member182862
Active Contributor
0 Kudos

Hi Chetna

Will this help?

http://jsbin.com/hevowi/2/edit

Cheers

-D

former_member197578
Participant
0 Kudos

Can you add some other event then hover, for example mouse enter. Actually i want some code to execute only when mouseenter event occurs for textbox. Is that possible?

Thank you for responding,

your code is very helpful,

Regards,

Chetna

PMarti
Active Participant
0 Kudos

Hi Chetna, in my first reply I show you the example for onmouseenter event,

Regards,

Pau

former_member197578
Participant
0 Kudos

Yes you are right, sorry i meant enterKey event.

The following code is not working.

var txtfld = new sap.ui.commons.TextField("txtfield1",{});

  $('txtfield1').bind("enterKey",function(e){

   alert("hey");

  });

  $('txtfield1').keyup(function(e){

     if(e.keyCode == 13)

     {

         $(this).trigger("enterKey");

     }

  });

  txtfld.placeAt('content');

  }

Thank you,

Regards,

Chetna

seVladimirs
Active Contributor
0 Kudos

here we go:

JS Bin - Collaborative JavaScript Debugging

Message was edited by: Vladimirs Semikins

PMarti
Active Participant
0 Kudos

Chetna, I show you that in one of my replies,

former_member197578
Participant
0 Kudos

Hie ,

Yes it was very helpful.

Thank you so much.

Best Regards,

Chetna

former_member197578
Participant
0 Kudos

Hie,

How do i use it in my code.

I tried following:

Iside create content i am putting your code to define this new control:

  createContent : function(oController) {

           

      jQuery(function(){ 

  

      sap.ui.commons.TextField.extend("CustomTextField", {

        metadata: { 

          events: { 

            "onEnter" : {}  //new event definition hover 

          } 

        }, 

        renderer: {}   

      }); 

      // Override a base event for fire my custom event

      CustomTextField.prototype.onsapenter = function(oEvent){

        var oCustomTextField = this;

        // Call base method

        sap.ui.commons.TextField.prototype.onsapenter.apply(this,arguments);

        // fire my event!

        oCustomTextField.fireOnEnter();

      };

//       var oTextField = new CustomTextField({

//         onEnter: function(oEvent){

//           alert('enter pressed!');

//         }

//       });

    

    });

Now can i use it directly as follows:

              newDvrTable.addColumn(new sap.ui.table.Column({

                     label: new sap.ui.commons.Label({text: " Dealer Code", wrapping : true}),

                    template: new CustomTextField({

                           id:"dlrNum",

                            value: "{DealerNo}" ,

                           maxLength: 10,

})

When i tried it gave me error saying:

"CustomTextField" not defined.

How to use it in my code??

Best Regards,

Chetna

Answers (1)

Answers (1)

PMarti
Active Participant
0 Kudos

Hi Chetna, I show you how to extend a TextField and define a custom event in this example

Link: JS Bin - Example

If you need catch event onmouseevent, check this example: JS Bin - onMouseEnter

(Last example not work in JSBin but you can check it in your application)

Regards,

Pau

former_member197578
Participant
0 Kudos

Hie pau,

Thank you so much for giving me direction, the code is really helpful in understanding the concept of "Extending control".

So just like this can i extend textfield control for mouseenter event too? I want event to trigger whenever i press enter.

Thank you so much for responding.

Best Regards,

Chetna

PMarti
Active Participant
0 Kudos

HI chetna, in this example I define a custom event for catch enter key: JS Bin - Example

Regards,

Pau