PDA

View Full Version : GridPanel doesnīt fit to surrounding FormPanel



defcon1
20 Jun 2010, 12:20 AM
Hi,

please see attached example, I just donīt get the EditorGridPanel autofitted to the height of the
surrounding panel .... :((

Maybe someone can help me out :>

Many thanks!
d1



<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/extjs/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function(){


myClass = function (cfg) {

//===== Store
var myData = [
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am']
];

this.store = new Ext.data.ArrayStore({

storeId: 'EntryStore',
fields: [
'Title', 'Message','CreationDate','ChangeDate'
]
});
this.store.loadData(myData);



//===== Define Top
this.fieldSetEntries = new Ext.form.FieldSet({

title: 'New entry',
//layout: 'form',
items: [
{
xtype: 'form',
labelWidth: 100,
labelAlign: 'left',
//layout: 'form',
hideBorders: true,
border: false,
items: [
{
xtype: 'textfield',
fieldLabel: 'Title',
anchor: '100%'
}
]
}
]
});



//===== Define Bottom
this.gridPanelEntries = new Ext.grid.EditorGridPanel({

title: 'Entries',
store: this.store,
autoExpandColumn: 'Message',
frame: true,
autoHeight: true,
//layout: 'fit',
tbar: new Ext.Toolbar({
items: [
{
icon: 'icons/silk/png/application_side_contract.png',
tooltip: 'Replies'
}
]
}),
bbar: new Ext.PagingToolbar({}),
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
columns: [
{
xtype: 'gridcolumn',
header: 'Title', //[email protected]@- Text
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'Title',
editor: {
xtype: 'textfield',
fieldLabel: 'Label'
}
},
{
xtype: 'gridcolumn',
id: 'Message',
header: 'Message', //[email protected]@- Text
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'Message',
editor: {
xtype: 'textfield',
fieldLabel: 'Label'
}
},
{
xtype: 'gridcolumn',
header: 'CreationDate', //[email protected]@- Text
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'CreationDate',
editor: {
xtype: 'textfield',
fieldLabel: 'Label'
}
},
{
xtype: 'gridcolumn',
header: 'ChangeDate', //[email protected]@- Text
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'ChangeDate',
editor: {
xtype: 'textfield',
fieldLabel: 'Label'
}
}
]
});



//===== Define Panel
Ext.apply (cfg, {

//title: 'Dummy',
//border: false,
autoShow: false,
frame: true,
layout: 'form',
items: [
this.fieldSetEntries,
this.gridPanelEntries
]
}, {});

myClass.superclass.constructor.call (this, cfg);
}



Ext.extend (myClass, Ext.Panel, {

});


// Draw the panel
new myClass({

renderTo: Ext.getBody(),
width: 400,
height: 350
});
});


</script>

</head>

<body>

</body>
</html>

defcon1
21 Jun 2010, 7:10 AM
Still have no clue! :(

Condor
21 Jun 2010, 7:25 AM
You include the grid in a form layout and specify no anchor. How is Ext supposed to know how you want your grid sized?

I recommend changing the form to layout:'hbox',layoutConfig:{align:'stretch'} and set the grid to flex:1 and remove the autoHeight:true.

defcon1
21 Jun 2010, 8:32 AM
I guess you mean 'vbox' ...

but as always: Youīre my man! ;)

Many many thanks!

defcon1
21 Jun 2010, 11:48 AM
Hi Condor,

here Iīve got a more complex problem regarding the same issue, maybe you can help me out:

If you click the button, I switch to another panel and you can see it still doesnīt fit. As soon as
you resize the window it recalcs correctly.



<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/extjs/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function(){

messages = function (cfg) {

//===== Store
var myData = [
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am'],
['Title','Message','9/1 12:00am','9/1 12:00am']
];

this.store = new Ext.data.ArrayStore({

storeId: 'EntryStore',
fields: [
'Title', 'Message','CreationDate','ChangeDate'
]
});
this.store.loadData(myData);


//===== Define the grid panel
this.gridPanelMessages = new Ext.grid.EditorGridPanel({

title: 'Messages',
store: this.store,
autoExpandColumn: 'Message',
frame: true,
flex: 1,
tbar: new Ext.Toolbar({
items: [
{
icon: 'icons/silk/png/application_side_contract.png',
tooltip: 'Replies'
}
]
}),
bbar: new Ext.PagingToolbar({}),
selModel: new Ext.grid.RowSelectionModel({

singleSelect: true
}),
columns: [
{
xtype: 'gridcolumn',
header: 'Title', //[email protected]@- Text
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'Title',
editor: {
xtype: 'textfield',
fieldLabel: 'Label'
}
},
{
xtype: 'gridcolumn',
id: 'Message',
header: 'Message', //[email protected]@- Text
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'Message',
editor: {
xtype: 'textfield',
fieldLabel: 'Label'
}
},
{
xtype: 'gridcolumn',
header: 'CreationDate', //[email protected]@- Text
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'CreationDate',
editor: {
xtype: 'textfield',
fieldLabel: 'Label'
}
},
{
xtype: 'gridcolumn',
header: 'ChangeDate', //[email protected]@- Text
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'ChangeDate',
editor: {
xtype: 'textfield',
fieldLabel: 'Label'
}
}
]
});



//===== Define panel
Ext.apply (cfg, {

frame: true,
layout: 'vbox',
layoutConfig:{

align: 'stretch'
},
items: [
this.gridPanelMessages
]
}, {});

messages.superclass.constructor.call (this, cfg);
}

Ext.extend (messages, Ext.Panel, {});

//===== Instantiate the panel
var m = new messages({});


//===== The card panel containing the switchable panels (at moment only one)
preferencespanel = new Ext.Panel ({

region: 'center',
html: 'center',
layout: 'card',
title: 'Center',
border: true,
items: [
m
]
});


//===== The window with the main layout
var win = new Ext.Window({

layout: 'border',
title: 'Messages',
renderTo: Ext.getBody(),
width: 600,
height: 800,
items: [
{
title: 'West',
region: 'west',
split: true,
collapsible: true,
width: 200,
items:[
new Ext.Button({

text: 'Click me',
handler: function() {

preferencespanel.getLayout().setActiveItem(m.id);
preferencespanel.doLayout();
}
})
]
},
preferencespanel
]
});
win.show();
});


</script>

</head>

<body>

</body>
</html>

Animal
21 Jun 2010, 12:26 PM
Why are you wrapping the GridPanel inside a box layout Panel???? Why? And then you wrap THAT inside a card layout Panel. Why?

That whole heap of code looks random.

If you want a grid in a window:



new Ext.Window({
(your configs here..),
layout: 'fit',
items: YOUR GRIDPANEL
});


Done wrap and wrap and wrap and wrap and wrap...

defcon1
21 Jun 2010, 1:15 PM
This is just a minified example.

In real life it's a window for setting preferences.
Therefore I use a border layout where you can choose
a category in the western region and the regarding panel
is shown in the center region.

I couldn't find a better way ...

defcon1
21 Jun 2010, 9:48 PM
... And the grid panel has a box layout because usually there is a form, too.

I just want to show the problem in a reduced example!

Condor
21 Jun 2010, 10:14 PM
Which Ext version are you using, because your example displays just fine using Ext 3.2.2.

ps. I've made some changes to your code:

messages = Ext.extend(Ext.Panel, {
constructor: function (cfg) {
//===== Store
var myData = [
['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
['Title', 'Message', '9/1 12:00am', '9/1 12:00am']
];
this.store = new Ext.data.ArrayStore({
storeId: 'EntryStore',
fields: [
{name: 'Title'},
{name: 'Message'},
{name: 'CreationDate', type: 'date', dateFormat: 'n/j g:ia'},
{name: 'ChangeDate', type: 'date', dateFormat: 'n/j g:ia'}
],
data: myData
});
//===== Define the grid panel
var pagingToolbar = new Ext.PagingToolbar({
store: this.store
});
this.gridPanelMessages = new Ext.grid.EditorGridPanel({
title: 'Messages',
store: this.store,
autoExpandColumn: 'Message',
flex: 1,
tbar: new Ext.Toolbar({
items: [{
icon: 'icons/silk/png/application_side_contract.png',
tooltip: 'Replies'
}]
}),
bbar: pagingToolbar,
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
columns: [{
xtype: 'gridcolumn',
header: 'Title', //[email protected]@- Text
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'Title',
editor: {
xtype: 'textfield'
}
}, {
xtype: 'gridcolumn',
id: 'Message',
header: 'Message', //[email protected]@- Text
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'Message',
editor: {
xtype: 'textfield'
}
}, {
xtype: 'datecolumn',
format: 'n/j g:ia',
header: 'CreationDate', //[email protected]@- Text
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'CreationDate',
editor: {
xtype: 'datefield'
}
}, {
xtype: 'datecolumn',
format: 'n/j g:ia',
header: 'ChangeDate', //[email protected]@- Text
sortable: true,
resizable: true,
// width: 100,
dataIndex: 'ChangeDate',
editor: {
xtype: 'datefield'
}
}]
});
//===== Define panel
Ext.apply(cfg, {
xtype: 'container',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
items: [
this.gridPanelMessages
]
});
messages.superclass.constructor.call(this, cfg);
}
});
//===== Instantiate the panel
var m = new messages({});
//===== The card panel containing the switchable panels (at moment only one)
preferencespanel = new Ext.Panel({
region: 'center',
html: 'center',
layout: 'card',
title: 'Center',
border: true,
items: [m]
});
//===== The window with the main layout
var win = new Ext.Window({
layout: 'border',
title: 'Messages',
renderTo: Ext.getBody(),
width: 600,
height: 800,
items: [{
title: 'West',
region: 'west',
split: true,
collapsible: true,
width: 200,
items: [
new Ext.Button({
text: 'Click me',
handler: function () {
preferencespanel.getLayout().setActiveItem(m.id);
preferencespanel.doLayout();
}
})]
}, preferencespanel]
});
win.show();

defcon1
22 Jun 2010, 12:28 AM
Hi Condor,

many thanks for improving my example, it helps! ;)

As I can see the fix for my problem is to extend Ext.Component instead of Ext.Panel,
can you explain it (just a bit)?

I am using 3.2.1. I have a commercial license but no access to SVN ... :/

Many thanks!
d1

Condor
22 Jun 2010, 12:47 AM
As I can see the fix for my problem is to extend Ext.Component instead of Ext.Panel,
can you explain it (just a bit)?

??? I just used a different Ext.extend syntax (for readability). They should behave exactly the same!


I am using 3.2.1. I have a commercial license but no access to SVN ... :/
I just checked the example in Ext 3.2.1, but it still displays correcty.

defcon1
22 Jun 2010, 1:26 AM
You use the xtype:'container' for the panel, and that made the difference for me ...

Do you know anything about the release date of 3.2.2?

defcon1
22 Jun 2010, 3:28 AM
I still try to figure out the problem, what Iīve found:

http://hoq.dynalias.com/extjs/no.html (frame:true)
http://hoq.dynalias.com/extjs/ok.html (frame:false)

Please look, itīs in line 108

Animal
22 Jun 2010, 3:29 AM
You've been here a year and a half!

Containers contain Components.

They use layouts to size and position those Components.

Learn the principle, and then you wont have to be given code every time you write an app!

defcon1
22 Jun 2010, 4:19 AM
I know about these principles, but I really donīt understand why I canīt use the frame-option
of a panel without getting a corrupt layout in this particular case?!?

A framework should make life easier, in this case Iīve got to know about bad combinations
of options which are not caught by the framework.

Please notice: The example http://hoq.dynalias.com/extjs/no.html works as soon as you move the
split-bar! For me it seems like a bug. And please remember before you start to criticise my code,
itīs just a simple show-case!

Animal
22 Jun 2010, 5:02 AM
Use hideMode: 'offsets' for your hidden cards.

The layout which sizes the framed Panel does not get the correct size for the framing elements because the Component is display:none

defcon1
22 Jun 2010, 5:20 AM
Great, thatīs what I was looking for! ;)

Many thanks!
d1