PDA

View Full Version : Column lock in dynamic grid



radmila80
10 Dec 2012, 7:16 AM
Hello, I have dynamic grid that I created using reconfigure() method. However, after grid is created locked columns are not frozen in the layout. I took sample code from extjs examples and reproduced the problem. Please let me know if there is a way to maintain locked columns after reconfiguing the grid.

html:

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Locking Grid Column Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />


<!-- GC -->


<script type="text/javascript" src="../../ext-all.js"></script>


<!-- page specific -->
<script type="text/javascript" src="locking-grid - Copy.js"></script>
</head>
<body>
<h1>Locking Grid Column Example</h1>
<p>This example shows how to achieve "freeze pane" locking functionality similar to Excel.</p>
<p>Note that the js is not minified so it is readable. See <a href="locking-grid.js">locking-grid.js</a>.</p>
<div id="grid-example"></div>
</body>
</html>


js:

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


Ext.onReady(function() {
Ext.QuickTips.init();


// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am']
];


/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}


/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}


// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});

var columns = [{
text : 'Company<br>Name', // Two line header! Test header height synchronization!
locked : true,
width : 200,
sortable : false,
dataIndex: 'company'
},{
text : 'Price',
width : 125,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},{
text : 'Change',
width : 125,
sortable : true,
renderer : change,
dataIndex: 'change'
},{
text : '% Change',
width : 125,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},{
text : 'Last Updated',
width : 135,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}];
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columnLines: true,
columns: [],
height: 350,
width: 600,
title: 'Locking Grid Column',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});


grid.reconfigure(store, columns);
});

mitchellsimoens
12 Dec 2012, 8:15 AM
What Ext JS 4.x.x version are you using?

radmila80
12 Dec 2012, 8:18 AM
I'm using ext-4.1.1

radmila80
12 Dec 2012, 8:29 AM
I noticed that if I set default into columns like



var grid = Ext.create('Ext.grid.Panel', {
store: store,
columnLines: true,
columns: [{locked:true}],
height: 350,
width: 600,
title: 'Locking Grid Column',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
} });

then columns will be locked after reconfigure. However while that works in sample code in my production code using this approach results in "Uncaught TypeError: Cannot read property 'xtype' of undefined" in "xtype = config.xtype;" on line 5079 of ext-all-debug.js. So i'm looking for a way to lock columns without having to set default in columns property.