GridPanel column header headerclick and move events

[tempvalue]

Hi all,

I have three questions about gridpanel column header events:

1)I try to call a function whenever a column header is clicked. In the previous version of ExtJS, there was headerclick event in gridpanel. But now i found this event in Ext.grid.column.Column. I set this event as a column event but it never called:

columns:[{
 //other properties
listeners:{
 headerclick:function(){}
}
}
]

2) I could not find any event that is triggered before any column header is moved like beforemove.How can i implement such an event? I also wonder if i can drag drop column header into a textbox.

3)When header grouping is used, i can move a column into a group or i can move a group header into another group header which is absurd in my case. I need to make impossible to drag a group header into another group header. This question is actually related with my second question.

[sword-it]

hi tempvalue,


Code:

columns:[
{ //other properties
listeners:{
headerclick:function(){
}
}
}]

It is not right way to attach listeners in the grid column.See sample example for your first question

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: {
        items:[
        {
           header: 'Name',
           dataIndex: 'name'},
       {
            header: 'Email',
           dataIndex: 'email',
            flex: 1},
       {
           header: 'Phone',
           dataIndex: 'phone'}
       ],
       listeners:{
             headerclick:function(container, column, e){
               alert('Header Clicked');
            },
           columnmove:function(container, coulmn, from , to){
               alert('Column Moved From' + from+ 'To' +to);    // for your second question 
            }
        }
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

I hope you also find your all other answer ( like for moving header is "columnmove" event )

[tempvalue]

Thanks for the answer. I missed to point that columns can be object.

I thing, i also found another way for my first question.
mygrid.headerCt.onHeaderClick is called whenever a column header is clicked. I am now setting my custom function to that method.