CODEWITHSUNDEEP
extjssencha-touchonkeypress
almakki
almakki

Reputation: 197

OnKeyPress event on itemtpl in sencha touch

I am new to sencha.The onkeypress event of a text box not seems to be firing when it used in itemtpl.This is my code:

 itemTpl: new Ext.XTemplate('<tpl><table width="100%"><tr><td width="10%"><div class="Drop_Down" id="pat_dropId"><input  type="text" onkeypress="{[this.myFunction()]}" </div></td></tr></table><tpl>',
 {
   myFunction: function(itemKey)
{
console.log('myFunction');
 }
}

The console logs 'myFunction' when the list is loading.When a key is pressed the key press event is not firing.My expectation to trigger my function on pressing the key from keyboard.Please help..I have been looking for a solution long time.

Upvotes: 1

Views: 1202

Answers (3)

almakki
almakki

Reputation: 197

itemTpl: new Ext.XTemplate('<tpl><table width="100%"><tr><td width="10%"><div class="Drop_Down"><input  style="color:green;display:block;width:50px;text-align:center;" type="text" pattern="\d*" id="{ItemKey}" onkeyup="myapp.app.getController(\'myappController\').TextboxKeyUp(this)" onfocus="myapp.app.getController(\'myappController\').TextFocus(this)" ></div></td></tr></table><tpl>',

Upvotes: 0

kevhender
kevhender

Reputation: 4405

Lorenz is right, this does not refer to the itemTpl when the text field is modified. Change the handler to call a global function, perhaps something in a controller:

onkeypress="MyApp.app.getController(\'MyController\').myFunction()"

MyController.js:

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',
    //other config here

    myFunction: function() {
         //do something here
    }
});

Update (based on your comments elsewhere):

To pass arguments, just use the normal notation for a store value in an XTemplate. Also make sure to surround the argument with quotes, if it is not a number/boolean:

itemTpl: new Ext.XTemplate(
    '<tpl><table width="100%"><tr>',
        '<td width="10%">',
            '<div class="Drop_Down" id="pat_dropId">',
                '<input  type="text" onkeypress="MyApp.app.getController(\'MyController\').myFunction(\'{myStoreValue}\')">',
            '</div>',
        '</td>',
    '</tr></table><tpl>'
)

Upvotes: 2

Rathore
Rathore

Reputation: 1988

change your Ext.XTemplate code like that:

itemTpl: new Ext.XTemplate("<tpl><table width='100%'><tr><td width='10%'><div             class='Drop_Down' id='pat_dropId'>
<input  type='text' onkeypress='myFunction(this)'</div> </td></tr></table><tpl>")

that Function define in index.html:

<script type="text/javascript">
    function myFunction(that){
        //your code 
    }
</script>

Upvotes: 0

Related Questions