PDA

View Full Version : Problem with resize grid into tab



Terrible
18 Oct 2009, 11:42 PM
Hi everybody,
my problem is the wrong resize of a grid into tab.
I have a Module standard that creates a GridPanel to add into a tab panel.

Code:


Module = function(){
this.panel;
this.editWindow;
this.ServiziWindow;
this.ds;
this.grid;
this.menu;

this.moduleName;
this.aggregate;
this.page;
this.description;

this.rec = Ext.data.Record.create([
{name: 'COL01', mapping: 'COL01'},
{name: 'AMOUNT', mapping: 'AMOUNT',type:'float'},
{name: 'LABCOST', mapping: 'LABCOST',type:'float'},
{name: 'SECOND_AMOUNT', mapping: 'SECOND_AMOUNT',type: 'float'},
{name: 'SECOND_LABCOST', mapping: 'SECOND_LABCOST',type: 'float'}
]);
this.colModel = new Ext.grid.ColumnModel([
{id: "COL01", width: 100, dataIndex: 'COL01',sortable: true},
{id: "AMOUNT",header: AMOUNT, width: 40, dataIndex: 'AMOUNT', sortable: true,
align: 'right',
menuDisabled:true,
renderer: Mercurio.util.Format.euMoney},
{id: "LABCOST",header: LABOUR_COST, width: 40, dataIndex: 'LABCOST', sortable: true,
align: 'right',
menuDisabled:true,
renderer: Mercurio.util.Format.euMoney},
{id: "SECOND_AMOUNT",header: AMOUNT + ' ' + CONFRONTABLE, width: 40,
dataIndex: 'SECOND_AMOUNT', sortable: true,
align: 'right',
menuDisabled:true,
renderer: Mercurio.util.Format.euMoney},
{id: "SECOND_LABCOST",header: LABOUR_COST + ' ' + CONFRONTABLE , width: 40,
dataIndex: 'SECOND_LABCOST', sortable: true,
align: 'right',
menuDisabled:true,
renderer: Mercurio.util.Format.euMoney}]
);
this.gridView = new Ext.grid.GridView({
forceFit: true,
});

this.ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: '/pls/' + documentRoot + '/'
+ $x('P0_SCHEMADB').value + '.SP_GET_EARNING_XML', method: "POST"}),
reader: new Ext.data.XmlReader({
totalRecords:'TOTAL',
record: 'ROW',
id: 'ID'
}, this.rec)
});
};

This class have a function:
buildGrid: function(){

var menuBtn = new Ext.Toolbar.SplitButton({
id: 'dd' + this.aggregate,
text: 'Aggrega per',
icon: '/i/'+js_path+'/suite/toolbar/images/16x16/search.png',
disabled: false,
menu: 'aggrMenu' + this.aggregate //this.menu
});

//this.menu.ownerCt = menuBtn.ownerCt;

this.grid = new Ext.grid.GridPanel({
id: this.aggregate.toString(),
//renderTo: document.body,
closable : true,
collapsed: false,
autoScroll: true,
layout: 'fit',
margins: '0 0 30 0',
stripeRows: true,
ds: this.ds,
cm: this.colModel,
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
loadMask: true,
frame: true,
view: this.gridView,
bbar: new Ext.PagingToolbar({
pageSize: limit,
store: this.ds,
displayInfo: false,
items:[{
id: 'pdf' + this.aggregate,
text: 'PDF',
icon: '/i/'+js_path+'/suite/toolbar/images/16x16/pdf.png',
cls: "x-btn-text-icon",
iconCls: "x-btn-icon-me",
disabled: false,
scope : this,
handler: function(){
report.setOutput("&output=pdf");
report.setParams(-1,currentAggregate,repColumnDesc);
report._exportPDF(Era.config.Report.getUrl());
}
},{
id: 'csv' + this.aggregate,
text: 'CSV',
//icon: '/i/'+js_path+'/suite/toolbar/images/16x16/csv.png',
cls: "x-btn-text-icon",
iconCls: "x-btn-icon-me",
disabled: false,
scope : this,
handler: function(){
report.setOutput("&output=csv");
report.setParams(-1,currentAggregate,repColumnDesc);
report._exportPDF(Era.config.Report.getUrl());
}
},{
id: 'xls' + this.aggregate,
text: 'Excel',
//icon: '/i/'+js_path+'/suite/toolbar/images/16x16/csv.png',
cls: "x-btn-text-icon",
iconCls: "x-btn-icon-me",
disabled: false,
scope : this,
handler: function(){
report.setOutput("&output=xls");
report.setParams(-1,currentAggregate,repColumnDesc);
report._exportPDF(Era.config.Report.getUrl());
}
}]
})
});
//this.grid.render();
this.grid.on('rowclick',function(grid,rowIndex){
recSel = grid.getSelectionModel().getSelected();
idRow = rowIndex;
});
this.menu.doLayout();
this.grid.doLayout();
},

When I open a new Module I add this one into mya tabpanel but it doesn't resize correctly.
I've seen that if I hide the tabStrip of tabpanel the grid is correctly sizing in, and I can see the pagintoolbar.

In conclusion, the height of my grid into, is too great and my pagintoolbar si cut.

Thanks in advance.
Luca.

Animal
18 Oct 2009, 11:55 PM
Grid in TabPanel:



myTabPanel.setActiveTab(myTabPanel.add(myGridPanel));


That's IT.

Terrible
19 Oct 2009, 12:33 AM
Thanks Animal,
but if I do this is not the same?

tabAggr.setActiveTab(tabAggr.add(module.grid));

Don't work fine. I have to use margins?

Animal
19 Oct 2009, 12:46 AM
No. It just works.

Terrible
19 Oct 2009, 7:52 AM
Hi,
I've tried this:



var tabPanel;
var rec;
var ds;
var colModel;
var cnt = 1;

Ext.onReady(function(){

var myData = [
[3,'Visibility','Tipi'],
[4,'Visibility','Regions'],
[7,'Timing','Year'],
[8,'Timing','Month'],
[9,'Timing','Week'],
[10,'Timing','Day of Week'],
[11,'Timing','Day'],];

rec = Ext.data.Record.create([
{name: 'ID'},
{name: 'CODE', type: 'string'},
{name: 'DESCRIPTION', type: 'string'}
]);

ds = new Ext.data.GroupingStore({
reader: new Ext.data.ArrayReader({
id: 'ID'
}, rec),
sortInfo:{field: 'CODE', direction: "ASC"},
groupField:'CODE'
});

ds.loadData(myData);

//Grouping
colModel = new Ext.grid.ColumnModel([
{id: 'ID',header: '', width: 10, dataIndex: 'ID', sortable: true, hidden: true},
{header: 'CODE', width: 10, dataIndex: 'CODE', sortable: true},
{header: 'DESCRIPTION', width: 25, dataIndex: 'DESCRIPTION', sortable: true}
]);

tabPanel = new Ext.TabPanel({
applyTo: 'tabpan',
enableTabScroll: true,
tabPosition: 'top',
margins:'0 0 0 0',
resizeTabs:true,
tabWidth:250,
minTabWidth: 120,
enableTabScroll: true,
layoutOnTabChange:true
});

viewport = new Ext.Viewport({
layout:'border',
renderTo: document.body,
items:[{
region: 'north',
height: 30,
contentEl: 'north',
},{
region: 'center',
contentEl: 'center',
layout:'fit',
items:[tabPanel]
}]
});

});

function addPanel(){
var pan = new Ext.grid.GridPanel({
title: '' + cnt,
border: false,
stripeRows: true,
ds: ds,
cm: colModel,
loadMask: true,
view: new Ext.grid.GridView({
forceFit:true,
}),
frame: true,
bbar:[{
text:'Button'
}]
});
tabPanel.setActiveTab(tabPanel.add(pan));
cnt = cnt + 1;
}


The result is the same of above.
The pagin toolbar is cut, else I have to delete the title property that shows the tabstrip.

Have a nice day.

Animal
19 Oct 2009, 7:55 AM
Magic eh?
... tags.

Try it.

Animal
19 Oct 2009, 8:04 AM
I just pasted this directly into Firebug, ran it and got a perfect grid in a tab:



Ext.getBody().update('');
var tabPanel;
var rec;
var ds;
var colModel;
var cnt = 1;

Ext.onReady(function(){

var myData = [
[3,'Visibility','Tipi'],
[4,'Visibility','Regions'],
[7,'Timing','Year'],
[8,'Timing','Month'],
[9,'Timing','Week'],
[10,'Timing','Day of Week'],
[11,'Timing','Day'],];

rec = Ext.data.Record.create([
{name: 'ID'},
{name: 'CODE', type: 'string'},
{name: 'DESCRIPTION', type: 'string'}
]);

ds = new Ext.data.GroupingStore({
reader: new Ext.data.ArrayReader({
id: 'ID'
}, rec),
sortInfo:{field: 'CODE', direction: "ASC"},
groupField:'CODE'
});

ds.loadData(myData);

//Grouping
colModel = new Ext.grid.ColumnModel([
{id: 'ID',header: '', width: 10, dataIndex: 'ID', sortable: true, hidden: true},
{header: 'CODE', width: 10, dataIndex: 'CODE', sortable: true},
{header: 'DESCRIPTION', width: 25, dataIndex: 'DESCRIPTION', sortable: true}
]);
console.log(1);

tabPanel = new Ext.TabPanel({
region: 'center',
enableTabScroll: true,
tabPosition: 'top',
margins:'0 0 0 0',
resizeTabs:true,
tabWidth:250,
minTabWidth: 120,
enableTabScroll: true,
layoutOnTabChange:true,
items: {title: 'Test'}
});
console.log(2);

viewport = new Ext.Viewport({
layout:'border',
items:[{
region: 'north',
height: 30
}, tabPanel]
});

});

function addPanel(){
var pan = new Ext.grid.GridPanel({
title: '' + cnt,
border: false,
stripeRows: true,
ds: ds,
cm: colModel,
loadMask: true,
view: new Ext.grid.GridView({
forceFit:true,
}),
frame: true,
bbar:[{
text:'Button'
}]
});
tabPanel.setActiveTab(tabPanel.add(pan));
cnt = cnt + 1;
}
addPanel();


You have some other problem. Adding a GridPanel to a TabPanel works.

Terrible
19 Oct 2009, 11:40 PM
With Test item as default panel, every other panel added runtime are correctly resized.
So my issue was starting with a empty tabpanel.

Thanks again and Sorry.

Animal
20 Oct 2009, 2:08 AM
Ah, yes, that is a known problem with Ext that I have reported and asked them to fix with a tiny, simple fix, but no response from them.

You can use the suggested fix here: http://www.extjs.com/forum/showthread.php?p=359481#post359481

To allow you to begin with an empty TabPanel, and only add tabs when you need them.

Terrible
20 Oct 2009, 4:18 AM
Thanks a lot --> Grazie tanto

Ciao