Extjs 4.1 - Listerning in CellEditing plugin not working at second time

Question

i define a treeGrid with plugin CellEditing like

Ext.define('MyExample', {
        extend: 'Ext.tree.Panel',   
        id: 'example',
        alias: 'example',
        ....
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1,
                listeners: {
                    beforeedit: function(plugin, edit){
                        alert('don't run second time');
                    }
                }
            })
        ],
        ...

And i have a button when i click this button will call below window (this window has treeGrid above)

Ext.create('Ext.window.Window', {
title: 'Phân xử lý',
modal:true,
height: 500
width: 500
layout: 'border',
...
item[
 {
  title: 'example',
  region: 'center',
  xtype: 'example', // that here
  layout: 'fit'
 }
]

Everything working at first time but when i close the window at first time and click button to call window again then CellEditting still working but listeners not working ?
How to fix that thanks

EDIT
Please see my example code in http://jsfiddle.net/E6Uss/
In first time when i click button. Everything working well like enter image description here

But when i close Example window and open it again I try click to blocked cell again i get a bug like enter image description here

How to fix this bug? thanks

@MMT i try init initComponent: function () {} but error is (TypeError: a is undefined ext-all.js line 21) ? — DeLe, Jul 24 '13 at 07:39
@MMT Can u fix my code? i try to add initComponent but i think initComponent not exsit ? — DeLe, Jul 24 '13 at 16:05

score 6 · Accepted Answer · answered Jul 24 '13 at 19:11

The problem here is that you are using Ext.create inside the plugins array for the tree grid. This have the effect of creating it once and attaching the result adhoc to your defined class.

If you close the window, all the resources within the window are destroyed. The second time you instantiate the tree panel, the plugin is not there. Take a look at this fiddle : I see what your issue is. Take a look at http://jsfiddle.net/jdflores/E6Uss/1/

     {
        ptype : 'cellediting',
        clicksToEdit: 1,
        listeners: {
            beforeedit: function(plugin, edit){
                console.log('EDITOR');
                if (edit.record.get('block')) {
                    alert('this cell have been blocked');
                    return false;
                }
            }
        }
    }

Upvote for clarifying my answer. Although I think that in a practical sense, my answer is probably the best route overall. — Reimius, Jul 24 '13 at 20:16
Thank u that's working. I found some question and it's problem is cellediting and them using initComponent function. I try create initComponent function but fail. I think TreeGrid hasn't initComponent function? — DeLe, Jul 25 '13 at 01:19

score 1 · Answer 2 · answered Jul 24 '13 at 18:01

You're recreating the window on every click of the button. This recreation may be messing with your configuration objects or destroying associations or references within them, or something similar. Try to reuse the window everytime by replacing your button code with something like:

    Ext.create('Ext.Button', {
        text: 'Click me',
        visible: false,
        renderTo: Ext.getBody(),

        handler: function(button) {
            if(!button.myWindow)
            {
                button.myWindow = Ext.create('Ext.window.Window', {
                   title: 'Example',
                   height     : 300,
                   width      : 500,
                   layout: 'border',
                   closeAction: 'hide',
                   items: [{            
                            region: 'center',
                            floatable:false,
                            layout:'fit',
                            xtype: 'example',
                            margins:'1 1 1 1'
                        }
                    ]
                 });
            }
            button.myWindow.show();
        }
    });

score -1 · Answer 3 · answered Jul 24 '13 at 08:04

-1

Maybe it needed complete the editing cell, try finish it:

...
beforeedit: function(plugin, edit){
     alert('don't run second time');
     plugin.completeEdit();
}

Sencha: CompleteEdit

answered Jul 24 '13 at 08:04

mfruizs

770
14
20

i try like in my code: plugin.completeEdit(); if (edit.record.get('block'))return false; but don't working :( – DeLe Jul 24 '13 at 08:17

score -1 · Answer 4 · answered Jul 24 '13 at 14:27

-1

I put together a working example here: http://jsfiddle.net/jdflores/6vJZf/1/

I think the problem with your column is that it's dataIndex is expecting that the editor value be a boolean type (because 'block' was set as datIndex instead of 'date'). I assume you are using the 'block' field just to identify which are blocked to be edited. I modified the fidle provided here: http://jsfiddle.net/jdflores/6vJZf/1/

       {
            text: 'Block Date',
            dataIndex: 'date',
            xtype: 'datecolumn',
            format: 'd/m/Y',
            editor: {
                xtype: 'datefield',
                allowBlank: true,
                format: 'd/m/Y'
            } 
        }

answered Jul 24 '13 at 14:27

Juan Daniel Flores

277
1
10

1

That's not working :(. I want my date cell will be block if that cell have block = true, but in my code that's only block in first time? – DeLe Jul 24 '13 at 15:59
I think you don't understand my question. Please see my edit. I just explain my problem – DeLe Jul 24 '13 at 16:55
I think your are right. Take a look at my other answer below. – Juan Daniel Flores Jul 24 '13 at 19:12

Extjs 4.1 - Listerning in CellEditing plugin not working at second time

4 Answers4