PDA

View Full Version : Borderlayout relative Width



charleshimmer
18 Aug 2008, 4:53 PM
I have two grids I need to display side by side and I've tried several of the layout options and can't get any of them to work that way I need them too. If I have two empty panels it works great, but as soon as I put my grids in IE messes it up pretty bad. It works find in FF.

Here is my viewport.


Ext.onReady(function(){

Ext.QuickTips.init();

var viewport = new Ext.Viewport({
layout: 'border',
border:false,
items:[new Ext.BoxComponent({
// Header
region: 'north',
el: 'header',
height:32,
margins: '10 25 0 55'
}),{
// Content
region: 'center',
margins: '0 15',
autoScroll:true,
layout: 'row-fit',
border: false,
items:[{
xtype: 'panel',
layout: 'border',
border: false,
items:[{
// Top Left Panel
title: 'Inflow',
region: 'west',
width:'50%',
margins:'0 10 10 0'
},{
// Top Right Panel
title: 'Balances',
region:'center',
width:'50%',
margins:'0 0 10 0'
}]
},{
// Middle Panel (Meter)
xtype: 'panel',
title:'Budget Meter',
html:'meter bar',
height:100,
collapsible:true
},{
xtype: 'panel',
layout: 'border',
border: false,
width:'100%',
items:[{
// Bottom Left
xtype: 'variableGrid',
title: 'Variable Outflows',
region: 'center',
split: true,
margins:'10 10 0 0'
},{
// Bottom Right
xtype: 'variableGrid',
title: 'Fixed Outflows',
region:'east',
width: '50%',
split: true,
margins:'10 0 0 0'
}]
}
]
},
// Footer
new Ext.BoxComponent({
region: 'south',
el: 'footer',
height:42,
margins: '10 25 0 55'
})]
});
});Here is my grid

Ext.ns("Ext.ux.grid.VariableOutflow");

Ext.ux.grid.VariableOutflow = Ext.extend(Ext.grid.EditorGridPanel,
{
/* Public Access
*******************************/
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
store: new Ext.data.JsonStore({
url: 'month/get_outflow/variable',
baseParams: {method:'post'},
root: 'rows',
autoLoad: true,
fields:['id',
'category',
{name:'budget', type: 'float'},
{name:'spent', type: 'float'},
{name:'difference', type: 'float'},
{name:'pctUsed', type: 'float'},
{name:'recordedCount', type: 'float'}]
}),

initComponent:function()
{
/* Private Variables
*******************************/
Ext.apply(this,
{
clicksToEdit:1,
columns:[{id:'category', header: "Category", sortable: true, dataIndex: 'category', editor: new Ext.form.TextField({allowBlank: false,maxLength: 45})},
{header: "Budget", sortable: true, renderer: 'usMoney', dataIndex: 'budget', editor: new Ext.form.NumberField({allowBlank: false,decimalSeparator : '.',allowDecimals: true,allowNegative: false,blankText: '0',maxLength: 11})},
{header: "Spent", sortable: true, renderer: 'usMoney', dataIndex: 'spent'},
{header: "$ Budget Left", sortable: true, dataIndex: 'difference'},
{header: "% Budget Used", sortable: true, dataIndex: 'pctUsed'},
{header: "", width:20, sortable: true, dataIndex: 'recordedCount'}],
stripeRows: true,
autoExpandColumn: 'category',
autoExpandMin:70,
loadMask: true,
tbar:[{
text:'Add Category',
tooltip:'Add a new variable outflow category.',
iconCls:'add'
//,handler: this.showAddWindow
}, '-',{
text:'Remove Category',
tooltip:'Remove the selected category.',
iconCls:'remove'
//,handler: function(){Ext.MessageBox.confirm('Confirmation','Do you want to delete the category \'' + VarOutflowGrid.prototype.getSelectionModel().getSelected().get('category') + '\'', VarOutflowGrid.prototype.delete);}
}],
iconCls:'icon-grid'
});

Ext.ux.grid.VariableOutflow.superclass.initComponent.apply(this, arguments);

// after parent code here, e.g. install event handlers

}

,onRender:function()
{

// before parent code
//this.store.load();
// call parent
Ext.ux.grid.VariableOutflow.superclass.onRender.apply(this, arguments);

// after parent code, e.g. install event handlers on rendered components

}

// any other added/overrided methods

});

Ext.reg('variableGrid', Ext.ux.grid.VariableOutflow); Any help would be appreciated. I've worked on this one for awhile and am feeling pretty stuck.

mjlecomte
18 Aug 2008, 5:24 PM
screenshots?

charleshimmer
18 Aug 2008, 5:36 PM
Here are some screenshots. You can't see it really well in the IE picture, but the grids are loading just fine, they are just much wider than their panel.

p.s. thanks for replying.

mjlecomte
18 Aug 2008, 5:40 PM
You checked for trailing commas? It looks like the grids aren't even there.

Did you say you tested this with empty panels to remove the 'grid' issue?

charleshimmer
18 Aug 2008, 5:58 PM
Yeah, I've ran the code through Jslint.com and it checked out. The grids do come in in IE, they are just way too wide. I can put a fixed width on them (i.e. width:500px) and you can see them ok. What puzzles me is that the boxes on top work just fine with width being set to 50% in IE, FF, and Safari but when the bottoms ones have grids in them IE's width goes all haywire.

And yes, if I take the grids out (i.e. empty grids) it renders the width:50% just fine.