PDA

View Full Version : plugin problem with grid



newusername
7 Feb 2014, 2:58 AM
Hi ,
I am writting plugin for column's width which is to be set based on it's content. But unfortunately it sets width for second and third column but for first it doesn't .

Following is the code . I am using EXT 4.2.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>GridWithAutoColumnWidthPlugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link rel="stylesheet" type="text/css"
href="js/resources/css/ext-all.css">

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

<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisaa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homerrt', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Margefghj', "email":"marge@simpsons.com", "phone":"555-222-125412345545" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
//autoScroll : true,
//overflowY: 'scroll',
//overflowX: 'scroll',
columns: [
{ text: 'Name', dataIndex: 'name'},
{ text: 'Email', dataIndex: 'email'},
{ text: 'Phone', dataIndex: 'phone'}
],
height: 200,
width: 200,
margin : 20,
plugins : ['columnautowidth'],
renderTo: Ext.getBody()
});
});

</script>
</head>
<body>

</body>
</html>



Plugin :




Ext.define('my.ColumnAutoWidth', {
extend : 'Ext.AbstractPlugin',
alias : 'plugin.columnautowidth',

constructor : function(config) {
console.log("columnAutoWidth Plugin");
},

init : function(grid) {
console.log("columnAutoWidth Plugin init method");
var view = grid.getView();
view.on('refresh', function() {
console.log("refreshing view");
var view = grid.getView(), store = grid.getStore(), width;
var columns = grid.columns;
var widthArray = [];
for(var columnIndex = 0 ; columnIndex < columns.length; columnIndex++){
var columnText = columns[columnIndex].dataIndex;
var records = grid.store.data.items;
var maxWidth = 0;
var textMetrics = new Ext.util.TextMetrics();
for(var i=0;i<records.length;i++){
var record = records[i];
var actualWidth = textMetrics.getWidth(record.data[columnText]);
if( actualWidth > maxWidth){
maxWidth = actualWidth;
}
}

widthArray.push(maxWidth);
}

for(var columnIndex = 0 ; columnIndex < columns.length; columnIndex++){
console.log(columns[columnIndex].dataIndex+"---"+widthArray[columnIndex]);
grid.columns[columnIndex].setWidth(widthArray[columnIndex]);
}

}, grid)

}
});

droessner
7 Feb 2014, 9:07 AM
ExtJS provides a method that does this for you. Your plugin can be simplified to something like this:



Ext.define('my.ColumnAutoWidth', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.columnautowidth',
init: function(grid) {
grid.getView().on('refresh', function() {
var columns = this.getGridColumns(),
length = columns.length,
i;

for (i = 0; i < length; i++) {
this.autoSizeColumn(columns[i]);
}
});
}
});

newusername
10 Feb 2014, 2:30 AM
I corrected above version with


var columns = this.columns
this.view. autoSizeColumn(columns[i]);


And after above modification it is working fine.
But till my worry is performance. I have also added plugin for infinite grid over here which is excluded here for simplicity . But it is working fine with this plugin . My worry is , if I scroll down then some more data brought from server and added to grid. Now if above logic is going to check max width of all the row that grid or will check only last max width calculated and the width of new data just brought from server ?

Please advice..

droessner
10 Feb 2014, 5:38 AM
It will calculate the max column width based on the data that is loaded in the store on the client side.

newusername
10 Feb 2014, 7:09 AM
But what about performance ?