PDA

View Full Version : Problem with border layout and grid panel



advarot
5 Aug 2009, 7:10 AM
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
5 Aug 2009, 7:13 AM
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
5 Aug 2009, 7:14 AM
Join date August 2009?

You should be using Ext 3.0.

advarot
5 Aug 2009, 7:17 AM
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
5 Aug 2009, 7:18 AM
"work"? And where do you suppose it gets its data from to work with?

advarot
5 Aug 2009, 7:19 AM
:)

Animal
5 Aug 2009, 7:19 AM
Don't bother with width of a south region. Does it get used?

advarot
5 Aug 2009, 7:21 AM
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
5 Aug 2009, 7:22 AM
How are you checking for errors thrown by your code? Firebug?

advarot
5 Aug 2009, 7:23 AM
I'm working with IE....so my javascript debug is on

Animal
5 Aug 2009, 7:29 AM
So you have NO IDEA what errors could be going on then.

You simply can NOT develop like that.

advarot
5 Aug 2009, 11:08 PM
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
5 Aug 2009, 11:56 PM
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
6 Aug 2009, 12:09 AM
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
6 Aug 2009, 12:26 AM
The xtype for GridPanel is 'grid' (see here (http://extjs.com/deploy/dev/docs/?class=Ext.Component)).

advarot
6 Aug 2009, 1:22 AM
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
6 Aug 2009, 1:35 AM
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
6 Aug 2009, 2:47 AM
Thanks!! it works!!