PDA

View Full Version : Grid Column Width Calculator



aj3423
23 Jul 2010, 8:55 AM
this plugin makes grid capable of
auto adjust one or all column(s) width by its content/heading

got the idea from this thread:
https://www.sencha.com/forum/showthread.php?75274-3.0-Ext.ux.plugins.ColumnAutoResizer-(resize-grid-column-to-content-width)&p=363186 (https://www.sencha.com/forum/showthread.php?75274-3.0-Ext.ux.plugins.ColumnAutoResizer-%28resize-grid-column-to-content-width%29&p=363186)

but this plugin also supports Grouping-Locking-Buffered grid. and user can stop adjusting by clicking the grid at any time.

usage:

new Ext.grid.GridPanel({
...
view: new xxxGridView(), // provide a gridView explicitly, cause plugins inits before grid creates a default gridView
plugins: [new Ext.ux.ColumnWidthCalculator()]
});

udpate:
2010_8_9: bug fix, improve performance.

adjust all columns by heading
21846

adjust all columns by content
21844

adjusting
21845

Animal
23 Jul 2010, 9:14 AM
You might want to compare with this http://www.sencha.com/forum/showthread.php?82965-Dblclick-to-autosize-grid-columns

aj3423
23 Jul 2010, 9:26 AM
Hi Animal
thanks for the link, the code use getCell() to do the calculation, but for the buffered rows in buffered grid, the getCell() won't work
I append a div to the grid and use the div to do the calculation, is there any better way?

Samuel.reed
22 Nov 2010, 8:41 AM
This one is great! Definitely a well-needed feature in Ext and it works great. We run column locks and a live grid, this was the only plugin that did the job.

I made a few changes, mostly because we run Ext 2.3:



Removed Ext 3+ specific calls, should be fully compatible with Ext 2
Changed some quick typos (e.g. "Adjust all Columns< by")
Added "Auto Adjust" - just like Content adjust, but won't resize a column to smaller than the size of the header.
Thanks a ton for your work, this really is a killer feature.

wki01
23 Nov 2010, 7:50 AM
I can not run this plugin
The menu to resize options are never displayed.
In the debug value hmenu is always undefined.

Any idea?
thanks

Fragment of my test code:


....
var grid = new Ext.grid.GridPanel({
store: store,
view: new Ext.grid.GridView({ forceFit:true }),
plugins: [new Ext.ux.ColumnWidthCalculator()],
reserveScrollOffset: true,
loadMask: true,
autoLoad: false,
...


Fragment of plugin:


renderUI: function() {
var g = this.grid,
v = g.view;
var _this = this;

if(v.hmenu) { <<<------- undefined

var adjCol = {
itemId: 'adjCol',
hideOnClick: false,
text: 'Adjust Column By',

aj3423
23 Nov 2010, 8:37 AM
This one is great! Definitely a well-needed feature in Ext and it works great. We run column locks and a live grid, this was the only plugin that did the job.

I made a few changes, mostly because we run Ext 2.3:

Thanks a ton for your work, this really is a killer feature.
glad you need it, Thank you for the improvement, the 'Auto adjust' is a very good idea.

aj3423
23 Nov 2010, 8:44 AM
I can not run this plugin
The menu to resize options are never displayed.
In the debug value hmenu is always undefined.

Hi wki01, your code just run fine on my machine, what version of Extjs are you using?
does your grid have the "enableHdMenu = false"?
maybe you can debug into GridView's renderUI() to see why the "hmenu" is not created.

wki01
24 Nov 2010, 12:08 AM
I am using 3.30
I have edited paging.js and paging.html in directory examples\grid.
thanks



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Paging Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="TaskQueue.js"></script>
<script type="text/javascript" src="ColumnWidthCalculator.js"></script>
<script type="text/javascript" src="paging.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<h1>Paging Grid Example</h1>
<p>This example shows how to create a grid with paging. This grid uses a ScriptTagProxy to fetch cross-domain
remote data (from the Ext forums).</p>
<p>Note that the js is not minified so it is readable. See <a href="paging.js">paging.js</a>.</p>
<div id="topic-grid"></div>
</body>
</html>



/*!
* Ext JS Library 3.3.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
// create the Data Store
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt'
],
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'
})
});
store.setDefaultSort('lastpost', 'desc');

// pluggable renders
function renderTopic(value, p, record){
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}
var grid = new Ext.grid.GridPanel({
width:700,
height:500,
title:'ExtJS.com - Browse Forums',
store: store,
trackMouseOver:false,
disableSelection:true,
loadMask: true,
view: new Ext.grid.GridView({ forceFit:true }),
plugins: [new Ext.ux.ColumnWidthCalculator()],

// grid columns
columns:[{
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Topic",
dataIndex: 'title',
width: 420,
renderer: renderTopic,
sortable: true
},{
header: "Author",
dataIndex: 'author',
width: 100,
hidden: true,
sortable: true
},{
header: "Replies",
dataIndex: 'replycount',
width: 70,
align: 'right',
sortable: true
},{
id: 'last',
header: "Last Post",
dataIndex: 'lastpost',
width: 150,
renderer: renderLast,
sortable: true
}],
// customize view config
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
})
});
alert(grid.enableHdMenu) // <<<<<----------------- true
// render it
grid.render('topic-grid');
// trigger the data store load
store.load({params:{start:0, limit:25}});
});

aj3423
24 Nov 2010, 3:43 AM
I am using 3.30
I have edited paging.js and paging.html in directory examples\grid.


oh, 3.30, grid creates hmenu in afterRenderUI , so try replace all renderUI with afterRenderUI in ColumnWidthCalculator.js

and replace this line

var text = col.renderer(rawText);

with

var text = col.renderer(rawText, null, ds.getAt(row), row, colIndex, ds);

since the GridView is created explicity, the viewConfig is unnecessary.


view: new Ext.grid.GridView({
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
}),