PDA

View Full Version : [NOREPRO] [4.0.7] flex error with dynamic loading, expected working behavior when using ext-all



daubman
17 Nov 2011, 9:40 AM
Ext version tested:

Ext 4.0.7-gpl
Browser versions tested against:

FF8.0 (firebug 1.9.0b1 installed)
DOCTYPE tested against:

HTML
Description:

I am working with a simple grid panel with grouped headers that was created in Designer 1.2.2-48 and exported. If I load ext-all-debug.js (or ext-all.js) and then load my exported designer.js everything works as expected. I have specified flex weights for each of my grouped header's sub-groups. When including ext-all-debug.js the grid appears and the groups are sized as desired.
If I specify ext-debug.js and allow the Loader to dynamically load dependencies, I receive the following error message in Firebug and the app does not load or display:

uncaught exception: Ext.grid.column.Column: items of a grouped header do not support flexed values. Each item must explicitly define its width.
(?)() Vml.js (line 693)
Vml.js() Vml.js (line 690)
if (!doc.namespaces.rvml) { Vml.js (line 693)

Steps to reproduce the problem:

Add a grid panel, adding grouped grids beneath a main grid heading
Set flex values on the grouped grids
Include ext-debug.js instead of ext-all-debug.js (ensuring Loader is enabled)
The result that was expected:

The grid will render correctly and no errors will be thrown
The result that occurs instead:

The grid only renders correctly (according to the flex values) when ext-all(-debug).js is loaded. The app will not load at all when using dynamic loading to load each individual class' .js file and the app dies loading Vml.js stating that flex values cannot be used on grouped headers (even though this both works as expected and does not error when loading the ext-all version of Ext JS)
Test Case:

This is the ui generated code from Designer showing how the gridpanel has been configured to generate the described error condition

/*
* File: app/view/ui/MyViewport.js
* This file was generated by Ext Designer version 1.2.2.
*/
Ext.define('LaunchEventWindow.view.ui.MyViewport', {
extend: 'Ext.container.Viewport',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
frame: true,
iconCls: 'icon-grid',
title: 'Launch Event Window',
forceFit: true,
store: 'lewStore',
columnLines: true,
viewConfig: {
},
selModel: Ext.create('Ext.selection.RowModel', {
}),
features: [
{
ftype: 'grouping'
}
],
columns: [
{
xtype: 'gridcolumn',
text: 'IDs',
columns: [
{
xtype: 'numbercolumn',
dataIndex: 'nID',
flex: 1,
text: 'ID',
format: 0
},
{
xtype: 'gridcolumn',
dataIndex: 'tID',
flex: 3,
text: 'Display ID'
}
]
},
{
xtype: 'gridcolumn',
text: 'Phase 1',
columns: [
{
xtype: 'datecolumn',
dataIndex: 'lTime',
flex: 3,
text: 'est. Time',
format: 'Y-m-d H:i:s'
},
{
xtype: 'numbercolumn',
dataIndex: 'lLat',
flex: 1,
text: 'Lat',
format: 0
},
{
xtype: 'numbercolumn',
dataIndex: 'lLon',
flex: 1,
text: 'Lon',
format: 0
}
]
},
{
xtype: 'gridcolumn',
text: 'Phase 2',
columns: [
{
xtype: 'datecolumn',
dataIndex: 'iTime',
flex: 3,
text: 'est. Time',
format: 'Y-m-d H:i:s'
},
{
xtype: 'numbercolumn',
dataIndex: 'iLat',
flex: 1,
text: 'Lat',
format: 0
},
{
xtype: 'numbercolumn',
dataIndex: 'iLon',
flex: 1,
text: 'Lon',
format: 0
}
]
}
]
}
]
});
me.callParent(arguments);
}
});


HELPFUL INFORMATION
The documentation of the flex field seems to indicate this is the exact case in which you would want to use flex (on child items of the container managed by the layout)
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Box-cfg-flex
(http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Box-cfg-flex)
Screenshot or Video:

attached
Debugging already done:

none
Possible fix:

not provided
Additional CSS used:

only default ext-all.css
Operating System:

Mac OS X 10.7.2 (Lion)

mitchellsimoens
19 Nov 2011, 2:44 PM
Can I get your store with data?

daubman
21 Nov 2011, 5:48 AM
Mitchell, this is occurring with an empty store (no data). (and while its not currently configured to load remote data via ajax, if it were, this error would occur before the ajax call).

Here's the current, exported-from-designer store config:


/* * File: app/store/lewStore.js
* Date: Wed Nov 16 2011 15:30:01 GMT-0500 (EST)
*
* This file was generated by Ext Designer version 1.2.2.
* http://www.sencha.com/products/designer/
*
* This file will be auto-generated each and everytime you export.
*
* Do NOT hand edit this file.
*/


Ext.define('LaunchEventWindow.store.lewStore', {
extend: 'Ext.data.Store',


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'lewStore',
proxy: {
type: 'ajax',
reader: {
type: 'array'
}
},
fields: [
{
name: 'nID',
type: 'int'
},
{
name: 'tID',
type: 'string'
},
{
dateFormat: 'timestamp',
name: 'lTime',
type: 'date'
},
{
name: 'lLat',
type: 'float'
},
{
name: 'lLon',
type: 'float'
},
{
dateFormat: 'timestamp',
name: 'iTime',
type: 'date'
},
{
name: 'iLat',
type: 'float'
},
{
name: 'iLon',
type: 'float'
},
]
}, cfg)]);
}

});

mitchellsimoens
21 Nov 2011, 6:28 AM
Thank you for that. I tested against our latest code and I don't get the error anymore but the headers aren't sized properly regardless of using ext.js or ext-all.js

daubman
22 Nov 2011, 2:00 PM
Mitchell,

Thanks for the reply!

So what is the correct way to configure a Grid Panel with grouped headers, where you want:
a) the Grid Panel to expand to fit the Viewport
b) the top (widest) headers to expand to fit their sub-columns
c) to set flex values on the sub-columns in b) so that they expand and contract proportionally to their configured flex "weights"

Alternately, is there a way to achieve this 'expand/contract proportionally to initially configured column width' without using flex?

Bottom line:
What is the correct way to setup forceFit on a grid with grouped columns? :-/
What will the FIX for this identified issue be FIXING?

Thanks again!
Aaron

mitchellsimoens
22 Nov 2011, 6:48 PM
flex on the columns is correct... I just don't get any JS errors in our latest code but the columns aren't sized properly or to the size I would expect at all.

terrycursh
22 Nov 2011, 8:20 PM
Dear M,
did u test it with IE?
I got the same problem~

mitchellsimoens
23 Nov 2011, 6:28 AM
Dear M,
did u test it with IE?
I got the same problem~

I got the errors in 4.0.7 but in our latest code (code that is newer than 4.1-PR1) which will be in the next release I am not getting the error... the bug report is for the columns not being sized correctly.