PDA

View Full Version : GridPanel, IE6 and width



zeroed
29 May 2009, 5:33 AM
Hi,

I have a problem with the subj.

1. I have tab panel.
2. I add new Panel to it.


Lwp.ArtifactsPanel = function(protocolName, protocolVersion, directory) {
this.protocolName = protocolName;
this.protocolVersion = protocolVersion;
this.directory = directory;
};

Ext.extend(Lwp.ArtifactsPanel, Ext.Panel, {

listeners: {
'render': function() {
this._initialize();
}
},

protocolName: null,
protocolVersion: null,
directory: null,

title: 'Experiments',
id: 'experiments',
autoScroll: true,
layout: 'fit',
frame: false,

items: [
{
border: false,
autoScroll: true,
bodyStyle: 'padding: 15px 15px 15px 15px',
items: [
{
html: 'Loading data...',
border: false
}
],
id: 'artifactsCenter'
}
],

_initialize: function() {
var updater = new Ext.DwrGlobalHintUpdate();
updater.update(ProtocolArtefactsProvider.getProtocolArtefacts, [this.protocolName,this.protocolVersion, 'lib'], this._dataLoaded.createDelegate(this));
},

_dataLoaded: function(data) {
var newTestPanel = new Ext.Panel({
html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
bodyStyle: 'margin-top: 15px'
});
var anotherTestPanel = new Ext.Panel({
html: 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?',
bodyStyle: 'margin-top: 15px'
});
var newTestPanel1 = new Ext.Panel({
html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
bodyStyle: 'margin-top: 15px'
});
var anotherTestPanel1 = new Ext.Panel({
html: 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?',
bodyStyle: 'margin-top: 15px'
});
var newTestPanel2 = new Ext.Panel({
html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
bodyStyle: 'margin-top: 15px'
});
var anotherTestPanel2 = new Ext.Panel({
html: 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?',
bodyStyle: 'margin-top: 15px'
});
var newTestPanel3 = new Ext.Panel({
html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
bodyStyle: 'margin-top: 15px'
});
var anotherTestPanel3 = new Ext.Panel({
html: 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?',
bodyStyle: 'margin-top: 15px'
});

var artifactsGrid = new Lwp.ArtifactsGrid({'totRec':data.resources.length,'records':data.resources});

var gridPanel= new Ext.Panel({
layout: 'fit',
style: 'margin-top: 15px;',
border: false,
items: [artifactsGrid]
});

this.changeCenterContent([newTestPanel, gridPanel, anotherTestPanel, newTestPanel1, anotherTestPanel1, newTestPanel2, anotherTestPanel2, newTestPanel3, anotherTestPanel3]);
},

changeCenterContent: function(newContent) {
if (!newContent) return;

var artifactsCenterPanel = Ext.getCmp('artifactsCenter');
artifactsCenterPanel.removeAll(true);

if (Ext.isArray(newContent)) {
Ext.each(newContent, function(item) {
this.add(item);
}, artifactsCenterPanel);
} else {
artifactsCenterPanel.add(newContent);
}
artifactsCenterPanel.doLayout();
},

toString: function() {
return "Lwp.ArtifactsGrid";
}
});This panel have a lot of items and on of the item is grid panel:


Lwp.ArtifactsGrid = function(data) {

var reader = new Ext.data.JsonReader({
totalProperty: 'totRec',
root: 'records'
}, [
{name: 'name'},
{name: 'length'},
{name: 'date'},
{name: 'url'}
]);

this.store = new Ext.data.Store({
reader: reader,
data: data,
sortInfo:{field: 'type', direction: "ASC"},
remoteSort: true,
autoLoad: true
}),
this.columns = [
{header: "Name", width: 50, sortable: false, dataIndex: 'name'},
{header: "Size", width: 50, sortable: false, dataIndex: 'length'},
{header: "Date", width: 50, sortable: false, dataIndex: 'date'}
];

this.view = new Ext.grid.GridView({
forceFit:true,
emptyText: 'Artifacts not found'
});

this.enableHdMenu = false;
this.autoHeight = true;
};

Ext.extend(Lwp.ArtifactsGrid, Ext.grid.GridPanel, {});In internet explorer 6 the width of grid panel is very big. Everything is ok in FF.

What can I do?

zeroed
29 May 2009, 6:03 AM
Here is the screenshot from IE6.

Anybody, please?

29 May 2009, 6:06 AM
set a width on the grids parent.

zeroed
29 May 2009, 6:14 AM
set a width on the grids parent.

Hi,

I set up the width:


var gridPanel = new Ext.Panel({
layout: 'fit',
style: 'margin-top: 15px;',
border: false,
title: 'Just a test grid',
width: 700,
items: [artifactsGrid]
});
Now I have two questions:

1. Isn't it possible to set width to auto? Because in this case it will not be dinamic. Any way: it's better than nothing, I can setup width to all components on the page..
2. In IE6 grid headers dissapaired. Look at the screenshot.

zeroed
29 May 2009, 7:07 AM
Ok,

I have deleted autoHeight from grid panel and now I see grid headers.

But now I also see scrolling.