Problem with border layout and grid panel

[advarot]

Hi,
I'm working with extjs 2.1,
I'm trying to have a border layout - this one I succeeded.
But then I tries to put more complex objects in each region and this fails.
At the beginning I trying creating the GridPanel and Panel separately and assign them ot the layout which failed.
then I tried using the xtype, this also didn't work.
Here the code I have:


insuranceContainer = new Ext.Viewport({
renderTo: 'insurance',
layout: 'border',
items: [{
title: 'Insured Information',
html: '<p>Cell Insured Information content</p>',
region: 'center'
},{
title: 'Agent Information',
html: '<p>Cell Agent Information content</p>',
width:300,
region: 'east'
},{
title: 'Policies',
//This part worked!!! html: '<p>Cell Policies content</p>',
width:600,
height: 150,

xtype: 'panel',
columns: createPoliciesColumnModel(),
region: 'south'
}
]
});




insuranceContainer.setVisible(true);
insuranceContainer.doLayout();
insuranceContainer.show();

function createPoliciesColumnModel(){

var cm = new Ext.grid.ColumnModel([
{
//Policy#
id: 'policyId',
header:'Policy#'
,sortable:true
,width: 100
,align: 'left'
,hideable: false

},
{
//Type
id: 'type'
,header:'Type'
,sortable:true
,align: 'left'
,width: 70
},
{
//PolicyHolder
id: 'policyHolder',
header:'PolicyHolder'
,sortable:true
,width: 100
,align: 'left'
},
{
//Relationship
id: 'relationship',
header:'Relationship'
,sortable:true
,width: 100
,align: 'left'
},
{
//Status
id: 'status',
header:'Status'
,sortable:true
,width: 70
,align: 'left'
},
{
//Agent Info
id: 'agentInfo',
header:'Agent Info.'
,sortable:true
,width: 200
,align: 'left'
}
]);
return cm;
}

[Animal]

USE the GridPanel as one of the regions.

Configure it with a region property, and use it as an item.

This is how managed layouts work.

Containers contain Components (remember that Containers are also Components, and so you can nest Containers inside each other to create complex pages)

[Animal]

Join date August 2009?

You should be using Ext 3.0.

[advarot]

maybe I'm missing something....but I have a panel, I also tried giving the xtype 'gridpanel' but it didn't work...
This is the south region in the layout:
{
title: 'Policies',
//This part worked!!! html: '<p>Cell Policies content</p>',
width:600,
height: 150,
xtype: 'panel',
columns: createPoliciesColumnModel(),
region: 'south'
}

[Animal]

"work"? And where do you suppose it gets its data from to work with?

[advarot]

:)

[Animal]

Don't bother with width of a south region. Does it get used?

[advarot]

when i give the region html it shows me the html.
when i set it to be panel or gridpanel, its empty, even though I didn't define store, should I see and empty table or something like that...?

[Animal]

How are you checking for errors thrown by your code? Firebug?

[advarot]

I'm working with IE....so my javascript debug is on

[Animal]

So you have NO IDEA what errors could be going on then.

You simply can NOT develop like that.

[advarot]

I do have debugger and I do get javascript errors if there is an exception thrown.
I have been working like this for very long time.
Why do you think I do not get errors?
do you have an example of grid panel inside a border layout?

[Condor]

You don't get an error, because your south region is now an Ext.Panel (that simply ignores the 'columns' config option).

You want an Ext.grid.GridPanel (xtype:'grid'), but that one not only requires columns, but also a store!

ps. You can't use renderTo in an Ext.Viewport. It will always be applied to the document body.

[advarot]

Thanks Condor!
but its still does not work,
I don't even get any errors...
Do I have to implement the server side controller? I'm just trying to build a UI...don't want to mess with server side yet....
this is the new code,

insuranceContainer = new Ext.Viewport({

layout: 'border',
items: [{
title: 'Insured Information',
html: '<p>Cell Insured Information content</p>',
region: 'center'
},{
title: 'Agent Information',
html: '<p>Cell Agent Information content</p>',
width:300,
region: 'east'
},{
title: 'Policies',

height: 150,

xtype: 'gridpanel',
store: createPoliciesStore(),
columns: createPoliciesColumnModel(),
region: 'south'
}
]
});

function createPoliciesStore(){

policiesStore = new Ext.data.JsonStore({
root:'policiesData',
totalProperty: 'total',
fields: [
{name: 'policyId'},
{name: 'type', type: 'string'},
{name: 'policyHolder', type: 'string'},
{name: 'relationship', type: 'string'},
{name: 'status', type: 'string'},
{name: 'agentInfo', type: 'string'}
],
url: INSURANCE_JSON_URL
});


return policiesStore;
}

[Condor]

The xtype for GridPanel is 'grid' (see here (http://extjs.com/deploy/dev/docs/?class=Ext.Component)).

[advarot]

Hi,
Now i do get undefined exception for the following code in ext-all-debug.js line 30759,
cm is undefined for some reason, though I did debug my own code and saw the ColumnModel get created correctly. Any idea what this means?
render : function(){

var cm = this.cm;
var colCount = cm.getColumnCount();

if(this.autoFill){
this.fitColumns(true, true);
}else if(this.forceFit){
this.fitColumns(true, false);
}else if(this.grid.autoExpandColumn){
this.autoExpand(true);
}

this.renderUI();
},

Thanks
Adva

[Condor]

Read the API docs more carefully.

You can specify a column array using the 'columns' config option or you can specify a ColumnModel instance using the 'cm' (or 'colModel') config option.

[advarot]

Thanks!! it works!!