PDA

View Full Version : grid get invisible after add to panel



Ex_Soft
14 Jun 2010, 3:03 AM
Ext.BLANK_IMAGE_URL = "../images/s.gif";

Ext.onReady(function() {
Ext.QuickTips.init();

var
store = new Ext.data.JsonStore({
url: "DataSourceHandler.aspx",
root: "rows",
idProperty: "Id",
successProperty: "success",
totalProperty: "count",
fields: [
{ name: "Id", type: "int" },
"Name",
{ name: "Salary", type: "float" },
{ name: "BirthDate", type: "date", dateFormat: "c" }
]
}),
grid = new Ext.grid.GridPanel({
id: "MainGrid",
store: store,
columns: [
{ dataIndex: "Id", header: "ID", width: 30, sortable: true, hidden: true },
{ id: "ColName", dataIndex: "Name", header: "Name", width: 180, sortable: true },
{ dataIndex: "Salary", header: "Salary", width: 75, sortable: true, align: "center" },
{ dataIndex: "BirthDate", header: "BirthDate", renderer: Ext.util.Format.dateRenderer("d/m/Y"), width: 100, sortable: true, align: "center" }
],
height: 500,
loadMask: true
}),
Panel1 = new Ext.Panel({
layout: "border",
items: [{
region: "center",
xtype: "panel",
items: grid
}]
}),
viewport = new Ext.Viewport({
id: "MainForm",
layout: "border",
renderTo: Ext.getBody(),
items: [{
region: "center",
xtype: "tabpanel",
id: "TabPanel",
activeTab: 0,
tabPosition: "bottom",
items: [{
title: "Grid",
items: Panel1 // grid
}, {
title: "Tab# 1",
html: "Tab# 1"
}, {
title: "Tab# 2",
html: "Tab# 2"
}]
}]
});

store.load();
});
When I put grid into Panel1, grid get invisible. Why? (Without Panel1 all ok.)

pavanextjs
14 Jun 2010, 5:23 AM
Try this...


grid = new Ext.grid.GridPanel({
layout: 'fit', //use 'fit' layout for the grid inside a 'center' region
id: "MainGrid",
store: store,
columns: [
{ dataIndex: "Id", header: "ID", width: 30, sortable: true, hidden: true },
{ id: "ColName", dataIndex: "Name", header: "Name", width: 180, sortable: true },
{ dataIndex: "Salary", header: "Salary", width: 75, sortable: true, align: "center" },
{ dataIndex: "BirthDate", header: "BirthDate", renderer: Ext.util.Format.dateRenderer("d/m/Y"), width: 100, sortable: true, align: "center" }
],
height: 500,
loadMask: true
})

Animal
14 Jun 2010, 5:29 AM
Well, it's not surprising is it?

What you are adding to the TabPanel is:

A Panel containing a Panel containing a Panel containing a GridPanel!

Instead of just adding a GridPanel?

What wrap it so deeply in Panels? Especially, if you are not going to specify a layout config?!

Ex_Soft
14 Jun 2010, 5:32 AM
Try this...


...
layout: 'fit', //use 'fit' layout for the grid inside a 'center' region
...

grid is invisible

Animal
14 Jun 2010, 5:34 AM
It's overnested as I told you.

Unroll that massive overnesting and all will be well.

Ex_Soft
18 Jun 2010, 6:28 AM
A Panel containing a Panel containing a Panel containing a GridPanel!
Is this too difficult? I want to have Panel with Toolbar in "north" and Tabpanel in "center" and in each tabsheet: Panel with Tree in "left" and Grid in "center".

Condor
18 Jun 2010, 7:19 AM
It's still overnested. A GridPanel IS a panel so it can BE the center region instead of being included inside the center region.

Ex_Soft
18 Jun 2010, 7:59 AM
Will you show small example with this (http://www.sencha.com/forum/showthread.php?101579-grid-get-invisible-after-add-to-panel&p=478548#post478548) design, pls?..

Animal
18 Jun 2010, 11:23 AM
{
xtype: 'tabpanel',
items: [ gridPanel...
...
}