1

I am unable to fire itemclick event on a cellclick in ext.js [4.1..1a GPL]. My app.js goes like :

Ext.application({
    name: 'HelloExt',
    launch: function() {
 var k =  Ext.create('Ext.panel.Panel', {
        title: 'Tic Tac Toe',
        width: 300,
        height: 300,
    layout: {
            type: 'table',
            // The total column count must be specified here
            columns: 3
        },
        defaults: {
            // applied to each contained panel
            bodyStyle:'padding:20px'
        }
    ,
        items: [{
            html: '',
        },{
            html: '',
        },{
            html: ''
        },{
            html: ''
        },
    {
            html: ''
        },
    {
            html: ''
        },
    {
            html: ''
        },
    {
            html: ''
        },
    {
            html: ''
        },
        ],
        renderTo: Ext.getBody(),
    listeners :
    {
        itemclick: function(dv, record, item, index, e) {
           alert(record);
       }
    }
   });
}
});

Anyone please help.

Thanks

1 Answer 1

0

This listener does not exist for a panel. You will need at least a view. The example below catches the click event for each of your 'fields'.

Ext.application({
    name: 'HelloExt',
    launch: function() {
 var k =  Ext.create('Ext.panel.Panel', {
        title: 'Tic Tac Toe',
        width: 300,
        height: 300,
    layout: {
            type: 'table',
            // The total column count must be specified here
            columns: 3
        },
        defaults: {
            // applied to each contained panel
            bodyStyle:'padding:20px',
            listeners: {
                afterRender: function(p) {
                    p.body.on('click', function() { alert(p.id) });
                }
            }
        }
    ,
        items: [{
            html: ''
        },{
            html: '',
        },{
            html: ''
        },{
            html: ''
        },
    {
            html: ''
        },
    {
            html: ''
        },
    {
            html: ''
        },
    {
            html: ''
        },
    {
            html: ''
        },
        ],
        renderTo: Ext.getBody()
   });
}
});
2
  • however SRA what remains here is how do I get the text which is placed inside each panel , e.g. how do I get value which is inside html: ''
    – Satya
    Nov 20, 2012 at 11:58
  • @Satya html is sort of static property and get deleted after the component has been rendered. So You will have to work on the dom to receive the value but can use update to set a new. Just change the event callback body to p.body.on('click', function() { p.update('B'); alert(p.getTargetEl().dom.innerHTML); }); This will update and fetch the new value value.
    – sra
    Nov 20, 2012 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.