How to run the event load on click?

Question

I'm trying to deal with a transfer of data to the server.

My problem:

Ext.onReady(function(){

Ext.define('Person', {
        extend: 'Ext.data.Model',
        idProperty: 'PersonID',
        fields: [{
            name: 'PersonID',
            type: 'int'
        }, .......],
        proxy: {
                   type: 'ajax',
                   api: {
                            read: '1.php?id=90',
                            create: 'create.php',
                            update: 'upd.php',
                            destroy: 'delete.php'
                       }
            }
    });
    Person.load(1, {
        //callback который будет выполнен когда запрос пройдет....
           callback: function(p, operation){

               //p -это текущий объект
alert(p.get('Name')) 

console.log(p.get('PersonID'));   //1 
console.log(p.get('Salary'))    //300 

//document.getElementsByTagName('p')[0].innerHTML='<input type="button" value="click" onclick="function(){p.load()}">'
//Uncaught ReferenceError: p is not defined ?
//Uncaught SyntaxError: Unexpected token ( 

            }
          });

person=new Person;

The above code works. How do you run the event load() on a button click? I hope you can help me out Thanks.

Answer 1

You mean button clicked -> load Person

HTML

<div id="btn">Button</div>

Javascript

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name'],
    proxy: {
        type: 'ajax',
        api: {
            read: '/someurl'
        },
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success',
            totalProperty: 'total'
        }
    }
});

Ext.onReady(function(){
    document.getElementById('btn').addEventListener('click', function(){
        Person.load(1);
    })
});