PDA

View Full Version : GridPivot & CellSelection Model



ruso
4 Nov 2010, 9:57 AM
Hi there, I'm trying to get the x and y axis value's on cell click... but I can't get it working, any idea?

For:


banana | apple | blueberry
south 1 3 2
north 9 8 6
west 2 3 11

So, if I click on 8 I need to get:
- apple
- north


var pivotAccumGrid = new Ext.grid.PivotGrid({
store : my_store,
aggregator: 'count',
measure : 'my_field',
sm: new Ext.grid.CellSelectionModel({ //I have also tried selModel for key
listeners: {
cellselect: function(sm,row,col) {
Ext.Msg.alert('click','got a click!');


}
}
}),
topAxis: [ {dataIndex: 'top_field'},{dataIndex: 'top_field2'} ],
leftAxis: [ {dataIndex: 'left_field', width: 80} ],
});

THANKS!

Barzoy
10 Nov 2010, 3:37 AM
Is it not too late for some help, I hope?

First.
PivotGrid doesn't completely supports CellSelectionModel yet. To make CellSelectionModel fire 'cellselect' event you have to execute this code once just after Ext initialization:


Ext.grid.PivotGridView.prototype.getCellIndex = function(el) {
var rowEl = Ext.fly(el).findParent('tr', 2, true);
if (rowEl) {
var i = 0;
Ext.each(rowEl.query('td'), function(rowCell) {
if (rowCell == el) {
return false;
}
i++;
return true;
});
return i;
}
return false;
};

Now the cell index is calculated correctly and we can select cells.

Next.
Columns in PivotGrid are created on the fly using the PivotGridAxis. Lets modify columns creation function for greater performance to not call it each time we select a cell. Execute this code once just after Ext initialization:



(function() {
var originalFunction = Ext.grid.PivotAxis.prototype.getTuples;
Ext.grid.PivotAxis.prototype.getTuples = function() {
var result = originalFunction.call(this);
this.lastTuples = result;
return result;
};
})();


Now lets write a 'cellselect' handler:


new Ext.grid.CellSelectionModel({
listeners: {
cellselect: function(sm, row, col) {
var leftColumnText = this.grid.leftAxis.lastTuples[row].data['left_field'];
var topColumnText = this.grid.topAxis.lastTuples[col].data['top_field'];
alert(leftColumnText + ' ' + topColumnText);
}
}
});


P.S.
In my opinion, PivotGrid is too incomplete, to use in development - wtf, wtf everywhere. Personally, I do not recommend you rely heavily on him. It is better to wait for the next release.

Barzoy
10 Nov 2010, 3:39 AM
[A copy of the previous post was there]

ruso
24 Nov 2010, 1:31 PM
Barzoy, it worked perfect! Thanks, you saved me....

haschish
12 Mar 2011, 5:15 PM
Barzoy, can you show full example, where write a 'cellselect' handler?

Barzoy
13 Mar 2011, 11:35 PM
var grid = new Ext.grid.PivotGrid({
selModel: new Ext.grid.CellSelectionModel({
})
});

grid.getSelectionModel().on('cellselect', function(sm, row, col) {
var leftColumnText = this.grid.leftAxis.lastTuples[row].data['left_field'];
var topColumnText = this.grid.topAxis.lastTuples[col].data['top_field'];
alert(leftColumnText + ' ' + topColumnText);
});

seek
13 Apr 2011, 4:58 AM
Hi Barzoy, and thank for the solution! ;-)
I am using Ext 3.3.1, and I have a little trouble opening a new Ext.window from the PivotGrid (which is in a modal window too), in fact the window opened is not on top....and I can't understand why XD
It's a manager problem?

http://img577.imageshack.us/i/pivotontop.png

Thanks
S.

Barzoy
13 Apr 2011, 11:53 PM
Yep, looks like it's pure window manager problem. Probably the issue is that there is a more then one window manager on your page and each of them has its own "window on top".
Also keep in mind that there is always a global window manager which controls any window then it is not assigned to other manager.

seek
14 Apr 2011, 12:44 AM
Thanks for your response.
I "use" the standard ExtJS manager, I don't use particular things, all is standard.
Others Idea?
Here some code: pivot grid


gridMag = Ext.extend(Ext.grid.PivotGrid, {
....
initComponent: function(){
this.colModel=new Ext.grid.ColumnModel({
defaults: {sortable: true, width:85},
columns: [
{header: 'aaa', dataIndex: 'aaa'}
]
});
....
this.selModel= new Ext.grid.CellSelectionModel({
listeners: {
cellselect: function(sm, row, col) {
var rec = this.grid.store.getAt(row);
if(rec.get('codUb')){
var filter=new Array;
filter.push({field:"ccc",operator:"STRING_EQUAL",value:rec.get("ccc")});
var w=new winMagVis({permanentFilter:filter});
w.show();//<-show on top
}
}
}
}),
gridMag.superclass.initComponent.apply(this, arguments);
},
onRender: function(){
gridMag.superclass.onRender.apply(this, arguments);
....
}

Window class opened from pivot


winMagVis = Ext.extend(Ext.Window, {
initComponent: function() {
this.iconCls='icon-grid';
this.modal=true;
this.closable=true;
this.border=false;
this.maximizable=true;
this.tbar=....
winMagVis .superclass.initComponent.call(this);
},
closeWindow:function(){
switch (this.closeAction) {
case 'hide': this.hide(); break;
case 'close': this.close(); break;
default: break;
}
},
show: function(){
Ext.Window.prototype.show.apply(this, arguments);
},
....
});


Thanks for your time!
S.

Barzoy
14 Apr 2011, 11:36 PM
1. Check whether your windows use the same window manager
yourPivotGridWindow.manager == yourModalWindow.manager should be true

2. Check whether your windows use the same owner component
yourPivotGridWindow.ownerCt == yourModalWindow.ownerCt should be true

seek
18 Apr 2011, 12:58 AM
Both are true...
maybe is not a manager problem?...

Another test:
yourPivotGridWindow not modal (default is modal), then when user open yourModalWindow it render back of pivot window (image1), and clicking in, take it on top, rendering correctly the layout (image2).
http://img18.imageshack.us/i/immagine1bk.png/
http://img600.imageshack.us/i/immagine2vh.png/