PDA

View Full Version : Locked Column problem extjs 4.1



SD-RMX
24 Jun 2012, 5:49 AM
I am trying to put grid in extjs 4.1 with locking feature
See the code below .
When defining column with locked feature
var column = {"text":"Company","sortable":true,**locked:true**,"dataIndex":"company","width":350,"filterable":false};
I received following error
**Uncaught TypeError: Cannot read property 'internalId' of undefined**
Here is html code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id ="divGrid"></div>
<script src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">

Ext.require(['Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*']);

Ext.BLANK_IMAGE_URL = 'Images/s.gif';
Ext.onReady(function () {

Ext.Loader.setConfig({ enabled: true });


var data = {
gridData:
[{ "company": "3m Co", "price": 71.72, "change": 0.02, "pctChange": 0.03, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "Alcoa Inc", "price": 29.01, "change": 0.42, "pctChange": 1.47, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "Altria Group Inc", "price": 83.81, "change": 0.28, "pctChange": 0.34, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "American Express Company", "price": 52.55, "change": 0.01, "pctChange": 0.02, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "American International Group, Inc.", "price": 64.13, "change": 0.31, "pctChange": 0.49, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "AT&T Inc.", "price": 31.61, "change": -0.48, "pctChange": -1.54, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "Boeing Co.", "price": 75.43, "change": 0.53, "pctChange": 0.71, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "Caterpillar Inc.", "price": 67.27, "change": 0.92, "pctChange": 1.39, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "Citigroup, Inc.", "price": 49.37, "change": 0.02, "pctChange": 0.04, "lastChange": "2012-04-11T21:41:43.105Z" }, { "company": "E.I. du Pont de Nemours and Company", "price": 40.48, "change": 0.51, "pctChange": 1.28, "lastChange": "2012-04-11T21:41:43.105Z"}]

};

var columns = [];
var column =
{"text":"Company","sortable":true,"dataIndex":"company","width":350,"filterable":false,locked:true}
;

columns.push(column);


var fields = [];
fields.push({ name: "company" });

var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: fields,
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'gridData'
}
}
});

grid = Ext.create('Ext.grid.Panel', {
store: store,
selModel: Ext.create('Ext.selection.RowModel', { singleSelect: true, selectFirstRow: true }),
columnLines: true,
layout: 'fit',
renderTo:"divGrid",
columns: columns,
loadMask: false,
height: 500,
width: 500,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
viewConfig: {
loadMask: false,
id: "grid",
stripeRows: true
}
});


});
</script>

</body>

</html>

Animal
24 Jun 2012, 8:20 AM
What happens when you set the debugger to break on all errors?

Romick
25 Jun 2012, 5:53 AM
Hi!
I think the problem is that you set up id in wrong place. Try this:

viewConfig: {
loadMask: false,
//id: "grid",//don't do it here. It crashes here.
stripeRows: true
}