PDA

View Full Version : LockingGridView and Ext.TabPanel



kinaya
25 Sep 2013, 12:59 AM
Hi, I'm using that example

http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/locking-grid.html

and seems it works! ;) (i'm using extjs 3.4)

But there is one issue and I'm trying to figure out why it is so ...
First column is locked by my settings
and whole grid became looks like this https://dl.dropboxusercontent.com/u/7017985/Screenshots/7q.jpg
if I would Lock any other column manually it's jump to up as first column did already ;(


// particular grid, one of the tab content
var statColumns = [
{id:'seller',header: "", width: 180, sortable: true, dataIndex: 'seller', locked: true},
{header: "", width: 85, sortable: true, dataIndex: 'supportboth'},
....
]

var forData = [[],[],[],....];

var forStore = new Ext.data.ArrayStore({
fields: [
{name: 'seller'},
...
]});

forStore.loadData(forData);

var todayGrid = new Ext.grid.GridPanel({
renderTo: 'today-grid',
store: todayStore,
colModel: new Ext.ux.grid.LockingColumnModel(statColumns),
stripeRows: true,
height:400,
width:1050,
autoHeight: true,
bbar: new Ext.Toolbar({
buttons: [
new Ext.Button({
text: 'Excel',
handler: function(){
GetExcelFile(this, todayGrid);
}
})]
}),
view: new Ext.ux.grid.LockingGridView({})
});

// here is the tab container
var tabs = new Ext.TabPanel({
width: 1060,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[
{
id:'for-grid',
contentEl:'for-grid',
title: 'blablabla',
closable: true,
listeners: {activate: handleActivate, close: searchTabClose}
},
....
]
});




Is there any solution ?

Thanks.

slemmon
30 Sep 2013, 2:26 PM
I don't know that you can use autoHeight: true with locking columns/view.

The below worked ok for me. Did you link to "examples/ux/css/LockingGridView.css" to get the CSS specific to that UX?



// particular grid, one of the tab content
var statColumns = [
{id:'seller', header: "", width: 180, sortable: true, dataIndex: 'seller', locked: true},
{header: "", width: 85, sortable: true, dataIndex: 'supportboth'},
{header: "", width: 85, sortable: true, dataIndex: 'supportboth2'}
]


var forData = [['a', '1'],['b', '2']];


var forStore = new Ext.data.ArrayStore({
fields: [{
name: 'seller',
}, {
name: 'supportboth'
}, {
name: 'supportboth2'
}]
});


forStore.loadData(forData);


var forGrid = new Ext.grid.GridPanel({
renderTo: document.body,
store: forStore,
colModel: new Ext.ux.grid.LockingColumnModel(statColumns),
stripeRows: true,
height:400,
width:1050,
//autoHeight: true,
view: new Ext.ux.grid.LockingGridView()
});

kinaya
30 Sep 2013, 8:42 PM
Yeah, the problem was in autoHeight property ;) thx.

30 Oct 2014, 2:08 AM
Dear all:
iam chinese,my english is very pool.
so if you do not unstand who i say.iam very sorry
i want to use PivotGrid and LockingGridView produce a table.
but i failed
i hope who can help me
my email is [email protected]
thank you