PDA

View Full Version : [FIXED] [4.1B3] Locking grid + stateful broken



mankz
28 Feb 2012, 8:50 AM
Basic locking grid, + cookie provider.


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'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '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
});

Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
stateId : 'fo',
stateful : true,
store: store,
columnLines: true,
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'
}],
height: 350,
width: 600,
title: 'Locking Grid Column',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
});

toMap method expects an array as first argument. lockedHeaderCt.items is a MixedCollection...


applyColumnsState: function (columns) {
var me = this,
lockedGrid = me.lockedGrid,
lockedHeaderCt = lockedGrid.headerCt,
normalHeaderCt = me.normalGrid.headerCt,
lockedCols = Ext.Array.toMap(lockedHeaderCt.items, 'headerId'),
normalCols = Ext.Array.toMap(normalHeaderCt.items, 'headerId'),

mitchellsimoens
28 Feb 2012, 6:54 PM
Thanks for the report.

PHaroZ
29 Mar 2012, 3:08 AM
I've a similar issue with a classic grid.

I think this is due to the selectionModel checkboxmodel which generate a new column with en errornous config.

I can fix it with this override:


Ext.override(Ext.selection.CheckboxModel, {
getHeaderConfig : function() {
return Ext.apply(this.callParent(arguments), {
getColumnState : function() {
return false;
}
});
}
});

PHaroZ
4 Apr 2012, 4:48 AM
same issue with Ext.ux.RowExpander which add to an additionnal column

mankz
6 May 2012, 10:15 PM
bump, still broken in 4.1

agunescu
13 Nov 2012, 2:19 AM
Any new updates on this one please?

mankz
21 Jan 2013, 12:55 AM
This is marked as fixed, just checked nightlies and it's still broken for a tree using TreeStore.


getState: function(){
var me = this,
state = me.callParent(),
storeState = me.store.getState();

getState is added to 'Ext.data.Store', either put it on AbstractStore or dupe it in TreeStore.

avcmc
21 Jan 2013, 1:40 AM
As mentioned - "Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJSIV-5482 in 4.2."

Currently things are not working in 4.1.3 and this is becoming a show-stopper for us. Thus, could a workaround be shared if possible?

Also, any idea on probable release date of 4.2?

Thanks

mankz
22 Jan 2013, 1:32 AM
Test case (crashes, use the stop at exception setting in chrome):


Ext.Loader.setConfig({
enabled: true
});Ext.Loader.setPath('Ext.ux', '../ux');

Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*',
'Ext.ux.CheckColumn'
]);

Ext.onReady(function() {
Ext.QuickTips.init();
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
//we want to setup a model and store instead of using dataUrl
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'},
{name: 'done', type: 'boolean'}
]
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
sorters : 'task',
proxy: {
type: 'ajax',
//the store will get the content from the .json file
url: 'treegrid.json'
},
folderSort: true
});

//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: false,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
stateful : true,
id : 'foo',

//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Task',
width: 200,
sortable: true,
dataIndex: 'task',
locked : true
},{
//we must use the templateheader component so we can use a custom tpl
xtype: 'templatecolumn',
text: 'Duration',
flex: 1,
sortable: true,
dataIndex: 'duration',
align: 'center',
//add in the custom tpl for the rows
tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
formatHours: function(v) {
if (v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
text: 'Assigned To',
flex: 1,
dataIndex: 'user',
sortable: true
}, {
xtype: 'checkcolumn',
header: 'Done',
dataIndex: 'done',
width: 40,
stopSelection: false
}, {
text: 'Edit',
width: 40,
menuDisabled: true,
xtype: 'actioncolumn',
tooltip: 'Edit task',
align: 'center',
icon: '../simple-tasks/resources/images/edit_task.png',
handler: function(grid, rowIndex, colIndex, actionItem, event, record, row) {
Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task'));
},
// Only leaf level tasks may be edited
isDisabled: function(view, rowIdx, colIdx, item, record) {
return !record.data.leaf;
}
}]
});
});

dongryphon
22 Jan 2013, 10:08 PM
@Mankz -

Thanks for the heads up on the regression this caused - that is being tracked as EXTJSIV-8284.

@avcmc -

The code support for grid feature statefulness is quite extensive. My recommendation is to turn off statefulness on such components in 4.1.x.

As for 4.2 release, we have one big push here for final beta / RC - so hopefully "very soon" for that. The GA date is somewhat dependent on what that release turns up.

vinaythube
28 May 2013, 4:39 AM
Hi,
In our project we used extjs 4.1.1. We are facing the same problem. This bug has been fixed in 4.2.0.
Is there any way to fix this bug in 4.1.1 instead of migrating to the newer version, as there are too many chnages need to be done with newer version.

Please help...