Reputation: 703
I want to fix my table/grid header in my ExtJs 4.2 application, so that the header is allways visible, while scroling. The main grid in my application has a fixed header and is implemented as in the code in the bottom of this post. It is not working and I don't know why... I tried it with the split attribute, but it isn't working, too... :(
This is the code:
function openThePopup() {
var win = new Ext.Window({
modal : true,
height : 500,
width : 900,
plain : true,
border : false,
resizable : false,
maximizable : false,
draggable : true,
closable : true,
closeAction : 'destroy',
title : 'Title',
autoScroll : true,
buttonAlign : 'center',
items : [ {
xtype : 'grid',
id : 'theGrid',
store : theStore,
border : 0,
layout : 'fit',
margins : '5 0 0 0',
split : true,
columns : [ {
text : 'Country',
dataIndex : 'country'
}, {
text : 'City',
dataIndex : 'city'
}, {
text : 'ZIP',
dataIndex : 'zip'
}, {
text : 'Street',
dataIndex : 'street',
width : 200
}, {
text : location,
dataIndex : 'name',
width : 200
} ],
listeners : {
itemdblclick : function(t, record, item, index, e, eOpts) {
...
}
}
} ],
buttons : [ {
onClick : function() {
...
}
} ]
}).show();
}
I appriciate any help.
Thank you very much in advance.
Best wishes to all of you.
Upvotes: 2
Views: 5115
Reputation: 30082
Your layout isn't configured correctly. The layout: 'fit'
should go on the window and the layout configuration should be removed from the grid. Also remove the autoScroll
config on the window.
Upvotes: 5