PDA

View Full Version : RowExpander Demo Broken?



joefox
14 Feb 2010, 11:22 AM
I copied the RowExpander from the demos, but when i try it, it looks fine, gets data fine, and does the row expand fine, however, throws an error in IE7 and IE8 saying line 237 dosent support this property or method.

ANy ideas?


<head>
<link href="plugins/runtime/styles/vista/aw.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/RowExpander.js"></script>

<script type="text/javascript">

function create_grid(){
Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;

// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance']
];

// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]);

var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<p><b>Company:</b> {company}</p><br>',
'<p><b>Summary:</b> {desc}</p>'
)
});

var grid1 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel({
defaults: {
width: 20,
sortable: true
},
columns: [
expander,
{id:'company',header: "Company", width: 100, dataIndex: 'company'},
{header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", dataIndex: 'change'},
{header: "% Change", dataIndex: 'pctChange'},
{header: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
}),
viewConfig: {
forceFit:true
},
width: 600,
height: 300,
plugins: expander,
collapsible: true,
animCollapse: false,
title: 'Expander Rows, Collapse and Force Fit',
iconCls: 'icon-grid',
renderTo: document.body
});
});
}
</script>
</head>
<body>
<a href="javascript: void(0)" onclick="create_grid()">Create It</a>
</body>

joefox
14 Feb 2010, 6:27 PM
anyone?

bclinton
14 Feb 2010, 10:45 PM
Your code works fine for me in IE8 on Windows XP.

Have you tried an IE javascript debugger like Companion.js so you might get a more detailed error with a trace?

joefox
15 Feb 2010, 8:46 AM
So in firefox i get this:

Ext.preg is not a function
RowExpander.js()RowExpander.js (line 237)


Ext.preg('rowexpander', Ext.ux.grid.RowExpander);

any idea?
Everything seems to work fine though...

bclinton
15 Feb 2010, 11:27 AM
So in firefox i get this:

Ext.preg is not a function
RowExpander.js()RowExpander.js (line 237)


Ext.preg('rowexpander', Ext.ux.grid.RowExpander);

any idea?
Everything seems to work fine though...


Since your code is working fine for me in both IE and Firefox (no error or warnings in Firebug) I'm not sure, but could it be something with your script tags? Like are you sure your paths to the appropriate ext libraries are correct?

Also, you should be using the debug libraries (ext-all-debug.js and adapter/ext/ext-base-debug.js ) while you are in development.