PDA

View Full Version : [CLOSED]Minimised columns on 1st display



bello
30 Jan 2010, 7:41 AM
Hi. When I first display my screen the columns are all squashed to minimum size at left : see attached screenshot. I'm obviously doing something wrong/stupid : any ideas ?

This is the HTML :

Ext.onReady(function()
{
var viewport = new Ext.Viewport
(
{
layout: 'border',
items:
[
new Ext.TabPanel
(
{
region: 'center',
width: '100%',
deferredRender: false,
activeTab: 0,
items:
[
{
contentEl: 'center_div_outgoings',
title: 'Outgoings',
closable: false,
autoScroll: true
}
]
}
)
]
}
);
});

And this is the relevant part of the javascript :

var cm = new Ext.grid.ColumnModel
(
{
columns:
[
{header: "hPurchaseID", hidden: true, dataIndex: 'OutPurchaseID'},
{header: "hPurchaseProductID", hidden: true, dataIndex: 'OutPurchaseProductID'},
{header: "Purchase Date", width: 20, sortable: true, align: 'center', renderer: Ext.util.Format.dateRenderer('d/m/Y'),
dataIndex: 'OutPurchaseDate',
editor: {
xtype: 'datefield',
format: 'd/m/Y',
allowBlank: false,
minValue: '01/01/2007',
minText: 'Can\'t have a purchase date this early',
maxValue: (new Date()).format('d/m/Y'),
maxText: 'Can\'t have a purchase date later than today'
}
},
{header: "Supplier", width: 25, sortable: true, align: 'left', dataIndex: 'OutPurchaseSupplier',
editor: {
xtype: 'textfield', allowBlank: false
}
},
{header: "Description", width: 25, sortable: true, align: 'left', dataIndex: 'OutProductDescription',
editor: {
xtype: 'textfield', allowBlank: false
}
},
{header: "Quantity", width: 15, sortable: true, align: 'center', dataIndex: 'OutPurchaseQuantity',
editor: {
xtype: 'textfield', allowBlank: false
}
},
{header: "Unit Price", xtype: 'numbercolumn', width: 15, sortable: true, align: 'right', format: '0.00',
dataIndex: 'OutPurchaseUnitPrice',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 99999
}
},
{header: "Total Cost", xtype: 'numbercolumn', width: 15, sortable: true, align: 'right', format: '0.00',
dataIndex: 'OutPurchaseTotalCost',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 99999
}
},
{header: "hProductID", hidden: true, dataIndex: 'OutProductID'},
{header: "Unit", width: 15, sortable: true, align: 'center', dataIndex: 'OutProductUnitDescription',
editor: {
xtype: 'textfield', allowBlank: false
}
},
{header: "Divisor", xtype: 'numbercolumn', width: 10, sortable: true, align: 'right', format: '0.00',
dataIndex: 'OutProductUnitDivisor',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 99999
}
},
{header: "Net Unit Cost", width: 25, sortable: true, align: 'right', dataIndex: 'OutPurchaseNetUnitCost'}
],
defaults:
{
sortable: true,
menuDisabled: false
}
}
);

var ext_grid = Ext.grid; // instantiate new grid

var ext_grid_Outgoing = new ext_grid.GridPanel
(
{ // start of grid panel for OUTGOINGS
plugins: [editor_Outgoing],
store: new Ext.data.GroupingStore
(
{ // - start of grid panel store
reader: reader_Outgoing,
data: ext_grid.grid_OutData,
sortInfo:{field: 'OutPurchaseDate', direction: "ASC"},
groupField:'OutProductDescription'
}
), // - end of grid panel store
cm: cm,
view: new Ext.grid.GroupingView({ // - start of grid panel grouping view
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "purchases" : "purchase"]})'
}), // - end of grid panel grouping view
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
frame:true,
autoHeight:true,
autoWidth: true,
collapsible: true,
animCollapse: false,
title: 'OUTGOINGS',
iconCls: 'icon-grid',
tbar:
[
{
text: 'Add',
iconCls: 'icon-user-add',
handler : function()
{
var recordOutgoing = new rec_Outgoing
(
{
TBankID : 3,
// etcetera for remaining fields
TCheque: 22222
}
);
editor_Outgoing.stopEditing();
ext_grid_Outgoing.store.insert(0, recordOutgoing);
ext_grid_Outgoing.getView().refresh();
ext_grid_Outgoing.getSelectionModel().selectRow(0);
editor_Outgoing.startEditing(0);
}
},
{
text: 'Delete',
iconCls: 'icon-user-delete',
handler : function()
{
if (ext_grid_Outgoing.getSelectionModel().hasSelection())
{
editor_Outgoing.stopEditing();
var out_selections = ext_grid_Outgoing.getSelectionModel().getSelections();
for(var i = 0, r; r = out_selections[i]; i++)
{
ext_grid_Outgoing.store.remove(r);
}
}
}
}
],
renderTo: 'center_div_outgoings'
}); // end of grid panel for OUTGOINGS



Any suggestions gratefully received as I'm in the dark here.

Elijah
30 Jan 2010, 12:25 PM
I am guessing the problem is the following.
1. Your initial load has no data.
2. You have your headers being set to values of 'width: 25' and 10, 15 etc. these are really narrow
3. When your data is retrieved it then pushes the column widths out.

Suggest trying to set the width: 25 to something else such as 200 and test what occurs

bello
30 Jan 2010, 6:00 PM
Thanks Elijah ! Great result. Setting the column widths solved the problem : I had the idea that width referred to number of characters.