PDA

View Full Version : GridPanel not rendering properly



csextjs
22 Sep 2010, 9:23 AM
Hi Everyone,

I have problem with GridPanel inside a container.
How can I get the scroll bar and have the grid take/fill up the whole container?
Read the docs, searched the forum, and tried with many different configs, but couldn't do it.

Thank you.



Ext.ns("CST");

CST.InvoiceManager = Ext.extend(Ext.Container, {
monitorResize: true,
layout : 'fit',
border : false,
autoScroll: true,
autoHeight: true,

defaults: {
forceFit:true,
flex: 1
},

initComponent : function() {
this.items = [
this.buildList()
];

CST.InvoiceManager.superclass.initComponent.call(this);
},
buildList : function() {
return {
xtype : 'invoicegridpanel',
itemId : 'invoiceGridPanel',
singleSelect: true,
flex : 1,
loadMask:true,
listeners : {
scope : this
}
};
}
});
Ext.reg('invoicemanager', CST.InvoiceManager);

CST.grid.InvoiceGridPanel = Ext.extend(Ext.grid.GridPanel, {
url : 'invoice/list',
stripeRows : true,
flex : 1,
columns : [
{
header : 'id',
dataIndex : 'id',
hidden : true
},
{
header : 'Invoice No.', width: 70,
sortable : true,
dataIndex : 'invoiceno'
},
{
header : 'Date', width: 75,
renderer : clarionDate,
dataIndex : 'invoicedate'
},

{
header : '', width: 30,
align : 'center',
dataIndex : 'invoicestat'
},
{
header : 'Company', width: 200,
dataIndex : 'company'
},
{
header : 'SM', width: 30,
dataIndex : 'smid'
}
],

initComponent : function() {
this.store = this.buildStore();
this.bbar = this.pagingbar();
CST.grid.InvoiceGridPanel.superclass.initComponent.call(this);
},

buildStore : function() {
var store = new Ext.data.JsonStore({
url : this.url,
remoteSort: true,
fields : [], //comes from server
sortInfo : {
field : 'invoiceno',
dir : 'ASC'
}
});
return(store);
},

loadData : function(d) {
return this.store.loadData(d);
},
load : function(baseP){
this.store.baseParams = {custcode: baseP};
this.store.load({params:{start: 0, limit: 25, sort: 'invoiceno', dir:'asc'}});
},
getSelected : function() {
return this.selModel.getSelections();
},
pagingbar: function(){
var pb=new Ext.PagingToolbar({
pageSize : 25,
store : this.store,
displayInfo : true,
displayMsg : 'Displaying {0} - {1} of {2}',
emptyMsg : "No records available"
});
return(pb);
}
});
Ext.reg('invoicegridpanel', CST.grid.InvoiceGridPanel)

jay@moduscreate.com
22 Sep 2010, 10:30 AM
Clean looking code, except:


defaults: {
forceFit:true,
flex: 1
}, are not valid configurations for fit layout.

It seems that invoicemanager is needless.

csextjs
22 Sep 2010, 10:42 AM
Thanks Jay.

Well I've tried w/o invoicemanager and put the invoicegridpanel directly on a Panel(with card layout), but still the same result.
BTW, if I give a height, it renders correctly. This leaves unused space below the grid.

I am running out of the ideas.

p.s. I took out the defaults you've mentioned but still same

jay@moduscreate.com
22 Sep 2010, 10:43 AM
Is there any way you could post the layout code inside of pastebin.com or something?

csextjs
22 Sep 2010, 11:09 AM
I've put the code you've requested in pastebin.com under wkim/csextjs.

Thanks again Jay.

jay@moduscreate.com
22 Sep 2010, 11:10 AM
Can you please post a direct link? :( I couldn't find it.

csextjs
22 Sep 2010, 11:17 AM
Sorry. Here it is:

http://pastebin.com/uhRnfs2j

jay@moduscreate.com
22 Sep 2010, 11:34 AM
I don't see how the grid panel is part of the center grid. Also, i don't see the tabpanel in the cardpanel. :-\

csextjs
22 Sep 2010, 11:44 AM
Also, i don't see the tabpanel in the cardpanel. :-\
Can I just put the container(invoicemanager) on cardpanel without a tabpanel?
On your book, you had put panels inside the cardPanel.

Thanks for your time. I will struggle with it more.

jay@moduscreate.com
22 Sep 2010, 11:49 AM
You certainly can. :)

Are you separating out your classes into files organized by namespace?

csextjs
22 Sep 2010, 12:01 PM
No, I'm not.
Should I do that?

jay@moduscreate.com
22 Sep 2010, 12:21 PM
yes :)

Here is how i broke it down in my project.

http://tdg-i.com/img/screencasts/2010-09-22_1620.png

csextjs
22 Sep 2010, 1:07 PM
Thanks Jay.
I finally found a solution.
Basically, I was over nesting more than needed and along the way some things were not config correctly.