PDA

View Full Version : locked flag of column invalidates the deactivate and beforehide event handler of grid



tailinxue
6 Apr 2014, 5:53 PM
/*
Dear Sir or Madam,


I just had a chance to evaluate the ExtJS framework. My purpose was to test a way for the UI to get refreshed automatically after user selects or de-selects multiple columns on a grid panel's drop down column selection menu. I took your tutorial data from web as my test data (http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/locking-grid.js). I thought that I might be able to capture beforehide or deactivate event to realize my implementatoin goal: if I could capture beforehide or deactivate event, then it would be possible for me to make back end call and get the refreshed data from server, and then refresh/rerender the UI. But, there seems a bug in ExtJS framework. Please look at the source codes below:
*/
//--------------------------------------------------------------------
//http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/locking-grid.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'],
['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
});


// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columnLines: true,
columns: [{
text : 'Company',
//locked : true, //TX: please test the present or absent of locked flag
//locked : false, //TX: please test the present or absent of locked flag
width : 200,
sortable : false,
dataIndex: 'company'
},{
text : 'Price',
width : 125,
//locked : false, //TX: please test the present or absent of locked flag
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
}
});
//TX: my implementation for automatic refresh of UI after user select/deselect multiple columns
var columnHeaders = grid.headerCt;
//TX: if any one column is presented with locked flag, columnHeaders will be undefined
console.log("columnHeaders=" + columnHeaders);
columnHeaders.on({
menucreate: function(g, menu) {
menu.on({
/* TX: when column selection/de-selection drop down menu is
closed, the following event could be triggered
only when locked flag on column is absent */

deactivate: function(){
console.log("deactivate");//Goes here: make back end call to refresh UI
},
beforehide: function(){
console.log("beforehide");//Or, Goes here: make back end call to refresh UI
}
});

return true;
}
});


});
//----------------------------------------------------------
/*
As you may see from above source code, when locked flag is present, regardless true or false, the columnHeaders will be undefined, therefore, the deactivate or beforehide event can't be caught.


So, my questions are:
(1), It the above mentioned issue a bug in ExtJS framework? How to fix? Do you have any work around? How to implement UI automatic refresh after user select/deselect multiple columns from the column header pull down menu?
(2), Is my way of implementing automatic UI fresh correct or wrong? If my way is wrong, could you please give a right way to implement it? In your tutorial data, there are only 5 columns, but in the real world, there can be many hundreds of columns, so it would be convenient for the user to make arbitrary column selection/deselection and then update the UI when user's mouse click away from the colum select drop down menu.


Thanks and Best Regards,


Tailin
*/

Gary Schlosberg
8 Apr 2014, 8:38 AM
I placed your code into this Fiddle:
https://fiddle.sencha.com/#fiddle/4t8

It seems to run as expected. In which version of ExtJS are you seeing this issue?