PDA

View Full Version : Help with Resizeable on Grid container



RyanG
13 Oct 2007, 1:36 AM
Hi all,

I'm having trouble getting resizeable to work properly on the container of my grid (which is a gridpanel inside a borderlayout)

What I want is to be able to drag vertically the bottom of the div containing the grid, and then the grid inside resizes.
I think I'm close to getting it working, I can drag the bottom of the grid container down, but I can't seem to capture the event to make the grid resize.

Am I on the right track or is there a better way of doing this? (see also screenshot attached)

Heres my HTML:


<div id="loanbox" class="pp x-box-blue">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">Loaned Products <span id="loanSingleInfo"></span></h3>
<div id="lProdPanel" style="width: 100%; height: 130px"><div id="loanedProdsGrid" style=" overflow:hidden; width: 100%"></div></div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
heres the JS:


this.itemGrid = new Ext.grid.EditorGrid('loanedProdsGrid', {
ds: this.loanedItemGrid.ds,
cm: this.loanedItemGrid.cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
autoExpandColumn: 'title',
clicksToEdit: 1,
loadMask: true
});
this.itemGrid.getSelectionModel().on("rowselect",this.selectRow,this);

var gp = new Ext.GridPanel(this.itemGrid,{ fitToFrame: true, fitToContainer: true });

var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [gp]
}
}, 'lProdPanel');

this.itemGrid.render();

var wrapped = new Ext.Resizable('lProdPanel', {
handles: 's',
pinned:true
});
gp.on("resize",function(){console.log("hello");});
Thanks for any help anyone can provide!

Ryan

evant
13 Oct 2007, 2:45 AM
http://extjs.com/deploy/ext/examples/grid/paging.html

Does exactly what you want:



// make the grid resizable, do before render for better performance
var rz = new Ext.Resizable('topic-grid', {
wrap:true,
minHeight:100,
pinned:true,
handles: 's'
});
rz.on('resize', grid.autoSize, grid);

RyanG
14 Oct 2007, 10:16 AM
ahhh .. guess I should've looked at the Ext source a bit more... there wasn't any documentation on a resize event in the docs on Resizeable.
Also using GridPanel and BorderLayout in the way I am using it is overkill, so I switched that to just inserting a grid into the div without all the Border controls.

All works fine now - thanks for the tip! :)

Ryan